/*
 Theme Name:   Flatsome Child
 Theme URI:    https://yourwebsite.com/
 Description:  Flatsome Child Theme for all custom modifications.
 Author:       Your Name
 Author URI:   https://yourwebsite.com/
 Template:     flatsome
 Version:      1.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  flatsome-child
*/

/*
==============================================
1. GENERAL & GLOBAL STYLES
==============================================
*/
.img-inner,
.box-image {
    border: 2px solid;
    border-radius: 15px;
}

.video {
    border-style: solid;
    border-radius: 20px;
    border-width: thick;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

label {
    color: #b69a51;
}

.form-flat {
    font-size: 0.8em;
}

/*
==============================================
2. HEADER & NAVIGATION
==============================================
*/

/* Main Menu Colours */
.header .nav > li > a,
.header .nav > li > a .nav-text {
    color: #b69a51;
}

.header .nav > li > a:hover,
.header .nav > li > a:focus,
.header .nav > li:hover > a {
    color: #ffcc00;
}

.header .nav > li.current-menu-item > a,
.header .nav > li.current-page-ancestor > a {
    color: #ffcc00;
}

/* Sub-menu */
.nav .nav-dropdown li a,
.nav .nav-dropdown li a .nav-text {
    color: #c0c0c0;
}

.nav .nav-dropdown li a:hover,
.nav .nav-dropdown li a:focus {
    color: #ffcc00;
}

/* Generic Nav Link Colours */
.nav-column > li > a,
.nav-dropdown > li > a,
.nav-vertical-fly-out > li > a,
.nav > li > a {
    color: #e0e0e0;
}

.nav-column > li > a:hover,
.nav-dropdown > li > a:hover,
.nav-vertical-fly-out > li > a:hover,
.nav > li > a:hover {
    color: #ffcc00;
}

.nav-column li.active > a,
.nav-column li > a:hover,
.nav-dropdown li.active > a,
.nav-dropdown > li > a:hover,
.nav-vertical-fly-out > li > a:hover,
.nav > li.active > a,
.nav > li.current > a,
.nav > li > a.active,
.nav > li > a.current,
.nav > li > a:hover {
    color: #ffcc00;
}

.nav-vertical > li > ul li a {
    color: #c0c0c0;
    transition: color .2s;
}

.header-bottom .nav li > a {
    color: #ffcc00;
}

/* Mobile / Off-Canvas Drawer */
.off-canvas .sidebar-menu {
    padding: 30px 0;
    background: black;
}

.off-canvas:not(.off-canvas-center) .nav-vertical li > a {
    padding-left: 20px;
    color: white;
}

.off-canvas:not(.off-canvas-center) .nav-vertical li > a:hover {
    padding-left: 20px;
    color: #ffcc00;
}

.header .nav-holder .nav-content .nav > li > a,
.header .nav-holder .nav-content .nav > li > a .nav-text {
    color: #e0e0e0;
}

.header .nav-holder .nav-content .nav > li > a:hover,
.header .nav-holder .nav-content .nav > li.current-menu-item > a {
    color: #ff6600;
}

.off-canvas .sidebar-inner {
    padding: 30px 20px;
    background-color: #323232;
}

.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
    -webkit-overflow-scrolling: touch;
    background-color: hsla(0, 0%, 0%, 0.95);
    bottom: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(calc(var(--drawer-width)*-1));
    transition: transform .2s;
    width: var(--drawer-width);
}

/* Breadcrumbs */
.breadcrumbs {
    color: #ff6600;
}

.breadcrumbs a {
    color: #e0e0e0;
}

.breadcrumbs a:hover {
    color: #ffcc00;
}

.dark .breadcrumbs {
    color: #fff;
    font-size: 80%;
    letter-spacing: .05em;
    line-height: 1.2em;
    font-weight: 400;
}

.breadcrumbs a.current,
.breadcrumbs a:hover {
    color: var(--wp--preset--color--luminous-vivid-amber);
}

/*
==============================================
3. HERO SECTION & BANNERS
==============================================
*/
#custom-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

#custom-hero-banner .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#custom-hero-banner .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

#custom-hero-banner .banner-content {
    position: relative;
    z-index: 3;
    width: 90%;
    max-width: 1400px;
    text-align: center;
}

.interactive-heading h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

.word-wrapper {
    display: inline-block;
    margin-right: 0.25em;
    white-space: nowrap;
}

