/* Ported verbatim from the Oxygen stylesheets 'vv-custom' and 'vv-woocommerce-login-pages'.
   Page content (homepage, contact, FAQ, account pages) still uses these classes. */

/* ===== vv-custom ===== */
figure.wp-block-image {
  margin: initial;
}

.shadow {
  box-shadow: 0 5px 25px rgba(0,0,0,.3);
}


.oxy-woo-mini-cart__quantity-badge {
  top: -4px;
  right: -6px;
}
.product-cards-grid .wc-block-product-template__responsive.columns-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* View Cart button after adding something to cart */
.primary-button, .mpcs-certificate-link a, .woocommerce-notices-wrapper .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
  background-color: var(--pink) !important;
  color: #ffffff !important;
  padding: 6px 15px !important;
  border-radius: 10px;
  border: 2px solid var(--pink);
  float: none;
  cursor: pointer;  
}

.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background: linear-gradient(45deg, #d53369 0%, #daae51 100%);
  padding: 20px;
  color: white;
  border-radius: 10px;
  transition: .2s all !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0);
  background-size: 200% 200%;
  background-position: 0;
  border: none;
}
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover {
  background-position: 100%;
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.woocommerce a.button {
  background-color: #e53dc3;
  padding: 20px;
  color: white;
}

.flex-control-nav {
  list-style: none;
  padding-left: 0;
}
.flex-control-nav li {
  display: flex;
}
.woocommerce-product-gallery__trigger {
  display: none;
}
.woocommerce-product-gallery__image a {
  display: flex;
}
.woocommerce-product-gallery__image a>img {
  min-width: 100%;
}
.wp-post-image,  {
  min-width: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs, .flex-control-nav {
  display: grid;
/*   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));  */
  grid-template-columns: repeat(6, 1fr); 
  gap: 10px;
  padding-top: 10px;
  margin-top: 0;
  width: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs li, .flex-control-nav img {
  width: 100%;
  border-radius: 5px;
}

.callouts>*:before {
  width: 10px;
  height: 10px;
  background: #ff9800;
  border-radius: 100px;
  content: " ";
}
.callouts>* {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
}
.feature-tag {
  border:2px solid var(--vv-magenta);
  color: white;
  border-radius: 100px;
  padding: 7px 10px;
  font-size: .7rem;
  color: var(--vv-magenta);
  display: inline-block;
  opacity: .7;
}

.handwritten {
  font-family: var(--vv-font-handwritten);
  color: var(--vv-magenta);
}

/* 1. The Container holds everything together */
.vv-image-container {
    position: relative;
    display: inline-block;
    /* Ensure z-index context is established here */
    z-index: 1; 
}

.vv-image-container::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    
    background: linear-gradient(135deg, var(--vv-magenta), var(--vv-sunset-orange));
    
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    
    filter: blur(50px);
    opacity: 0.3;
    z-index: -1;
    transform: rotate(-10deg);
    
    animation: vv-blob-pulse 8s infinite ease-in-out alternate;
}

/* 3. The Image - Sits on top */
.vv-founder-portrait {
    width: 100%;
    max-width: 280px; /* Keep the image concise */
    border-radius: 12px;
    display: block;
    position: relative;
    /* Ensure image sits above the blob */
    z-index: 2; 
    /* A tiny shadow just for definition against the blob */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Optional Animation Keyframes */
@keyframes vv-blob-pulse {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.1); }
}


.vv-thesis-content-v2 {
    border-left: 2px solid var(--vv-magenta); /* Subtle magenta anchor */
    padding-left: 40px;
    margin-left: 10px;
}

/* Values Vault Global Button Styles */
.wp-block-button__link.wp-element-button {
    /* 1. The Pill Shape & Base Typography */
    border-radius: 100px !important; /* Forces the pill shape regardless of block settings */
    padding: 10px 16px !important;
    font-weight: normal;
  font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: none; /* Keeps it friendly/approachable vs ALL CAPS */
    font-family: var(--vv-font-body);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth 'Taking Cara Babies' glide */
    border: none;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 2. The Interactive Hover Effect */
.wp-block-button__link.wp-element-button:hover {
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 10px 20px rgba(232, 32, 99, 0.25); /* Magenta glow */
    opacity: 0.95;
    text-decoration: none !important;
}

/* 3. Handling Secondary Buttons (Outline style) */
/* If you ever use the 'Outline' block style, this makes it match */
.is-style-outline .wp-block-button__link.wp-element-button {
    border: 2px solid var(--vv-magenta) !important;
    background-color: transparent !important;
    color: var(--vv-magenta) !important;
}

.is-style-outline .wp-block-button__link.wp-element-button:hover {
    background-color: var(--vv-magenta) !important;
    color: #ffffff !important;
}

.hidden-overflow {
  overflow: hidden;
}


/* Process Section */

.vv-transformation-section {
    padding: 120px 0;
    background: #fff;
}

.vv-section-header {
    text-align: center;
    margin-bottom: 80px;
}

.vv-step-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

.vv-row-reverse {
    direction: rtl; /* Simple way to flip the grid */
}

.vv-row-reverse .vv-step-content {
    direction: ltr; /* Reset text direction */
}

.vv-step-number {
    font-family: var(--vv-font-heading);
    font-size: 4rem;
    color: rgba(233, 30, 99, 0.1); /* Very faint magenta number */
    line-height: 1;
    margin-bottom: -20px;
}

.vv-step-content h3 {
    font-family: var(--vv-font-heading);
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.vv-step-image img {
    border-radius: 24px;
    box-shadow: var(--vv-shadow-soft);
  max-width: 100%;
}

.vv-contact-section {
    padding: 100px 20px;
    background-color: #fff;
}

.vv-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.vv-contact-info {
    border-left: 1px solid rgba(233, 30, 99, 0.3); /* The vertical line from your homepage */
    padding-left: 40px;
}

.vv-method-item {
    margin-top: 30px;
}

.vv-method-item strong {
    display: block;
    font-family: var(--vv-font-heading);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.vv-help-links {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.vv-help-links li {
    margin-bottom: 10px;
}

.vv-help-links a {
    color: var(--vv-magenta);
    text-decoration: none;
    font-weight: 500;
}

/* Form Container & Blob */
.vv-contact-form-wrap {
    position: relative;
}

.vv-form-container {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.05);
    position: relative;
    z-index: 2;
}

.vv-form-blob {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(233,30,99,0.15) 0%, rgba(255,152,0,0.05) 100%);
    filter: blur(40px);
    z-index: 1;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 768px) {
    .vv-contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .vv-contact-info {
        padding-left: 20px;
    }
}


/* NINJA FORMS STYLES */
/* 1. Global Form Container */
.nf-form-cont {
    font-family: var(--vv-font-body) !important;
}

.nf-form-fields-required {
    font-size: 0.85rem;
    color: var(--vv-text-gray);
    margin-bottom: 20px;
}

/* 2. Labels & Asterisk */
.nf-field-label label {
    font-family: var(--vv-font-body);
    font-weight: 600 !important;
    color: var(--vv-deep-black) !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

.ninja-forms-req-symbol {
    color: var(--vv-magenta) !important;
}

/* 3. Text Inputs & Textarea */
.nf-form-content input:not([type="button"]),
.nf-form-content textarea {
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    background-color: #fff !important;
    font-family: var(--vv-font-body) !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}

/* Focus State: Glow effect mirroring the branded blobs */
.nf-form-content input:focus,
.nf-form-content textarea:focus {
    border-color: var(--vv-magenta) !important;
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.1) !important;
    outline: none !important;
}

/* 4. The Pill-Shaped Submit Button */
.nf-field-container.submit-container input[type="submit"] {
    background-color: var(--vv-magenta) !important;
    color: #ffffff !important;
    border-radius: 100px !important; /* Full Pill Shape */
    padding: 16px 45px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.2) !important;
    margin-top: 20px !important;
}

/* Button Hover: Lift & Glow */
.nf-field-container.submit-container input[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.3) !important;
    opacity: 0.95;
}

/* 5. Space between field rows */
.nf-field-container {
    margin-bottom: 25px !important;
}




/* Styling specific to the accordion container */
        .faq-accordian {
            overflow: hidden; /* Ensure border-radius clips children */
            list-style: none;
            padding-left: 0;
        }

        /* Individual Accordion Item Styling (Targets direct LI children) */
        .faq-accordian > li {
            border-bottom: 1px solid #eee; /* Separator between questions */
        }
        /* Remove border from the last item */
        .faq-accordian > li:last-child {
            border-bottom: none;
        }

        /* Question (Trigger) Styling (Targets strong inside direct LI children) */
        .faq-accordian > li > strong {
            display: block; /* Make the strong tag take full width */
            padding: 18px 45px 18px 20px; /* Padding (right padding for icon) */
            cursor: pointer;
            position: relative; /* Needed for positioning the icon */
            user-select: none; /* Prevent text selection on click */
            font-weight: 600; /* Slightly bolder */
            color: #333; /* Darker text color */
            transition: background-color 0.2s ease; /* Smooth hover effect */
        }

        /* Hover effect for the question */
        .faq-accordian > li > strong:hover {
            background-color: #f0f0f0; /* Light grey background on hover */
        }

        /* Style the nested UL (the answer panel) (Targets UL inside direct LI children) */
        .faq-accordian > li > ul.wp-block-list {
            max-height: 0; /* Hide the content by default */
            overflow: hidden;
            padding-left: 20px; /* Indent the answer slightly */
            padding-right: 20px;
            margin: 0; /* Reset margin */
            background-color: #fdfdfd; /* Slightly off-white for the answer panel */
            /* Smooth transition for opening/closing */
            transition: max-height 0.35s ease-out, padding 0.35s ease-out;
            /* Remove padding when closed */
            padding-top: 0;
            padding-bottom: 0;
        }

        /* Style for when the accordion item (LI) is active/open */
        .faq-accordian > li.active > strong {
             background-color: #e9e9e9; /* Slightly darker background when active */
        }

        .faq-accordian > li.active > ul.wp-block-list {
            max-height: 1000px; /* Set a large max-height to reveal content */
                               /* Adjust if your content is exceptionally long */
            transition: max-height 0.5s ease-in, padding 0.35s ease-in;
            /* Add padding back when open */
            padding-top: 15px;
            padding-bottom: 20px;
        }

        /* +/- Icon Indicator using ::after (Targets strong inside direct LI children) */
        .faq-accordian > li > strong::after {
            content: '+'; /* Plus sign for closed state */
            font-size: 1.4em; /* Make icon slightly larger */
            font-weight: bold;
            color: #555;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease; /* Smooth rotation */
        }

        /* Change icon when active/open (Targets strong inside active LI) */
        .faq-accordian > li.active > strong::after {
            content: '−'; /* Minus sign for open state */
            transform: translateY(-50%) rotate(180deg); /* Rotate plus to look like minus */
        }

        /* Ensure nested lists within answers retain their style and indentation */
        /* Targets ULs nested within the answer panel UL */
        .faq-accordian > li > ul.wp-block-list ul.wp-block-list {
            padding-left: 25px; /* Keep indentation for nested lists */
            list-style: disc;  /* Restore list bullets for inner lists */
            margin-top: 10px;
            margin-bottom: 10px;
            max-height: none; /* Ensure nested lists aren't hidden by max-height */
            overflow: visible; /* Ensure nested list content isn't clipped */
            /* Reset background if needed, inheriting from parent LI's UL otherwise */
            background-color: transparent;
            box-shadow: none;
            border-radius: 0;
        }
        /* Style list items within nested lists */
        .faq-accordian > li > ul.wp-block-list ul.wp-block-list li {
            margin-bottom: 8px;
            border-bottom: none; /* Ensure no borders on deep nested items */
        }
        /* Make nested strong tags bold */
        .faq-accordian > li > ul.wp-block-list strong {
             font-weight: bold;
        }
         /* Make nested em tags italic */
        .faq-accordian > li > ul.wp-block-list em {
             font-style: italic;
        }

/* ===== vv-woocommerce-login-pages ===== */
/* WooCommerce My Account - Command Center Layout */

/* 1. The Container */
.woocommerce-account .woocommerce {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    
    margin: 40px auto;
}
.woocommerce-account .woocommerce::after, .woocommerce-account .woocommerce::before {
  display: none;
}

/* 2. Sidebar Navigation (Updraft Style) */
.woocommerce-MyAccount-navigation {
    flex: 0 0 250px;
    background: #fff;
    border-radius: 12px;
    padding: 20px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #f0f0f0;
  padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin-bottom: 0;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 15px 25px;
    text-decoration: none;
    color: var(--vv-text-gray);
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--vv-cream);
    color: var(--vv-magenta);
    border-left: 4px solid var(--vv-magenta);
}

