/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ---- Page loader ---- */
#page-transition,
.page-transition-wrap,
.css3-spinner {
    background-color: #f5f5f5 !important;
}

/* ---- Light theme override (replaces color-invert.css) ---- */
body {
    background-color: #f5f5f5 !important;
    background-image: none !important;
    color: #333 !important;
}

#header-wrap,
#header,
.dark #header-wrap {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
h1, h2, h3, h4, h5, h6 {
    color: #c8973a !important;
}

/* Hero headings: gold on desktop, white on mobile (dark overlay) */
#slider h1, #slider h2, #slider h3,
#slider h4, #slider h5, #slider h6 {
    color: #c8973a !important;
}

@media (max-width: 991px) {
    #slider h1, #slider h2, #slider h3,
    #slider h4, #slider h5, #slider h6 {
        color: #fff !important;
    }
}

.dark p, .dark span, .dark li, .dark a:not(.button):not(.btn),
p, .lead {
    color: #555 !important;
}

/* ---- Envelope writing section — restore original colors ---- */
.ow-front-text,
.ow-front-val {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}

/* Open/Seal button */
.open-btn {
    color: #555 !important;
    background: #fff !important;
    border-color: #ddd !important;
}
.open-btn:hover {
    background: #f5f0e8 !important;
    border-color: #c8973a !important;
    color: #c8973a !important;
}

/* Card preview box */
.mini-preview {
    background: #fff !important;
    border-color: #e5e5e5 !important;
}
.mini-preview-label { color: #aaa !important; }
.mini-preview-title { color: #333 !important; }
.mini-preview-msg   { color: #777 !important; }

/* Card nav buttons */
.card-nav button {
    color: #555 !important;
    border-color: #ccc !important;
    background: #fff !important;
}
.card-nav button:hover { border-color: #c8973a !important; color: #c8973a !important; }
.card-nav span, #navLabel { color: #555 !important; }

/* Right panel text — fix for light background */
.panel-heading {
    color: #aaa !important;
}
.panel-label {
    color: #333 !important;
}
.hint-text {
    color: #888 !important;
}
.ow-prefix {
    color: #555 !important;
    background: #f0f0f0 !important;
    border-color: #ddd !important;
}
.ow-row input {
    color: #333 !important;
    background: #fff !important;
    border-color: #ddd !important;
}
.ow-row input::placeholder { color: #bbb !important; }
.ow-row input:focus {
    border-color: #c8973a !important;
    background: #fffdf8 !important;
}
.pills-label { color: #888 !important; }

/* Suggestion pills */
#suggestionsContainer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 20px;
}
#suggestionsLabel {
    display: block !important;
    color: #aaa !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    margin-top: 10px !important;
}
.pill {
    display: inline-block !important;
    color: #666 !important;
    border: 1px solid #c8973a !important;
    background: #fffbf3 !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    cursor: pointer !important;
}
.pill:hover {
    color: #fff !important;
    background: #c8973a !important;
}

/* Inspiration pills */
#inspirationsContainer {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-height: 20px;
}
#inspirationsLabel {
    display: block !important;
    color: #aaa !important;
}
.insp-pill {
    display: block !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
    background: #fafafa !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
}
.insp-pill:hover {
    border-color: #c8973a !important;
    color: #c8973a !important;
    background: #fffbf3 !important;
}

.msg-textarea {
    color: #333 !important;
    background: #fff !important;
    border-color: #ddd !important;
}
.msg-textarea::placeholder { color: #bbb !important; }

.letter-to-label { color: #a8893e !important; }
.letter-ow-val   { color: #1a1612 !important; }
.letter-msg-val  { color: #6b6259 !important; }

.card-nav button, #navLabel { color: #555 !important; }

.dark .text-white-50,
.text-white-50 {
    color: #888 !important;
}

.page-section.dark,
.section.dark {
    background-color: transparent !important;
}


#primary-menu > ul > li > a,
#primary-menu ul li a {
    color: #333 !important;
}

#copyrights,
.dark #copyrights,
#copyrights p,
.dark #copyrights p {
    background-color: #f5f5f5 !important;
    color: #888 !important;
}
/* ---- Box & Product Cards ---- */
.box-selector,
.product-selector {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #eee;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: all 0.25s ease;
}

.box-selector:hover,
.product-selector:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(200,151,58,0.18);
    border-color: #c8973a;
}

.box-selector h4,
.product-selector h4 {
    color: #c8973a !important;
    font-family: 'Italiana', serif !important;
    font-size: 1.3rem !important;
}

.box-selector p,
.product-selector p {
    color: #777 !important;
    font-size: 13px !important;
}
/* ----------------------------------------------------------- */

@media (max-width: 991px) {
    #slider {
        background-position: center center !important;
        background-size: cover !important;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    #slider .bg-overlay {
        background: rgba(0, 0, 0, 0.52) !important;
    }

    #slider .slider-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    #slider .col-md-6 {
        text-align: center;
    }

    #slider h2.display-3 {
        font-size: 2.4rem !important;
        color: #fff !important;
    }

    #slider .lead {
        color: rgba(255,255,255,0.85) !important;
        font-size: 0.95rem !important;
    }

    #slider .btn {
        margin: 0 auto;
    }
}