.interactive-heading h2 span span {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 2px #FFFFFF;
    text-stroke: 2px #FFFFFF;
    transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.interactive-heading h2 span span.hover-effect {
    color: #FFFFFF;
    transform: translateY(-10px) scale(1.1);
}

.banner p {
    margin: 0;
    font-size: 80%;
    letter-spacing: .05em;
}

.banner h3 {
    font-size: 1.2em;
}

.banner h2 {
    letter-spacing: .05em;
}

/*
==============================================
4. AML ICON BAR (Final Aesthetic Glow)
==============================================
*/

.aml-icon-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
}

.aml-icon-bar .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease-out;
}

/* Style the icon and text */
.aml-icon-bar .icon-item i {
    font-size: 2.4rem;
    color: #b69a51;
    margin-bottom: 0.4rem;
    border-radius: 50%; /* This is crucial for a circular glow */
    transition: all 0.3s ease-in-out;
}

.aml-icon-bar .icon-item span {
    font-size: 0.95rem;
    font-weight: 500;
    color: #b69a51;
    text-align: center;
    transition: color 0.3s ease-in-out;
}


/* --- THE AESTHETIC GLOW EFFECT ON HOVER --- */
.aml-icon-bar .icon-item:hover i {
    color: #FFFFFF; /* Makes the icon itself brighter on hover */
    
    /* 
     * THE SOFT GLOW EFFECT
     * Format: offset-x | offset-y | blur-radius | spread-radius | color 
     * We use a large blur and zero spread to create a soft, "airbrushed" halo.
     */
    box-shadow: 0 0 70px 5px rgba(255, 255, 255, 0.5);
}

/* Brighten the text on hover */
.aml-icon-bar .icon-item:hover span {
    color: #ffcc00;
}

/* Add a subtle lift effect */
.aml-icon-bar .icon-item:hover {
    transform: translateY(-5px);
}

/* --- RESPONSIVE BREAKPOINTS (Unchanged) --- */
@media (max-width: 768px) {
    .aml-icon-bar { gap: 1.5rem; }
    .aml-icon-bar .icon-item i { font-size: 2rem; }
    .aml-icon-bar .icon-item span { font-size: 0.85rem; }
}
@media (max-width: 480px) {
    .aml-icon-bar { gap: 2rem 1rem; }
    .aml-icon-bar .icon-item { flex-basis: calc(33.333% - 1rem); }
    .aml-icon-bar .icon-item i { font-size: 1.8rem; }
    .aml-icon-bar .icon-item span { font-size: 0.8rem; }
}
/*
==============================================
5. "WHY CHOOSE US" SECTION
==============================================
*/
.aml-why-choose {
    background-color: #000000;
    padding: 60px 0;
    text-align: center;
}

.why-headline {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #ffcc00;
}

.why-sub {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.why-badge {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.why-badge span {
    background-color: #222222;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    color: #ffffff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.why-badge span:hover {
    transform: translateY(-5px);
    color: #ffcc00;
}

.why-button-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
    align-items: stretch;
}

.why-button-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px;
    border: 1px solid #444444;
    border-radius: 8px;
    background-color: #1a1a1a;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    flex-basis: 250px;
    flex-grow: 1;
    max-width: 280px;
}

.why-button-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    border-color: #ffcc00;
}

.why-button-item i {
    font-size: 2.2rem;
    color: #ffcc00;
    margin-bottom: 15px;
}

.why-button-item h3 {
    font-size: 1.3rem;
    color: #ffcc00;
    margin-bottom: 10px;
}

.why-button-item p {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.5;
    flex-grow: 1;
}