/* 3. The Content Area */
.woocommerce-MyAccount-content {
    flex: 1;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 4. The Orders Table (Updraft Style) */
.woocommerce-MyAccount-content .shop_table {
    border: none !important;
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-MyAccount-content thead th {
    background-color: var(--vv-deep-black) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 15px !important;
}

.woocommerce-MyAccount-content tbody td {
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
}

/* 5. Action Buttons (Magenta/Sunset) */
.woocommerce-MyAccount-content .button {
    background-color: var(--vv-magenta) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.woocommerce-MyAccount-content .button:hover {
    background-color: var(--vv-sunset) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }
    .woocommerce-MyAccount-navigation {
        flex: 1 1 100%;
        width: 100%;
    }
}



/* WooCommerce Custom Account Dashboard Styling */

/* Make sure the main content area does not stack on small screens */
.woocommerce-MyAccount-content {
    width: 100%;
}

/* 1. Header welcome styling */
.vv-dashboard-welcome {
    margin-bottom: 40px !important;
}

/* 2. Grid Container for the cards */
.vv-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Mobile default */
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

/* Tablet view */
@media (min-width: 600px) {
    .vv-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop view - 4 cards wide like image_19.png */
@media (min-width: 1024px) {
    .vv-dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

/* 3. The Individual Card Styling */
.vv-dashboard-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px; /* Large rounded corners from image_11.png */
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Centering like image_19.png if you prefer, or start-aligned */
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Soft shadow from image_11.png */
    height: 100%; /* Ensures all cards match height */
}

/* Centered content version (closer to Updraft example) */
/* .vv-dashboard-card { align-items: center; text-align: center; } */

.vv-dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
}

/* 4. Icon Styling */
.vv-card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    color: var(--vv-sunset); /* Use your sunset orange/yellow brand color from image_16.png */
    opacity: 0.8;
}

/* Centered icon version */
/* .vv-card-icon { margin-left: auto; margin-right: auto; } */

.vv-card-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

/* 5. Text Styling within Cards */
.vv-card-title {
    font-family: var(--vv-font-body); /* Use sans-serif like image_15.png "Individuals" */
    font-weight: 700;
    font-size: 1.25rem !important;
    color: var(--vv-deep-black);
    margin: 0 0 10px 0 !important;
}

.vv-card-text {
    font-size: 0.95rem;
    color: var(--vv-text-gray); /* Grey from image_12.png */
    line-height: 1.6;
    margin: 0 !important;
}

/* Values Vault Branded Login/Register Page */

/* 1. Page Container & Layout */
.woocommerce-account .u-columns.col2-set {
    display: flex;
    gap: 60px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .woocommerce-account .u-columns.col2-set {
        flex-direction: column;
        gap: 40px;
    }
}

/* 2. Headings (Serif Authority) */
.woocommerce-account h2 {
    font-family: var(--vv-font-heading) !important; /* Playfair Display */
    font-size: 2.2rem !important;
    color: var(--vv-deep-black) !important;
    margin-bottom: 30px !important;
    border-bottom: none !important; /* Remove the standard line */
}

/* 3. Form Containers */
.woocommerce-form-login, 
.woocommerce-form-register {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 4. Input Fields (Consistent with Contact Form) */
.woocommerce-Input, 
.woocommerce-account .input-text {
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-family: var(--vv-font-body) !important;
    transition: all 0.3s ease !important;
}

.woocommerce-Input:focus, 
.woocommerce-account .input-text:focus {
    border-color: var(--vv-magenta) !important;
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.1) !important;
    outline: none !important;
}

/* 5. Pill-Shaped Buttons */
.woocommerce-account .button {
    background-color: var(--vv-magenta) !important;
    color: #ffffff !important;
    border-radius: 100px !important; /* Full Pill Shape */
    padding: 14px 40px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.2) !important;
    cursor: pointer;
}

.woocommerce-account .button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.3) !important;
    background-color: var(--vv-magenta) !important; /* Keep color consistent */
    opacity: 0.95;
}

/* 6. Links & Accents */
.woocommerce-LostPassword a {
    color: var(--vv-text-gray) !important;
    font-size: 0.9rem;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.woocommerce-LostPassword a:hover {
    color: var(--vv-magenta) !important;
}

.required {
    color: var(--vv-magenta) !important;
    text-decoration: none !important;
}

/* 7. Checkbox Styling */
.woocommerce-form__input-checkbox {
    accent-color: var(--vv-magenta);
}