.why-cta {
    display: inline-block;
    background-color: transparent;
    color: #b69a51;
    border: 2px solid #b69a51;
    padding: 13px 28px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.why-cta:hover,
.why-cta:focus {
    background-color: #ffcc00;
    color: #000000;
    border-color: #ffcc00;
}

/*
==============================================
6. WOOCOMMERCE & SHOP
==============================================
*/
.widget .current-cat > a {
    color: #ff6600;
}

span.amount {
    color: #ffcc00;
    font-weight: 700;
    white-space: nowrap;
}

.widget-title i {
    opacity: .75;
}

.yith-wcwl-add-button .add_to_wishlist svg.yith-wcwl-icon-svg,
.yith-wcwl-add-button .add_to_wishlist img {
    color: #ffcc00;
}

.featured-badge {
    font-size: 0.8em;
}

.cart-popup-inner {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    background-color: #282828;
}

@media (min-height:500px) {
    .cart-popup-inner--sticky .ux-mini-cart-footer {
        background-color: #000;
        border-top: 1px solid #f1f1f1;
        bottom: 0;
        position: sticky;
    }
}

.tabbed-content .nav,
.product-tabs {
    font-size: 1.6em;
}

/*
==============================================
7. PAGE TITLES & HEADERS
==============================================
*/
.normal-title,
.featured-title {
    background-color: #323232;
    border-bottom: 1px solid #ececec;
    border-top: 1px solid #ececec;
}

.featured-title .page-title-inner {
    padding-bottom: 20px;
    padding-top: 20px;
}

.shop-page-title.featured-title .title-overlay {
    background-color: #323232!important;
}

.shop-page-title {
    font-size: 1.3em;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 5px!important;
}

.page-header-wrapper {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

/*
==============================================
8. MISCELLANEOUS
==============================================
*/
/* Tables */
td {
    color: #ffcc00;
}

.dark-table td:first-child {
    border-right: #c0c0c0 1px solid;
}

.dark-table th {
    border-bottom: #c0c0c0 0px;
    padding-bottom: 10px;
}

.dark-table td {
    border-bottom: #c0c0c0 0px;
}

/* 404 Page */
@media (max-width: 768px) {
    #main-404 .ux_heading,
    #main-404 .ux_text,
    #main-404 .ux_button {
        text-align: center;
    }
}

#main-404 .ux_banner {
    --ux-banner-overlay: rgba(30, 30, 30, .6);
}

#main-404 .ux_search input {
    font-size: 1.1rem;
    padding: .8rem 1rem;
}

/* Dark Mode Theme Compatibility */
.dark .heading-font,
.dark a.lead,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark label,
.hover-dark:hover a,
.hover-dark:hover h1,
.hover-dark:hover h2,
.hover-dark:hover h3,
.hover-dark:hover h4,
.hover-dark:hover h5,
.hover-dark:hover h6,
.hover-dark:hover p {
    color: var(--wp--preset--color--luminous-vivid-amber);
}

/* Responsive Fix */
@media (max-width: 512px) {
    .flex-right {
        margin-left: auto;
        display: none;
    }
}

/* 
===================================================================
9. Contact Form 7 Styling for Dark Backgrounds
=================================================================== 
*/

/* 1. Style the form labels (e.g., "Your Name", "Your Email") */
.wpcf7 label {
    color: #DDDDDD; /* A slightly off-white is often easier on the eyes than pure white */
    font-weight: bold; /* Optional: Makes labels stand out more */
}

/* 2. Style the text the user types into the input fields and text areas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
    color: #FFFFFF; /* Text color inside the input box */
    background-color: #1A1A1A; /* A very dark gray, not pure black */
    border: 1px solid #555555; /* A visible border */
    padding: 10px; /* Makes the fields easier to use */
}

/* 3. Style the placeholder text (the grayed-out hints inside the fields) */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #888888; /* A light gray for the placeholder hint text */
    opacity: 1; /* Ensures the color is not faded out by the browser */
}

/* 4. Style the submit button */
.wpcf7 .wpcf7-submit {
    background-color: #0073aa; /* A distinct background color */
    color: #FFFFFF; /* White text on the button */
    border: none; /* Removes the default border */
    padding: 12px 24px; /* Makes the button larger and easier to click */
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px; /* Optional: Gives the button rounded corners */
}

/* Add a hover effect for the button */
.wpcf7 .wpcf7-submit:hover {
    background-color: #008ec2; /* A slightly lighter color on hover */
}

/* 5. Style the response output messages (for success, errors, etc.) */
/* This builds on the CSS you already found */
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 1em 1em;
    border: 2px solid; /* We will define the color below */
}

/* Success Message (e.g., "Thank you for your message.") */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450; /* Green border for success */
    background-color: #1a331c; /* Dark green background */
    color: #c8e6c9; /* Light green text */
}

/* Error/Validation Message (e.g., "One or more fields have an error.") */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900; /* Orange/yellow border for warnings */
    background-color: #332600; /* Dark yellow background */
    color: #fff3cd; /* Light yellow text */
}

/* Style the individual validation error messages that appear under the fields */
.wpcf7-not-valid-tip {
    color: #ff7b7b; /* A light red/pink color for individual field errors */
    font-size: 0.9em;
    font-weight: bold;
}