/* Service App Styles - Mobile First with Responsive Design */
/* ============================================
   CSS THEMING VARIABLES - CUSTOMIZABLE
   ============================================
   Modify these variables to rebrand the application
   for different companies and brand standards
   ============================================ */

:root {
    /* Brand Colors - Primary Palette */
    --brand-primary: #A6093D;
    --brand-gray: #5C5C5C;
    --brand-primary-hover:  #8A0733;
    --brand-primary-light:  #C20A47;
    --brand-secondary: #5C5C5C;
    --brand-secondary-hover: #4a4a4a;

    --clear-button-transparent: var(--brand-primary);

    /* Brand Colors */
    --brand-white: #ffffff;
    --catalog-brand-primary: var(--brand-primary) /* #982F6A */;
    --catalog-brand-gray: var(--brand-secondary) /* #5C5C5C */;
    /* Border Colors */
    --award-levels-border: #d6d6d6;
    --award-levels-border-heading: var(--brand-primary) /* #982F6A */;
    /* Invitation Colors */
    --invitation-footer-divider-color: #9ca3af;
    /* Catalog Border Colors */
    --catalog-border: #e4e4e7;
    --catalog-border-hover: var(--brand-primary) /* #982F6A */;
    /* Award Levels Brand Colors */
    --award-levels-brand-primary: var(--brand-primary) /* #982F6A */;
    --award-levels-brand-gray: var(--brand-secondary) /* #5C5C5C */;
    /* Product Page Colors */
    --product-page-primary: var(--brand-primary) /* #982F6A */;
    /* Redeem Award Colors */
    --redeem-award-primary: var(--brand-primary) /* #982F6A */;
    --redeem-award-primary-hover: var(--brand-primary-hover) /* #6F457D */;
    --redeem-award-secondary: var(--brand-secondary) /* #5C5C5C */;
    --redeem-award-secondary-hover: var(--brand-secondary-hover) /* #4a4a4a */;
    /* FAQs Colors */
    --faqs-primary: var(--brand-primary) /* #982F6A */;
    --faqs-secondary: var(--brand-secondary) /* #5C5C5C */;
    /* Edit Account Colors */
    --edit-account-primary: var(--brand-primary) /* #982F6A */;
    --edit-account-secondary:  var(--brand-secondary) /* #5C5C5C */;
    /* Order History Colors */
    --order-history-primary: var(--brand-primary) /* #982F6A */;
    --order-history-secondary:  var(--brand-secondary) /* #5C5C5C */;

/*-------------------------------

    END THEME COLORS 

--------------------------------*/
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #212223;
    --color-gray-dark: #5c5c5c;
    --color-gray-medium: #acacac;
    --color-gray-light: #e4e4e7;
    --color-gray-lighter: #f7f7f7;
    --color-background:#FFFFFF;
    --color-background-light-gray:#fafafa;
    --color-body-background: #ffffff;
    --color-border-alt: #d6d6d6;
    --color-text-muted: #a1a1aa;
    --color-text-primary: #000000;
    --color-text-input: #09090b;
    --color-text-gray: #71717a;
    --color-disabled-field: #f4f4f5;
    --color-text-light: #FFFFFF;
    /* UI State Colors */
    --color-hover-light: #f5f5f5;
    /* --color-focus: #982F6A #982F6A; */
    --color-border: #e4e4e7;
    /* Spacing Scale */
    --spacing-xs:  4px;
    --spacing-xs1: 6px;
    --spacing-sm:  8px;
    --spacing-md:  10px;
    --spacing-std: 16px;
    --spacing-lg:  20px;
    --spacing-xl:  24px;
    --spacing-xl2: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 60px;
    --spacing-4xl: 70px; 
    /* Border Radius Scale */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-std:  12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-3xl:  40px;
    --radius-4xl:  48px;
    --radius-full: 9999px;
    /* Typography */
    --font-family-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-secondary: 'Montserrat', sans-serif;
    /* Font Sizes */
    --font-size-xs:  12px;
    --font-size-sm:  14px;
    --font-size-base:16px;
    --font-size-lg:  18px;
    --font-size-xl:  20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;
    --font-size-5xl: 48px;
    /* Font Weights */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;
    --font-weight-black:    900;
    /* Line Heights */
    --line-height-tight:   1.2;
    --line-height-snug:    1.3;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;
    /* Letter Spacing */
    --letter-spacing-tight: -0.6px;
    /* Shadows */
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);    
    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0px 6px 8px -4px rgba(0, 0, 0, 0.15), 0px 12px 20px -3px rgba(0, 0, 0, 0.15);
    /* Header Specific */
    --header-bg: var(--color-white);
    --header-bg-scrolled: rgba(255, 255, 255, 0.8);
    --header-text-color: var(--color-gray-dark);
    --header-logo-height: 65px;
    --header-logo-width: 222px;
    /* Navigation */
    --nav-item-color: var(--color-gray-dark);
    --nav-item-hover-bg: var(--color-hover-light);
    --nav-item-active-color: var(--color-gray-dark);
    --nav-item-active-border: var(--color-gray-dark);
    /* Button Styles */
    --btn-primary-bg: var(--brand-primary);
    --btn-primary-bg-hover: var(--brand-primary-hover);
    --btn-primary-text: var(--color-white);
    --btn-primary-border: var(--brand-primary);
    --btn-secondary-bg: var(--color-white);
    --btn-secondary-bg-hover: var(--color-hover-light);
    --btn-secondary-text: var(--brand-primary);
    --btn-secondary-border: var(--brand-primary);
    /* Hero Banner */
    --hero-text-color: var(--color-black);
    --hero-min-height-mobile: 300px;
    --hero-min-height-tablet: 350px;
    --hero-min-height-desktop: 371px;
    /* Content Area */
    --content-bg: var(--color-white);
    --content-title-color: var(--color-black);
    --content-text-color: var(--color-gray-dark);
    /* CTA Cards */
    --cta-primary-bg: var(--brand-primary);
    --cta-primary-bg-hover: var(--brand-primary-hover);
    --cta-primary-text: var(--color-white);
    --cta-secondary-bg: var(--color-white);
    --cta-secondary-bg-hover: var(--color-hover-light);
    --cta-secondary-text: var(--brand-primary);
    --cta-secondary-border: var(--brand-primary);
    /* Footer */
    --footer-bg: var(--brand-primary);
    --footer-border-color: var(--brand-primary);
    --footer-border-width: 6px;
    --footer-text-color: var(--color-white);
    --footer-link-hover-bg: rgba(255, 255, 255, 0.1);
    --footer-padding: var(--spacing-xl);
    --footer-gap: var(--spacing-lg);
    /* CAPTCHA Page Specific Variables */
    --header-border: var(--color-gray-light);
    --header-padding-y: var(--spacing-lg);
    --header-padding-x: var(--spacing-xl);
    --header-logo-width-mobile: 157px;
    --header-logo-width-desktop: 222px;
    --header-tagline-color: var(--brand-primary);
    --header-tagline-size-mobile: var(--font-size-lg);
    --header-tagline-size-tablet: var(--font-size-2xl);
    --captcha-content-bg: var(--color-white);
    --captcha-content-radius: var(--radius-lg);
    --captcha-content-padding-mobile: var(--spacing-xl);
    --captcha-content-padding-tablet: var(--spacing-2xl);
    --captcha-content-gap: 32px;
    --captcha-title-color: var(--color-text-primary);
    --captcha-title-size-mobile: var(--font-size-xl);
    --captcha-title-size-tablet: var(--font-size-2xl);
    --captcha-title-border: var(--brand-primary);
    --captcha-title-border-width: 2px;
    --captcha-title-padding-bottom: var(--spacing-xl);
    --captcha-card-bg: var(--color-white);
    --captcha-card-outer-bg: var(--brand-secondary);
    --captcha-card-border: var(--color-border-alt);
    --captcha-card-radius: var(--radius-lg);
    --captcha-card-padding-mobile: 32px;
    --captcha-card-padding-tablet: var(--spacing-2xl);
    --captcha-card-max-width: 460px;
    --captcha-card-gap: var(--spacing-2xl);
    --captcha-card-title-size-mobile: var(--font-size-lg);
    --captcha-card-title-size-tablet: var(--font-size-xl);
    --captcha-card-description-size-mobile: var(--font-size-sm);
    --captcha-card-description-size-tablet: var(--font-size-base);
    --captcha-image-border: var(--color-border-alt);
    --captcha-image-border-width: 1.5px;
    --captcha-image-radius: var(--radius-lg);
    --captcha-option-size: 36px;
    --captcha-option-radius: var(--radius-md);
    --captcha-option-border: var(--color-border-alt);
    --captcha-option-border-hover: var(--brand-primary);
    --captcha-option-gap: var(--spacing-sm);

    --input-bg: var(--color-white);
    --input-border: var(--color-gray-light);
    --input-border-focus: var(--brand-primary);
    --input-text-color: var(--color-text-input);
    --input-placeholder-color: var(--color-text-muted);
    --input-padding-y: var(--spacing-xs1) /* 6px */;
    --input-padding-x: var(--spacing-md);
    --input-radius: var(--radius-sm);

    --btn-bg: var(--brand-primary);
    --btn-bg-hover: var(--brand-primary-hover);
    --btn-text-color: var(--color-white);
    --btn-padding-y: var(--spacing-sm);
    --btn-padding-x: var(--spacing-xl);
    --btn-radius: var(--radius-md);
    --btn-focus-outline: var(--color-text-primary);

    --help-text-color: var(--color-text-muted);
    --help-text-size: var(--font-size-xs);
    --help-text-max-width: var(--captcha-card-max-width);

    /* Invitation Page Specific Variables */
    --invitation-header-tagline-size-mobile: 14px;
    --invitation-header-tagline-size-tablet: 16px;
    --invitation-header-tagline-color: var(--color-gray-dark) /* #5C5C5C */;
    --invitation-content-bg: var(--color-white);
    --invitation-content-radius:  var(--radius-std) /* 12px */;
    --invitation-content-padding-mobile: var(--spacing-xl);
    --invitation-content-padding-tablet: var(--spacing-2xl);
    --invitation-content-gap: var(--spacing-xl);
    --invitation-title-border-width: 1px;
    --invitation-title-border: var(--color-gray-light);
    --invitation-title-padding-bottom: var(--spacing-lg);
    --invitation-title-size-mobile: var(--font-size-xl);
    --invitation-title-size-tablet: var(--font-size-2xl);
    --invitation-title-color: var(--color-text-primary);
    --invitation-card-max-width: 460px;
    --invitation-card-outer-bg: var(--color-hover-light);
    --invitation-card-bg: var(--color-white);
    --invitation-card-border: var(--color-gray-light);
    --invitation-card-radius: var(--radius-md);
    --invitation-card-padding-mobile: var(--spacing-xl);
    --invitation-card-padding-tablet: 32px;
    --invitation-card-gap: var(--spacing-xl);
    --invitation-card-title-size-mobile: var(--font-size-lg);
    --invitation-card-title-size-tablet: var(--font-size-xl);
    --invitation-card-description-size-mobile: var(--font-size-sm);
    --invitation-card-description-size-tablet: var(--font-size-base);
    --invitation-input-padding-y: var(--spacing-md);
    --invitation-input-padding-x: var(--spacing-lg);
    --invitation-input-bg: var(--color-white);
    --invitation-input-text-color: var(--color-text-primary);
    --invitation-input-border: var(--color-border);
    --invitation-input-border-focus: var(--brand-primary);
    --invitation-input-radius: var(--radius-sm);
    --invitation-input-placeholder: #6b7280;
    --invitation-btn-bg: var(--brand-primary);
    --invitation-btn-bg-hover: var(--brand-primary-hover);
    --invitation-btn-text-color: var(--color-white);
    --invitation-btn-padding-y: var(--spacing-md);
    --invitation-btn-padding-x: var(--spacing-xl);
    --invitation-btn-radius: var(--radius-sm);
    --invitation-btn-focus-outline: var(--brand-primary);
    --invitation-help-text-max-width: 600px;
    --invitation-help-text-size: var(--font-size-sm);
    --invitation-help-text-color: #4b5563;
    --invitation-help-text-strong-color: #374151;
    --invitation-footer-bg: var(--color-white);
    --invitation-footer-border-width: 1px;
    --invitation-footer-border-color: var(--color-gray-light);
    --invitation-footer-padding: var(--spacing-xl);
    --invitation-footer-gap: var(--spacing-lg);
    --invitation-footer-text-color: var(--color-gray-dark);
    --invitation-footer-link-hover-bg: var(--color-hover-light);
    /* --invitation-footer-divider-color: #9ca3af; */
    --invitation-footer-divider-height: 32px;
    --invitation-more-divider-color: var(--color-border-alt);
    --invitation-more-btn-hover-bg: var(--color-hover-light);
    --invitation-chevron-size: 16px;
    --invitation-option-btn-size: 56px;
    --invitation-option-icon-size: 24px;
    /* Status Message Colors */
    --invitation-message-info-bg: #eff6ff;
    --invitation-message-info-border: #3b82f6;
    --invitation-message-info-text: #1e40af;
    --invitation-message-error-bg: #fee2e2;
    --invitation-message-error-border: #ef4444;
    --invitation-message-error-text: #991b1b;
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    /* Background Colors */
    --catalog-bg-page: #f7f7f7;
    --catalog-bg-white: #ffffff;
    --catalog-bg-gray-light: #f7f7f7;
    --catalog-bg-hover: rgba(0, 0, 0, 0.02);
    --catalog-bg-hover-secondary: rgba(0, 0, 0, 0.04);
    --catalog-bg-hover-elevated: rgba(0, 0, 0, 0.05);
    --catalog-bg-focus: rgba(166, 9, 61, 0.05);
    /* Text Colors */
    --catalog-text-primary: #09090b;
    --catalog-text-secondary: #71717a;
    --catalog-text-white: #ffffff;
    --catalog-text-black: #000000;
    /* Border Colors */
    /*
    --catalog-border: #e4e4e7;
    --catalog-border-hover: #982F6A;
    */
    /* Shadow Colors */
    --catalog-shadow-sm: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    --catalog-shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.1);
    --catalog-shadow-focus: 0 0 0 3px rgba(166, 9, 61, 0.1);
    /* Typography */
    --catalog-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --catalog-font-size-xs: var(--font-size-xs);
    --catalog-font-size-sm: 14px;
    --catalog-font-size-base: 16px;
    --catalog-font-size-lg: 18px;
    --catalog-font-weight-normal: 400;
    --catalog-font-weight-semibold: 600;
    --catalog-font-weight-bold: 700;
    --catalog-letter-spacing-sm: -0.3px;
    --catalog-letter-spacing-base: -0.35px;
    --catalog-letter-spacing-md: -0.4px;
    --catalog-letter-spacing-lg: -0.45px;
    --catalog-line-height-base: 1.5;
    /* Spacing */
    --catalog-spacing-xs: 4px;
    --catalog-spacing-sm: 8px;
    --catalog-spacing-md: var(--spacing-md);
    --catalog-spacing-lg: 24px;
    /* Border Radius */
    --catalog-radius-sm: 4px;
    --catalog-radius-md: 8px;
    --catalog-radius-lg: 16px;
    --catalog-radius-full: 9999px;
    /* Dimensions */
    --catalog-logo-width: 222px;
    --catalog-logo-height: 65px;
    --catalog-avatar-size: 20px;
    --catalog-sidebar-width: 189px;
    --catalog-search-max-width: 485px;
    --catalog-select-width: 230px;
    --catalog-icon-size-sm: 16px;
    --catalog-icon-size-md: 20px;
    --catalog-card-height: 300px;
    --catalog-footer-divider-height: 32px;
    /* Transitions */
    --catalog-transition-fast: 0.2s;
    --catalog-transition-ease: ease;
    /* Z-Index */
    --catalog-z-skip-link: 200;
    --catalog-z-header: 100;
    /* Opacity */
    --catalog-opacity-disabled: 0.5;
    --catalog-opacity-footer-hover: 0.1;
    /* Brand Colors */
    /*
    --award-levels-brand-primary: #982F6A;
    --award-levels-brand-gray: #5C5C5C;
    */
    /* Background Colors */
    --award-levels-bg-page: #f7f7f7;
    --award-levels-bg-white: #ffffff;
    --award-levels-bg-card: #ffffff;
    --award-levels-bg-hover: rgba(0, 0, 0, 0.02);
    /* Text Colors */
    --award-levels-text-primary: #000000;
    --award-levels-text-secondary: #5c5c5c;
    --award-levels-text-white: #ffffff;
    /* Shadow Colors */
    --award-levels-shadow-sm: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* Typography */
    --award-levels-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --award-levels-font-size-heading: 40px;
    --award-levels-font-size-card-title: 20px;
    --award-levels-font-size-link: 16px;
    --award-levels-font-size-nav: 14px;
    --award-levels-font-weight-extrabold: 800;
    --award-levels-font-weight-bold: 700;
    --award-levels-font-weight-semibold: 600;
    --award-levels-letter-spacing-heading: -1px;
    --award-levels-line-height-heading: 1.5;
    --award-levels-line-height-link: 20px;
    /* Spacing */
    --award-levels-spacing-xs: 4px;
    --award-levels-spacing-sm: 8px;
    --award-levels-spacing-md: var(--spacing-md);
    --award-levels-spacing-lg: 24px;
    --award-levels-spacing-xl: 48px;
    /* Border Radius */
    --award-levels-radius-sm: 4px;
    --award-levels-radius-md: 8px;
    --award-levels-radius-lg: 16px;
    --award-levels-radius-full: 9999px;
    /* Dimensions */
    --award-levels-logo-width: 222px;
    --award-levels-logo-height: 65px;
    --award-levels-avatar-size: 20px;
    --award-levels-card-width: 260px;
    --award-levels-card-height: 122px;
    --award-levels-card-wide-height: 152px;
    --award-levels-arrow-size: 20px;
    --award-levels-max-width: 1440px;
    /* Transitions */
    --award-levels-transition-fast: 0.2s;
    /* Z-Index */
    --award-levels-z-skip-link: 200;
    --award-levels-z-header: 100;
    /*
    --product-page-primary: #982F6A;
    */
    --product-page-gray: #5C5C5C;
    --product-page-black: #09090b;
    --product-page-white: #ffffff;
    --product-page-background: #fafafa;
    --product-page-border: #e4e4e7;
    --product-page-text-secondary: #71717a;
    /* Spacing */
    --product-page-spacing-2: 8px;
    --product-page-spacing-3: var(--spacing-md);
    --product-page-spacing-6: 24px;
    --product-page-spacing-12: 48px;
    /* Border Radius */
    --product-page-radius-lg: 8px;
    --product-page-radius-xl: var(--radius-std);
    --product-page-radius-2xl: 16px;
    /* Z-Index */
    --product-page-z-header: 1000;
    --product-page-z-footer: 100;
    /*
    --redeem-award-primary: #982F6A;
    --redeem-award-primary-hover:  #6F457D;
    --redeem-award-secondary: #5c5c5c;
    --redeem-award-secondary-hover: #4a4a4a;
    */
    --redeem-award-background: #fafafa;
    --redeem-award-white: #ffffff;
    --redeem-award-black: #000000;
    --redeem-award-border: #e4e4e7;
    --redeem-award-gray-light: #d6d6d6;
    --redeem-award-text-primary: #09090b;
    --redeem-award-gold: #F4C430;
    --redeem-award-gold-light: rgba(244, 196, 48, 0.3);
    /*
    --faqs-primary: #982F6A;
    --faqs-secondary: #5c5c5c;
    */
    --faqs-white: #ffffff;
    --faqs-black: #000000;
    --faqs-gray-light: #e4e4e7;
    --faqs-gray-text: #71717a;
    --faqs-gray-bg: #f7f7f7;
    --faqs-border: #3f3f46;
    --faqs-radius-lg: 16px;
    --faqs-radius-md: 8px;
    --faqs-radius-full: 9999px;
    --faqs-spacing-xs: 4px;
    --faqs-spacing-sm: 8px;
    --faqs-spacing-md: var(--spacing-md);
    --faqs-spacing-lg: 16px;
    --faqs-spacing-xl: 24px;
    --faqs-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /*
    --edit-account-primary: #982F6A;
    --edit-account-secondary: #5c5c5c;
    */
    --edit-account-white: #ffffff;
    --edit-account-black: #000000;
    --edit-account-gray-light: #d6d6d6;
    --edit-account-gray-bg: #f7f7f7;
    --edit-account-border: #e4e4e7;
    --edit-account-radius-lg: 16px;
    --edit-account-radius-md: 8px;
    --edit-account-radius-full: 9999px;
    --edit-account-spacing-xs: 4px;
    --edit-account-spacing-sm: 8px;
    --edit-account-spacing-md: var(--spacing-md);
    --edit-account-spacing-lg: 16px;
    --edit-account-spacing-xl: 24px;
    --edit-account-spacing-2xl: 48px;
    --edit-account-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;      
    /*
    --order-history-primary: #982F6A;
    --order-history-secondary: #5c5c5c;
    */
    --order-history-white: #ffffff;
    --order-history-black: #000000;
    --order-history-content-primary: #09090b;
    --order-history-gray-light: #e4e4e7;
    --order-history-gray-text: #71717a;
    --order-history-gray-bg: #f7f7f7;
    --order-history-border: #e4e4e7;
    --order-history-radius-lg: 16px;
    --order-history-radius-md: var(--radius-std);
    --order-history-radius-sm: 8px;
    --order-history-radius-full: 9999px;
    --order-history-spacing-xs: 4px;
    --order-history-spacing-sm: 8px;
    --order-history-spacing-md: var(--spacing-md);
    --order-history-spacing-lg: 16px;
    --order-history-spacing-xl: 24px;
    --order-history-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --order-history-font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --color-text-red: #E00000;
    /* Max Width */
    --max-width: 1440px /* 1280px */;      
}

/* ============================================
   ALTERNATIVE THEME EXAMPLES
============================================
 Uncomment a theme below to apply it, or create your own
============================================ */

/* Blue Corporate Theme Example */
/*
:root {
  --brand-primary: #0056b3;
  --brand-primary-hover: #004494;
  --brand-secondary: #343a40;
  --font-family-primary: 'Roboto', sans-serif;
  --radius-md: 4px;
  --radius-lg: 8px;
}
*/
/* Green Healthcare Theme Example */
/*
:root {
  --brand-primary: #28a745;
  --brand-primary-hover: #218838;
  --brand-secondary: #495057;
  --font-family-primary: 'Inter', sans-serif;
}
*/
/* Purple Tech Theme Example */
/*
:root {
  --brand-primary: #6f42c1;
  --brand-primary-hover: #5a32a3;
  --brand-secondary: #495057;
  --radius-md: 12px;
  --radius-lg: 24px;
}
*/
/* Orange Energy Theme Example */
/*
:root {
  --brand-primary: #fd7e14;
  --brand-primary-hover: #e8590c;
  --brand-secondary: #495057;
  --font-family-primary: 'Open Sans', sans-serif;
}
*/

/* ============================================
   END THEMING VARIABLES
============================================ */

/*---------------------------
  CUSTOM CLIENT CSS - UCHEALTH 
  --------------------------*/
#ctl00_AppBody_rptLevel_ctl01_linkCatalog {
    background-color: var(--award-levels-bg-card);
    border: 1px solid var(--award-levels-border);
    border-radius: var(--award-levels-radius-lg);
    padding: var(--award-levels-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--award-levels-spacing-lg);
    height: var(--award-levels-card-height);
    transition: transform var(--award-levels-transition-fast), box-shadow var(--award-levels-transition-fast);
    cursor: pointer;
    text-decoration: none;
    grid-column: span 2;
    height: var(--award-levels-card-wide-height);
    order:1;
}
#ctl00_AppBody_rptLevel_ctl02_linkCatalog {
    background-color: var(--award-levels-bg-card);
    border: 1px solid var(--award-levels-border);
    border-radius: var(--award-levels-radius-lg);
    padding: var(--award-levels-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--award-levels-spacing-lg);
    height: var(--award-levels-card-height);
    transition: transform var(--award-levels-transition-fast), box-shadow var(--award-levels-transition-fast);
    cursor: pointer;
    text-decoration: none;
    grid-column: span 2;
    height: var(--award-levels-card-wide-height);
    order:2;
}
/* END UCHEALTH CUSTOM CSS AWARD LEVELS CSS */

/* Accessibility: Focus outlines for interactive elements */
.nav-item:focus, .award-levels-card:focus, .logout-button:focus, .mobile-menu-toggle:focus {
    outline: none /* 2px solid var(--color-focus) */ /* #982F6A */;
    outline-offset: 2px;
}
/* Accessibility: Skip link visibility */
.award-levels-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-background);
    color: var(--brand-primary);
    padding: 8px 16px;
    z-index: 1000;
    text-decoration: underline;
}
.award-levels-skip-link:focus {
    left: 0;
}

/* Hide sub-menu-wrap if it has no submenu items */
.sub-menu-wrap:not(:has(li)) {
  display: none !important;
}
/* Fallback for browsers that don't support :has() */
.sub-menu-wrap.empty-submenu {
  display: none !important;
}
#footer {
    background-color: var(--brand-secondary);
    border-top: solid 6px var(--brand-primary);    
}
/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-primary);
    color: var(--color-black);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-background);
}

/* Service App Container */
.service-app {
    height:auto;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-lg);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    z-index: 1000;
    border-radius: 0 0 var(--radius-md) 0;
}

    .skip-link:focus {
        top: 0;
    }

/* Header - Mobile First */
.header {
    background-color: var(--header-bg);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color var(--transition-normal);
}

    .header.scrolled {
        background-color: var(--header-bg-scrolled);
        backdrop-filter: blur(10px);
        opacity: .85;
    }

.header-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    gap: var(--spacing-sm);
    position: relative;
}

.logo-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    position: static;
}

.logo {
    min-width: 200px;
    width: 200px;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 102;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

    .mobile-menu-toggle:hover {
        background-color: var(--color-hover-light);
    }

    /*.mobile-menu-toggle:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }*/

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: var(--color-gray-dark);
    transition: all var(--transition-fast);
    border-radius: 2px;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-white);
    padding: 80px var(--spacing-xl) var(--spacing-xl);
    z-index: 100;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}

    .main-nav.open {
        display: flex;
    }

.nav-item {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--nav-item-color);
    text-decoration: none;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: all var(--transition-fast);
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

    .nav-item:last-child {
        border-bottom: none;
    }

    .nav-item:hover {
        /*background-color: var(--nav-item-hover-bg);*/
        border-bottom: solid 2px var(--nav-item-active-border);
        border-radius: 0px;
    }

    .nav-item:focus-visible {
       /* outline: 2px solid var(--color-focus);
        outline-offset: 2px;*/
        border-radius: var(--radius-md);
    }

    .nav-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: var(--spacing-lg);
        right: var(--spacing-lg);
        height: 2px;
        background-color: var(--nav-item-active-border);
        border-radius: var(--radius-full);
    }

.utility-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    white-space: nowrap;
    flex-shrink: 0;
    /*z-index: 102;*/
}

    .utility-nav .nav-item {
        padding: var(--spacing-sm) 0;
    }

.user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: none;
}

/* Main Content */
.main-content {
    flex: 1;
    /*padding: var(--spacing-2xl);*/
    max-width: 1440px;
    margin: 24px auto 24px auto;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
	background-color:var(--color-background-light-gray);
}

/* Hero Banner - Mobile First */
.hero-banner {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
    min-height: var(--hero-min-height-mobile);
    display: flex;
    align-items: center;
    /*justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);*/
    box-shadow: var(--shadow-sm);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-nav-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 2;
    transition: background-color var(--transition-fast);
    align-items: center;
    justify-content: center;

}

    .hero-nav-btn:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }

    /*.hero-nav-btn:focus-visible {
        outline: 2px solid var(--color-white);
        outline-offset: 2px;
    }*/

    .hero-nav-btn.prev {
        left: 10px;
    }

        .hero-nav-btn.prev img {
            transform: rotate(-90deg);
        }

    .hero-nav-btn.next {
        right: 10px;
    }

        .hero-nav-btn.next img {
            transform: rotate(90deg);
        }

    .hero-nav-btn img {
        width: 15px;
        height: 15px;
    }

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

.hero-text {
    color: var(--hero-text-color);
    text-align: left;
    margin-left: 20px;
}

.hero-heading {
    margin-bottom: var(--spacing-lg);
}

.eyebrow {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.hero-heading h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

    .hero-subtitle em {
        font-weight: var(--font-weight-black);
        font-style: italic;
    }

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-left: 20px;
}

.btn {
    padding: var(--spacing-xs1) /* 6px */ var(--spacing-md) /* 10px */;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid var(--brand-primary);
    white-space: nowrap;
    line-height: 20px;
}

.btn:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
}

.btn-primary:hover {
    background-color: var(--btn-primary-bg-hover);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-bg-hover);
}




/*-----------------------------------

    Account Help Section

-------------------------------------*/

.account-help {
    margin-top: var(--spacing-xl);
    font-size: 14px;
    color: var(--color-black);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-gray)
}




/* Body Section - Mobile First */
.body-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.sidebar {
    order: -1;
}

.content-area {
    order: 0;
}

/* Content Area */
.content-area {
    background-color: var(--content-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.content-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--content-title-color);
    margin-bottom: var(--spacing-xl);
    line-height: var(--line-height-normal);
    letter-spacing: -1px;
    text-align: left;
}

.content-body {
    font-size: var(--font-size-base);
    color: var(--content-text-color);
    line-height: var(--line-height-normal);
    letter-spacing: -0.4px;
    text-align: left;
}

    .content-body p {
        margin-bottom: var(--spacing-xl);
    }

        .content-body p:last-of-type {
            margin-bottom: var(--spacing-md);
        }

.signature-section {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.signature {
    width: 189px;
    height: auto;
}

.ceo-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ceo-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ceo-text {
    flex: 1;
}

    .ceo-text p {
        margin: 0;
    }

.ceo-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin-bottom: 0;
    line-height: var(--line-height-tight);
}

.ceo-title {
    font-size: var(--font-size-xs);
    color: var(--color-gray-dark);
    line-height: var(--line-height-snug);
    margin-bottom: 0;
    margin-top: 2px;
}

/* Sidebar - Mobile First */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    border-radius: 16px;
}

.cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-lg);
    width: 100%;
    text-align: left;
    font-family: var(--font-family-primary);
}

    .cta-card:focus-visible {
        outline: 3px solid var(--color-black);
        outline-offset: 2px;
    }

    .cta-card img {
        width: 20px;
        height: 20px;
    }

    .cta-card.primary {
        background-color: var(--cta-primary-bg);
        color: var(--cta-primary-text);
        border: var(--brand-primary);        
    }

    .cta-card.primary:hover {
        background-color: var(--cta-primary-bg-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    .cta-card.secondary {
        background-color: var(--cta-secondary-bg);
        color: var(--cta-secondary-text);
        border: 2px solid var(--cta-secondary-border);
    }

    .cta-card.secondary img {
        filter: brightness(0) saturate(100%) invert(17%) sepia(85%) saturate(4920%) hue-rotate(333deg) brightness(86%) contrast(98%);
    }

    .cta-card.secondary:hover {
        background-color: var(--cta-secondary-bg-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

/* Footer */
.footer {
    background-color: var(--footer-bg);
    border-top: var(--footer-border-width) solid var(--footer-border-color);
    margin-top: auto;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--footer-text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.footer-left,
.footer-right {
    text-align: center;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: var(--footer-text-color);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

    .footer-link:hover {
        background-color: var(--footer-link-hover-bg);
    }

    .footer-link:focus-visible {
        outline: 2px solid var(--footer-text-color);
        outline-offset: 2px;
    }

.divider {
    width: 1px;
    height: 32px;
    background-color: var(--color-border);
}

/* Tablet Styles - 768px and up */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-xl);
    }

    .hero-banner {
        min-height: var(--hero-min-height-tablet);
        padding: var(--spacing-2xl);
    }

    .hero-nav-btn {
        display: flex;
    }

    .hero-heading h1 {
        font-size: var(--font-size-4xl) /* 40px */;
    }

    .hero-subtitle {
        font-size: var(--font-size-2xl) /* 24px */;
    }

    .hero-buttons {
        flex-direction: row;
        gap: var(--spacing-lg);
    }

    .content-title {
        font-size: var(--font-size-3xl) /* 32px */;
    }

    .body-section {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--spacing-xl);
    }

    .sidebar {
        order: 2;
        padding-top: 48px;
    }

    .content-area {
        order: 1;
    }

    .cta-card {
        font-size: var(--font-size-xl) /* 20px */;
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        max-width: 1440px;
        margin: 0 auto;
    }

    .footer-left,
    .footer-right {
        text-align: left;
    }
}

/* Desktop Styles - 1024px and up */
@media (min-width: 1024px) {
    .header-content {
        padding: var(--spacing-md) var(--spacing-xl);
    }

    .logo-nav {
        gap: var(--spacing-xl);
    }

    .logo {
        min-width: 222px;
        width: 222px;
        position: static;
        transform: none;
    }

    /* Hide mobile menu toggle on desktop */
    .mobile-menu-toggle {
        display: none;
    }

    /* Show navigation inline on desktop */
    .main-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        position: static;
        width: auto;
        height: auto;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        justify-content: flex-start;
        overflow-y: visible;
    }

    .nav-item {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
        border-bottom: none;
    }

        .nav-item.active::after {
            bottom: -10px;
            left: 0;
            right: 0;
        }

    .utility-nav {
        justify-content: flex-end;
    }

        .utility-nav .nav-item {
            padding: var(--spacing-sm);
        }

    .user-avatar {
        /*display: block;*/
        display: inline-block;
    }

    .logo {
        width: 222px;
    }

    .hero-banner {
        min-height: var(--hero-min-height-desktop);
        margin-top:40px; 
        box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); 
        box-shadow: var(--shadow-xl);
    }

    .hero-heading h1 {
        font-size: var(--font-size-5xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-3xl);
    }

    .content-title {
        font-size: var(--font-size-4xl);
    }

    .body-section {
        grid-template-columns: 1fr 360px;
		max-width:1440px;
		margin:0 auto;
		/*padding-right: var(--spacing-lg);
		padding-left: var(--spacing-lg);*/
		background-color:var(--color-background-light-gray);
    }

	#cmsResponsiveContainer {
		background-color: var(--color-background-light-gray) !important;
		/*margin-bottom: var(--spacing-2xl);*/
        padding-bottom: var(--spacing-2xl);
	}
	
    .content-area {
        padding: var(--spacing-2xl);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--faqs-gray-light);
    }
    .sidebar {
        order: 2;
        padding: 50px 16px;
        box-shadow: var(--shadow-xl);      
		border: 1px solid var(--faqs-gray-light);
		background-color:var(--color-background);
    }
}
@media (max-width:1023px){
    .sidebar{
        padding-top:24px;
    }
}

/* Large Desktop - 1440px and up */
@media (min-width: 1440px) {
    #main-content {
        /*padding: var(--spacing-2xl);*/
        margin: 0px auto 0px auto;
        max-width: 1440px;
        /*padding-right: var(--spacing-2xl);
        padding-left: var(--spacing-2xl);*/
        padding-bottom: var(--spacing-sm);
        background-color: var(--color-background-light-gray);        
    }

    .hero-content {
        max-width: 800px;
    }
}

/* Print Styles */
@media print {
    .header,
    .hero-nav-btn,
    .hero-buttons,
    .sidebar,
    .footer {
        display: none;
    }

    .body-section {
        display: block;
    }

    .content-area {
        box-shadow: none;
    }
}

/* ============================================
   CAPTCHA PAGE STYLES
   ============================================ */

/* CAPTCHA Page Container */
.captcha-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray-lighter);
    font-family: var(--font-family-primary);
}

/* CAPTCHA Header */
.captcha-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    padding: var(--header-padding-y) var(--header-padding-x);
}

.captcha-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

.captcha-logo {
    width: var(--header-logo-width-mobile);
    height: auto;
}

.captcha-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.captcha-tagline {
    display: flex;
    gap: var(--spacing-xs);
    font-size: var(--header-tagline-size-mobile);
    color: var(--header-tagline-color);
    white-space: nowrap;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.tagline-text {
    font-weight: var(--font-weight-normal);
}

.tagline-emphasis {
    font-weight: var(--font-weight-black);
    font-style: italic;
}

/* Status Message */
/*.captcha-message {
    width: 100%;
    padding: var(--spacing-md) 16px;
    background-color: #eff6ff;
    border: 1px solid #3b82f6;
    border-radius: var(--radius-sm);
    color: #1e40af;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
}*/
.captcha-message {
    width: 100%;
    padding: var(--spacing-md) 16px;
    /*background-color: #eff6ff;*/
    background-color: rgb(from var(--clear-button-transparent) r g b / 0.1);	
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

/* CAPTCHA Main Content */
.captcha-main {
    flex: 1;
    /*padding-top: var(--spacing-md);
    padding-right: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    padding-right: var(--spacing-xl);*/
    margin-top: var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border: 1px solid var(--faqs-gray-light);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);    
}

.captcha-container {
    width: 100%;
    max-width: 1440px;
    border: solid 2px var(--color-background-light-gray);
    border-radius: var(--radius-xl);    
}

.captcha-content {
    background-color: var(--captcha-content-bg);
    border-radius: var(--captcha-content-radius);
    padding: var(--captcha-content-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--captcha-content-gap);
    align-items: center;
}

/* CAPTCHA Title Section */
.captcha-title-section {
    width: 100%;
    border-bottom: var(--captcha-title-border-width) solid var(--captcha-title-border);
    padding-bottom: var(--captcha-title-padding-bottom);
}

.captcha-title {
    font-size: var(--captcha-title-size-mobile);
    font-weight: var(--font-weight-bold);
    color: var(--captcha-title-color);
    margin: 0;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
}

/* CAPTCHA Card */
.captcha-card {
    width: 100%;
    max-width: var(--captcha-card-max-width);
    background-color: var(--captcha-card-outer-bg);
    border: 1px solid var(--captcha-card-border);
    border-radius: var(--captcha-card-radius);
    overflow: hidden;
}

.captcha-card-inner {
    background-color: var(--captcha-card-bg);
    padding: var(--captcha-card-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--captcha-card-gap);
}

/* CAPTCHA Card Header */
.captcha-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.captcha-card-title-wrapper {
    border-bottom: 1px solid var(--captcha-card-border);
    padding-bottom: var(--spacing-md);
}

.captcha-card-title {
    font-size: var(--captcha-card-title-size-mobile);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-normal);
}

.captcha-description {
    font-size: var(--captcha-card-description-size-mobile);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.25;
}

/* CAPTCHA Section */
.captcha-section {
    display: flex;
    flex-direction: column;
    gap: var(--captcha-card-gap);
}

/* CAPTCHA Images */
.captcha-images {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.captcha-image-main {
    flex: 1;
    border: var(--captcha-image-border-width) solid var(--captcha-image-border);
    border-radius: var(--captcha-image-radius);
    overflow: hidden;
    aspect-ratio: 316/80;
    position: relative;
}

    .captcha-image-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.captcha-image-options {
    display: flex;
    flex-direction: column;
    gap: var(--captcha-option-gap);
}

.captcha-option-btn {
    width: var(--captcha-option-size);
    height: var(--captcha-option-size);
    border: var(--captcha-image-border-width) solid var(--captcha-option-border);
    border-radius: var(--captcha-option-radius);
    overflow: hidden;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.captcha-option-btn:hover {
    border-color: var(--captcha-option-border-hover);
    transform: scale(1.05);
}

/*.captcha-option-btn:focus-visible {
    outline: 2px solid var(--captcha-option-border-hover);
    outline-offset: 2px;
}*/

.captcha-option-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CAPTCHA Form */
.captcha-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.captcha-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.captcha-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.captcha-input {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--input-text-color);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    line-height: 24px;
    transition: border-color var(--transition-fast);
}

.captcha-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.captcha-input::placeholder {
    color: var(--color-gray-dark);
}

.captcha-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.captcha-hint-icon {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    flex-shrink: 0;
}

.captcha-hint-text {
    font-size: var(--help-text-size);
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-dark);
    line-height: auto;
}

.captcha-verify-btn {
    width: 100%;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    background-color: var(--btn-bg);
    color: var(--btn-text-color);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    line-height: 20px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.captcha-verify-btn:hover {
    background-color: var(--btn-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

    /*.captcha-verify-btn:focus-visible {
        outline: 2px solid var(--btn-focus-outline);
        outline-offset: 2px;
    }*/

.captcha-verify-btn:active {
    transform: translateY(0);
}

.captcha-verify-btn img {
    width: var(--font-size-xl);
    height: var(--font-size-xl);
}

/* CAPTCHA Help Text */
.captcha-help-text {
    width: 100%;
    max-width: var(--help-text-max-width);
    text-align: center;
}

.captcha-help-text p {
    font-size: var(--help-text-size);
    font-weight: var(--font-weight-medium);
    color: #4b5563;
    line-height: var(--line-height-normal);
    margin: 0;
}

.captcha-help-text strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-dark);
}

.captcha-phone-link {
    color: var(--brand-primary);
    /*text-decoration: underline;*/
    font-weight: var(--font-weight-semibold);

}

.captcha-phone-link:hover {
    color: var(--brand-primary-hover);
    text-decoration:underline;
}

.captcha-phone-link:focus-visible {
    /* outline: 2px solid var(--brand-primary);
    outline-offset: 2px;*/
    border-radius: var(--radius-sm);
}

/* CAPTCHA Footer */
.captcha-footer {
    background-color: var(--footer-bg);
    border-top: var(--footer-border-width) solid var(--footer-border-color);
    padding: var(--footer-padding);
    margin-top: auto;
}

.captcha-footer-content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--footer-gap);
    color: var(--footer-text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.captcha-footer-left,
.captcha-footer-right {
    text-align: center;
}

    .captcha-footer-left p {
        margin: 0;
    }

.captcha-footer-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    justify-content: center;
}

.captcha-footer-link {
    color: var(--footer-text-color);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.captcha-footer-link:hover {
    background-color: var(--footer-link-hover-bg);
}

.captcha-footer-link:focus-visible {
    outline: 2px solid var(--footer-text-color);
    outline-offset: 2px;
}

.captcha-divider {
    width: 1px;
    height: 32px;
    background-color: #9ca3af;
}

/* CAPTCHA Tablet Styles - 768px and up */
@media (min-width: 768px) {
    .captcha-tagline {
        font-size: var(--header-tagline-size-tablet);
    }

    .captcha-content {
        padding: var(--captcha-content-padding-tablet);
    }

    .captcha-title {
        font-size: var(--captcha-title-size-tablet);
        text-align: left;
    }

    .captcha-card-inner {
        padding: var(--captcha-card-padding-tablet);
    }

    .captcha-card-title {
        font-size: var(--captcha-card-title-size-tablet);
    }

    .captcha-description {
        font-size: var(--captcha-card-description-size-tablet);
    }

    .captcha-footer-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .captcha-footer-left,
    .captcha-footer-right {
        text-align: left;
    }
}

/* CAPTCHA Desktop Styles - 1024px and up */
@media (min-width: 1024px) {
    .captcha-logo {
        width: var(--header-logo-width-desktop);
    }
}

/* CAPTCHA Print Styles */
@media print {
    .captcha-header,
    .captcha-footer {
        display: none;
    }

    .captcha-page {
        background-color: white;
    }

    .captcha-content {
        box-shadow: none;
    }
}

/* ============================================
   INVITATION PAGE STYLES
   ============================================ */

/* Invitation Page Container */
.invitation-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray-lighter);
    font-family: var(--font-family-primary);
}

/* Invitation Header */
.invitation-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    padding: var(--header-padding-y) var(--header-padding-x);
}

.invitation-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

.invitation-logo {
    width: var(--header-logo-width-mobile);
    height: auto;
}

.invitation-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.invitation-tagline {
    display: flex;
    gap: var(--spacing-xs);
    font-size: var(--invitation-header-tagline-size-mobile);
    color: var(--invitation-header-tagline-color);
    white-space: nowrap;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* Status Message */
.invitation-message {
    width: 100%;
    padding: var(--spacing-md) 16px;
    background-color: var(--invitation-message-info-bg);
    border: 1px solid var(--invitation-message-info-border);
    border-radius: var(--radius-sm);
    color: var(--invitation-message-info-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

/* Invitation Main Content */
.invitation-main {
    flex: 1;
    padding: var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.invitation-container {
    width: 100%;
    max-width: 1440px;
}

.invitation-content {
    background-color: var(--invitation-content-bg);
    border-radius: var(--invitation-content-radius);
    padding: var(--invitation-content-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--invitation-content-gap);
    align-items: center;
}

/* Invitation Title Section */
.invitation-title-section {
    width: 100%;
    /*border-bottom: var(--invitation-title-border-width) solid var(--invitation-title-border);*/
    padding-bottom: var(--invitation-title-padding-bottom);
    border-bottom: solid 2px var(--brand-primary);
}

.invitation-title {
    font-size: var(--invitation-title-size-mobile);
    font-weight: var(--font-weight-bold);
    color: var(--invitation-title-color);
    margin: 0;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
}

/* Invitation Card */
/*.invitation-card {
    width: 100%;
    max-width: var(--invitation-card-max-width);
    background-color: var(--invitation-card-outer-bg);
    border: 1px solid var(--invitation-card-border);
    border-radius: var(--invitation-card-radius);
    overflow: hidden;
}*/
.invitation-card {
    width: 100%;
    max-width: var(--invitation-card-max-width);
    background-color: var(--invitation-card-outer-bg);
    border: 1px solid var(--invitation-card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-top: var(--spacing-xl);
}

.invitation-card-inner {
    background-color: var(--invitation-card-bg);
    padding: var(--invitation-card-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--invitation-card-gap);
}

/* Invitation Card Header */
.invitation-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    text-align: left;
}

.invitation-card-title-wrapper {
    border-bottom: 1px solid var(--invitation-card-border);
    padding-bottom: var(--spacing-md);
}

.invitation-card-title {
    font-size: var(--invitation-card-title-size-mobile);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-normal);
}

.invitation-description {
    font-size: var(--invitation-card-description-size-mobile);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.25;
}

/* Invitation Form */
.invitation-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.invitation-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: left;    
}

.invitation-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.invitation-input {
    width: 100%;
    padding: var(--invitation-input-padding-y) var(--invitation-input-padding-x);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--invitation-input-text-color);
    background-color: var(--invitation-input-bg);
    border: 1px solid var(--invitation-input-border);
    border-radius: var(--invitation-input-radius);
    line-height: 24px;
    transition: border-color var(--transition-fast);
}

.invitation-input:focus {
    outline: none;
    border-color: var(--invitation-input-border-focus);
}

.invitation-input::placeholder {
    color: var(--invitation-input-placeholder);
}

.invitation-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.invitation-hint-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--invitation-input-placeholder);
    line-height: 20px;
}

.invitation-signin-btn {
    width: 100%;
    padding: var(--invitation-btn-padding-y) var(--invitation-btn-padding-x);
    background-color: var(--invitation-btn-bg);
    color: var(--invitation-btn-text-color);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    border: none;
    /*border-radius: var(--invitation-btn-radius);*/
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    line-height: 20px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);

}

.invitation-signin-btn:hover {
    background-color: var(--invitation-btn-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/*.invitation-signin-btn:focus-visible {
    outline: 2px solid var(--invitation-btn-focus-outline);
    outline-offset: 2px;
}*/

.invitation-signin-btn:active {
    transform: translateY(0);
}

.invitation-signin-btn img {
    width: var(--font-size-xl);
    height: var(--font-size-xl);
}

/* More Options Section */
.invitation-more-options {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.invitation-more-divider {
    width: 100%;
    height: 1px;
    background-color: var(--invitation-more-divider-color);
}

.invitation-more-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md) 0 0 0;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--color-text-input);
    cursor: pointer;
    line-height: 20px;
    transition: background-color var(--transition-fast);
}

.invitation-more-btn:hover {
    background-color: var(--invitation-more-btn-hover-bg);
}

    /*.invitation-more-btn:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }*/

.invitation-chevron-icon {
    width: var(--invitation-chevron-size);
    height: var(--invitation-chevron-size);
    transition: transform var(--transition-fast);
}

.invitation-more-options-content {
    display: none;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.invitation-more-options-content:not([hidden]) {
    display: flex;
}

.invitation-options-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.invitation-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    color: var(--brand-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.invitation-option-btn:hover {
    opacity: 0.8;
}

    /*.invitation-option-btn:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }*/

.invitation-option-divider {
    width: 1px;
    height: 24px;
    background-color: var(--invitation-more-divider-color);
}

/* Invitation Help Text */
.invitation-help-text {
    width: 100%;
    max-width: var(--invitation-help-text-max-width);
    text-align: center;
}

.invitation-help-text p {
    font-size: var(--invitation-help-text-size);
    font-weight: var(--font-weight-medium);
    color: var(--invitation-help-text-color);
    line-height: var(--line-height-normal);
    margin: 0;
}

.invitation-help-text strong {
    font-weight: var(--font-weight-bold);
    color: var(--invitation-help-text-strong-color);
}

.invitation-phone-link {
    color: var(--brand-primary);
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
}

.invitation-phone-link:hover {
    color: var(--brand-primary-hover);
}

.invitation-phone-link:focus-visible {
    /* outline: 2px solid var(--brand-primary);
    outline-offset: 2px;*/
    border-radius: var(--radius-sm);
}

/* Invitation Footer */
.invitation-footer {
    background-color: var(--footer-bg);
    border-top: var(--footer-border-width) solid var(--footer-border-color);
    padding: var(--footer-padding);
    margin-top: auto;
}

.invitation-footer-content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--footer-gap);
    color: var(--footer-text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.invitation-footer-left,
.invitation-footer-right {
    text-align: center;
}

    .invitation-footer-left p {
        margin: 0;
    }

.invitation-footer-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    justify-content: center;
}

.invitation-footer-link {
    color: var(--footer-text-color);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.invitation-footer-link:hover {
    background-color: var(--footer-link-hover-bg);
}

.invitation-footer-link:focus-visible {
    outline: 2px solid var(--footer-text-color);
    outline-offset: 2px;
}

.invitation-divider {
    width: 1px;
    height: var(--invitation-footer-divider-height);
    background-color: var(--invitation-footer-divider-color);
}

/* Invitation Tablet Styles - 768px and up */
@media (min-width: 768px) {
    .invitation-tagline {
        font-size: var(--header-tagline-size-tablet);
    }

    .invitation-content {
        padding: var(--invitation-content-padding-tablet);
    }

    .invitation-title {
        font-size: var(--invitation-title-size-tablet);
        text-align: left;
    }

    .invitation-card-inner {
        padding: var(--captcha-card-padding-tablet);
    }

    .invitation-card-title {
        font-size: var(--captcha-card-title-size-tablet);
    }

    .invitation-description {
        font-size: var(--captcha-card-description-size-tablet);
    }

    .invitation-footer-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .invitation-footer-left,
    .invitation-footer-right {
        text-align: left;
    }
}

/* Invitation Desktop Styles - 1024px and up */
@media (min-width: 1024px) {
    .invitation-logo {
        width: var(--header-logo-width-desktop);
    }    
}

/* Invitation Print Styles */
@media print {
    .invitation-header,
    .invitation-footer {
        display: none;
    }

    .invitation-page {
        background-color: white;
    }

    .invitation-content {
        box-shadow: none;
    }
}

/* ============================================
   UNPW PAGE STYLES
   Username & Password Login Page
   ============================================ */

/* UNPW Page Container */
.unpw-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* UNPW Header */
.unpw-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    padding: var(--header-padding-y) var(--header-padding-x);
}

.unpw-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

.unpw-logo {
    width: var(--header-logo-width-mobile);
    height: auto;
}

.unpw-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.unpw-tagline {
    display: flex;
    gap: var(--spacing-xs);
    font-size: var(--header-tagline-size-mobile);
    color: var(--header-tagline-color);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
}

.unpw-tagline-emphasis {
    font-weight: var(--font-weight-black);
    font-style: italic;
}

/* Status Message */
.unpw-message {
    width: 100%;
    padding: var(--spacing-md) 16px;
    background-color: #eff6ff;
    border: 1px solid #3b82f6;
    border-radius: var(--radius-sm);
    color: #1e40af;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.unpw-message.error {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

/* UNPW Main Content */
.unpw-main {
    flex: 1;
    padding: var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.unpw-container {
    width: 100%;
    max-width: 1440px;
}

.unpw-content {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

/* UNPW Title Section */
.unpw-title-section {
    width: 100%;
    border-bottom: 2px solid var(--brand-primary) /* #982F6A */;
    padding-bottom: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.unpw-title {
    font-size: var(--font-size-2xl) /* 24px */;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.5;
    letter-spacing: -0.6px;
    flex: 1;
}

/* UNPW Card */
.unpw-card {
    width: 100%;
    max-width: 460px;
    background-color: #5c5c5c;
    border: 1px solid #d6d6d6;
    border-radius: 16px;
    overflow: hidden;
}

.unpw-card-inner {
    background-color: #ffffff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* UNPW Card Header */
.unpw-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.unpw-card-title-wrapper {
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: var(--spacing-md);
    display: flex;
    gap: 10px;
    align-items: center;
}

.unpw-card-title {
    font-size: var(--font-size-xl) /* 20px */;
    font-weight: 600;
    color: #000000;
    margin: 0;
    line-height: 1.5;
}

/* UNPW Form */
.unpw-form {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.unpw-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}


.unpw-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.unpw-input {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--input-text-color);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    line-height: 24px;
    transition: border-color var(--transition-fast);
}

.unpw-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.unpw-input::placeholder {
    color: var(--input-text-color);
}

/* Password Field Wrapper */
.unpw-password-wrapper {
    position: relative;
    width: 100%;
}

.unpw-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--input-text-color);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.unpw-password-toggle:hover {
    opacity: 1;
}

.unpw-password-toggle:focus-visible {
   /* outline: 2px solid var(--brand-primary);
    outline-offset: 2px;*/
    border-radius: var(--radius-sm);
    opacity: 1;
}

.unpw-eye-icon {
    width: 16px;
    height: 16px;
}

/* Hint Text */
.unpw-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.unpw-hint-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.unpw-hint-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
    line-height: 20px;
}

/* Submit Section */
.unpw-submit-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
}

.unpw-signin-btn {
    width: 100%;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    background-color: var(--btn-bg);
    color: var(--btn-text-color);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    border: none;
    /*border-radius: var(--btn-radius);*/
    border-radius: var(--radiius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    line-height: 20px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.unpw-signin-btn:hover {
    background-color: var(--btn-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

   /* .unpw-signin-btn:focus-visible {
        outline: 2px solid var(--btn-focus-outline);
        outline-offset: 2px;
    }*/

.unpw-signin-btn:active {
    transform: translateY(0);
}

.unpw-signin-btn img {
    width: 20px;
    height: 20px;
}

.unpw-forgot-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-decoration: none;
    text-align: center;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.unpw-forgot-link:hover {
    background-color: var(--color-hover-light);
}

    /*.unpw-forgot-link:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }*/

/* More Options Section */
.unpw-more-options {
    border-top: 1px solid var(--card-border);
    padding-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.unpw-more-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md) 0;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--input-text-color);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

    .unpw-more-btn:hover {
        background-color: var(--color-hover-light);
    }

    /*.unpw-more-btn:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }*/

.unpw-chevron-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}
.unpw-chevron-icon-static {
    width: 16px;
    height: 16px;
    /*transition: transform var(--transition-fast);*/    
    transform: none !important;
}

.unpw-more-options-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: 0;
}

/*.unpw-option-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary);
    text-decoration: none;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast);
}*/

.unpw-option-link {
    font-size: var(--font-size-md); 
    font-weight: var(--font-weight-semibold);    
    color: var(--brand-primary);    
    /*text-decoration: none;    */
    text-decoration: underline;
    padding: 0;    
    border-radius: var(--radius-sm);    
    transition: opacity var(--transition-fast);    
    background-color: #FFFFFF !important;    
    border: none;
    cursor: pointer;
}


    .unpw-option-link:hover {
        opacity: 0.8;
    }

   /* .unpw-option-link:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
    }*/

.unpw-option-divider {
    width: 1px;
    height: 20px;
    background-color: var(--card-border);
}

/* UNPW Help Text */
.unpw-help-text {
    width: 100%;
    max-width: 460px;
    margin-top: 48px;
    text-align: center;
}

.unpw-help-text p {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-normal);
    margin: 0;
}

.unpw-help-text strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-tertiary);
}

.unpw-phone-link {
    color: var(--color-text-tertiary);
    text-decoration: underline;
    font-weight: var(--font-weight-normal);
}

.unpw-phone-link:hover {
    color: var(--brand-primary);
}

.unpw-phone-link:focus-visible {
    /*outline: 2px solid var(--brand-primary);
    outline-offset: 2px;*/
    border-radius: var(--radius-sm);
}

/* UNPW Footer */
.unpw-footer {
    background-color: var(--footer-bg);
    border-top: var(--footer-border-width) solid var(--footer-border-color);
    padding: var(--footer-padding);
    margin-top: auto;
}

.unpw-footer-content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    color: var(--footer-text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.unpw-footer-left,
.unpw-footer-right {
    text-align: center;
}

    .unpw-footer-left p {
        margin: 0;
    }

.unpw-footer-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    justify-content: center;
}

.unpw-footer-link {
    color: var(--footer-text-color);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.unpw-footer-link:hover {
    background-color: var(--footer-link-hover-bg);
}

.unpw-footer-link:focus-visible {
    outline: 2px solid var(--footer-text-color);
    outline-offset: 2px;
}

.unpw-divider {
    width: 1px;
    height: 32px;
    background-color: #9ca3af;
}

/* UNPW Tablet Styles - 768px and up */
@media (min-width: 768px) {
    .unpw-tagline {
        font-size: var(--header-tagline-size-tablet);
    }

    .unpw-content {
        padding: 48px;
    }

    .unpw-title {
        font-size: var(--font-size-2xl) /* 24px */;
        text-align: left;
    }

    .unpw-card-inner {
        padding: 48px;
    }

    .unpw-footer-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .unpw-footer-left,
    .unpw-footer-right {
        text-align: left;
    }
}

/* UNPW Desktop Styles - 1024px and up */
@media (min-width: 1024px) {
    .unpw-logo {
        width: var(--header-logo-width-desktop);
    }
}

/* UNPW Print Styles */
@media print {
    .unpw-header,
    .unpw-footer {
        display: none;
    }

    .unpw-page {
        background-color: white;
    }

    .unpw-content {
        box-shadow: none;
    }
}

/* ============================================
   AWARD CATALOG STYLES
   Product Catalog Page
   ============================================ */


/* Accessibility */
.catalog-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip Link */
.catalog-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--catalog-brand-primary);
    color: var(--catalog-text-white);
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-lg);
    text-decoration: none;
    z-index: var(--catalog-z-skip-link);
    border-radius: 0 0 var(--catalog-radius-sm) 0;
    font-weight: var(--catalog-font-weight-semibold);
}

.catalog-skip-link:focus {
    top: 0;
}

/* Focus Styles */
/*
*:focus-visible {
    outline: 2px solid var(--catalog-brand-primary);
    outline-offset: 2px;
}

.catalog-nav-item:focus-visible,
.catalog-category-item:focus-visible,
.catalog-page-btn:focus-visible {
    outline: 2px solid var(--catalog-brand-primary);
    outline-offset: 2px;
}*/

/* Page Layout */
.catalog-page {
    min-height: 100vh;
    background-color: var(--catalog-bg-page);
    font-family: var(--catalog-font-family);
    display: flex;
    flex-direction: column;
}

/* Header */
.catalog-header {
    background-color: var(--catalog-bg-white);
    box-shadow: var(--catalog-shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--catalog-z-header);
}

.catalog-header-content {
    padding: var(--catalog-spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.catalog-logo-nav {
    display: flex;
    gap: var(--catalog-spacing-lg);
    align-items: center;
}

.catalog-logo {
    width: var(--catalog-logo-width);
    height: var(--catalog-logo-height);
}

.catalog-logo img {
    width: 100%;
    height: auto;
}

.catalog-nav {
    display: flex;
    gap: var(--catalog-spacing-md);
    align-items: center;
}

.catalog-nav-item {
    padding: var(--catalog-spacing-sm);
    font-size: var(--catalog-font-size-sm);
    font-weight: var(--catalog-font-weight-semibold);
    color: var(--catalog-brand-gray);
    text-decoration: none;
    border-radius: var(--catalog-radius-md);
    position: relative;
    transition: background-color var(--catalog-transition-fast);
}

.catalog-nav-item:hover {
    background-color: var(--catalog-bg-hover-elevated);
}

.catalog-nav-item-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--catalog-brand-gray);
    border-radius: var(--catalog-radius-full);
}

.catalog-utility-nav {
    display: flex;
    gap: var(--catalog-spacing-sm);
    align-items: center;
}

.catalog-user-avatar {
    width: var(--catalog-avatar-size);
    height: var(--catalog-avatar-size);
    border-radius: 100px;
    overflow: hidden;
}

    .catalog-user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Main Content */
/*.catalog-main {
    flex: 1;
    padding-top: var(--catalog-spacing-lg);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    max-width: 1440px;  
    margin:24px auto 24px auto;  
    min-height: calc(100dvh - 160px);
    border: 1px solid var(--faqs-gray-light);    
}*/
.catalog-main {
    flex: 1;
    /* padding-top: var(--catalog-spacing-lg); */
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    max-width: 1440px;
    margin: 36px auto 24px auto;
    min-height: calc(100dvh - 160px);
    border: 1px solid var(--faqs-gray-light);
    background-color: var(--color-white);
    padding-top: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    padding-left: var(--spacing-lg);
}

.catalog-container {
    /*max-width: 1440px;*/
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--catalog-spacing-lg) var(--catalog-spacing-lg);
}

.catalog-content {
    background-color: var(--catalog-bg-white);
    border-radius: var(--catalog-radius-lg);
    padding: var(--catalog-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--catalog-spacing-lg);
}

/* Breadcrumb */
.catalog-breadcrumb {
    padding-bottom: var(--catalog-spacing-md);
    border-bottom: 1px solid var(--catalog-border);
}

.catalog-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-breadcrumb-item {
    font-size: var(--catalog-font-size-base);
    color: var(--catalog-text-black);
    letter-spacing: var(--catalog-letter-spacing-md);
}

.catalog-breadcrumb-item a {
    color: var(--catalog-brand-primary);
    text-decoration: none;
    transition: text-decoration var(--catalog-transition-fast);
}

.catalog-breadcrumb-item a:hover {
    /*text-decoration: underline;*/
    text-decoration: none;
}

.catalog-breadcrumb-item a:focus-visible {
    /*outline: 2px solid var(--catalog-brand-primary);
    outline-offset: 2px;*/
    border-radius: 2px;
}

.catalog-breadcrumb-current {
    font-weight: var(--catalog-font-weight-semibold);
}

.catalog-breadcrumb-separator {
    display: flex;
    align-items: center;
}

.catalog-breadcrumb-chevron {
    width: var(--catalog-icon-size-sm);
    height: var(--catalog-icon-size-sm);
    color: var(--catalog-text-primary);
}

/* Layout */
.catalog-layout {
    display: flex;
    gap: var(--catalog-spacing-lg);
}

/* Sidebar */
.catalog-sidebar {
    width: var(--catalog-sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--catalog-border);
    padding-right: var(--catalog-spacing-lg);
}

.catalog-sidebar-title {
    font-size: var(--catalog-font-size-lg);
    font-weight: var(--catalog-font-weight-semibold);
    color: var(--catalog-text-black);
    letter-spacing: var(--catalog-letter-spacing-lg);
    padding-bottom: var(--catalog-spacing-md);
    border-bottom: 1px solid var(--catalog-border);
    margin: 0 0 0 0;
    text-align: left;
}

.catalog-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.catalog-sidebar-toggle {
    background: none;
    border: none;
    padding: var(--catalog-spacing-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--catalog-radius-sm);
    transition: background-color var(--catalog-transition-fast);
    color: var(--catalog-text-primary);
}

.catalog-sidebar-toggle:hover {

    background-color: var(--catalog-bg-hover);
}

.catalog-sidebar-toggle:focus-visible {
    outline: 2px solid var(--catalog-brand-primary);
    outline-offset: 2px;
}

.catalog-sidebar-toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--catalog-transition-fast);
}

.catalog-sidebar.collapsed .catalog-sidebar-toggle-icon {
    transform: rotate(-90deg);
}

.catalog-sidebar-content {
    display: block;
}

.catalog-sidebar.collapsed {
    width: auto;
    min-width: 50px;
}

.catalog-sidebar.collapsed .catalog-sidebar-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-bottom: 0;
    padding-left: var(--catalog-spacing-md);
    border-bottom: none;
    border-left: 1px solid var(--catalog-border);
    margin-left: var(--catalog-spacing-md);
}

.catalog-sidebar.collapsed .catalog-sidebar-header {
    flex-direction: column-reverse;
    gap: var(--catalog-spacing-md);
}


.catalog-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--catalog-spacing-md) 0;
    border: none;
    border-bottom: 1px solid var(--catalog-border);
    background: none;
    font-family: inherit;
    font-size: var(--catalog-font-size-sm);
    color: var(--catalog-text-black);
    letter-spacing: var(--catalog-letter-spacing-base);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color var(--catalog-transition-fast);
}

.catalog-category-item:hover {
    background-color: var(--catalog-bg-hover);
}

.catalog-category-item:focus-visible {
    /*outline: 2px solid var(--catalog-brand-primary);
    outline-offset: -2px;*/
    background-color: var(--catalog-bg-focus);
}

.catalog-category-chevron {
    width: var(--catalog-icon-size-sm);
    height: var(--catalog-icon-size-sm);
    color: var(--catalog-text-primary);
    transition: transform var(--catalog-transition-fast) var(--catalog-transition-ease);
    /*transform: rotate(90deg);*/
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2309090b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

.catalog-category-chevron-expanded {
    /*transform: rotate(270deg);*/
    transform: rotate(180deg);
}

/* Subcategories */
.catalog-subcategory-list {
    margin-left: var(--catalog-spacing-md);
    padding-top: var(--catalog-spacing-sm);
}

.catalog-subcategory-item {
    display: block;
    width: 100%;
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-md);
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--catalog-font-size-sm);
    color: var(--catalog-text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all var(--catalog-transition-fast);
    border-radius: var(--catalog-radius-sm);
}

.catalog-subcategory-item:hover {
    background-color: var(--catalog-bg-hover-secondary);
    color: var(--catalog-brand-primary);
}

.catalog-subcategory-item:focus-visible {
    /*outline: 2px solid var(--catalog-brand-primary);
    outline-offset: -2px;*/
    background-color: var(--catalog-bg-focus);
    color: var(--catalog-brand-primary);
}

/* Products Section */
.catalog-products-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--catalog-spacing-lg);
}

/* Filters */
.catalog-filters {
    display: flex;
    align-items: center;
    gap: var(--catalog-spacing-lg);
}

.catalog-search-wrapper {
    position: relative;
    flex: 1;
    max-width: var(--catalog-search-max-width);
}

.catalog-search-input {
    width: 100%;
    padding: var(--catalog-spacing-md);
    padding-right: 40px;
    font-family: inherit;
    font-size: var(--catalog-font-size-base);
    color: var(--catalog-text-primary);
    border: 1px solid var(--catalog-border);
    border-radius: var(--catalog-radius-md);
    background-color: var(--catalog-bg-white);
    transition: border-color var(--catalog-transition-fast), box-shadow var(--catalog-transition-fast);
}

.catalog-search-input:focus,
.catalog-search-input:focus-visible {
    outline: none;
    border-color: var(--catalog-border-hover);
    box-shadow: var(--catalog-shadow-focus);
}

.catalog-search-input::placeholder {
    color: var(--catalog-text-secondary);
}

.catalog-search-icon {
    position: absolute;
    right: var(--catalog-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--catalog-icon-size-md);
    height: var(--catalog-icon-size-md);
    color: var(--catalog-text-primary);
    cursor: pointer;
    transition: color var(--catalog-transition-fast), background-color var(--catalog-transition-fast);
    border-radius: var(--catalog-radius-sm);
    /*padding: 4px;*/
}

.catalog-search-icon:hover {
    color: var(--catalog-brand-primary);
    background-color: var(--catalog-bg-hover);
}

.catalog-search-icon:focus-visible {
    outline: 2px solid var(--catalog-brand-primary);
    outline-offset: 2px;
}

.catalog-filter-select {
    width: var(--catalog-select-width);
    padding: var(--catalog-spacing-md);
    font-family: inherit;
    font-size: var(--catalog-font-size-base);
    color: var(--catalog-text-primary);
    border: 1px solid var(--catalog-border);
    border-radius: var(--catalog-radius-md);
    background-color: var(--catalog-bg-white);
    cursor: pointer;
    transition: border-color var(--catalog-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2309090b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--catalog-spacing-md) center;
    padding-right: 40px;
}

.catalog-filter-select:focus {
    outline: none;
    border-color: var(--catalog-border-hover);
    box-shadow: var(--catalog-shadow-focus);
}

/* Product Grid */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--catalog-spacing-lg);
}

.catalog-product-card {
    border: 1px solid var(--catalog-border);
    border-radius: var(--catalog-radius-lg);
    overflow: hidden;
    transition: transform var(--catalog-transition-fast), box-shadow var(--catalog-transition-fast), border-color var(--catalog-transition-fast);
    cursor: pointer;
    background-color: var(--catalog-bg-white);
    height: var(--catalog-card-height);
    display: flex;
    flex-direction: column;
}

.catalog-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--catalog-shadow-md);
}

.catalog-product-card:focus-within {
    border-color: var(--catalog-border-hover);
    box-shadow: var(--catalog-shadow-focus);
}

.catalog-product-image {
    flex: 1 1;
    padding: var(--catalog-spacing-md);
    display: flex;
   /* align-items: center;*/
    justify-content: center;
    overflow: hidden;
}

.catalog-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.catalog-product-info {
    padding: var(--catalog-spacing-md);
    border-top: 1px solid transparent;
}
/*-------------------------------------------------
    Don't show Product Brand for Current Catalog
-------------------------------------------------*/
.catalog-product-brand {
    font-size: var(--catalog-font-size-xs);
    font-weight: var(--catalog-font-weight-semibold);
    color: var(--catalog-text-secondary);
    margin: 0 0 var(--catalog-spacing-xs) 0;
    text-align: left;
    display:none;
}

.catalog-product-name {
    font-size: var(--catalog-font-size-base);
    font-weight: var(--catalog-font-weight-semibold);
    color: var(--catalog-text-primary);
    margin: 0 0 var(--catalog-spacing-xs) 0;
    line-height: var(--catalog-line-height-base);
    text-align: left;
}

.catalog-product-code {
    font-size: var(--catalog-font-size-xs);
    color: var(--catalog-text-secondary);
    letter-spacing: var(--catalog-letter-spacing-sm);
    margin: 0;
    text-align: left;
}

/* Pagination */
.catalog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--catalog-spacing-md);
    padding-top: var(--catalog-spacing-lg);
    border-top: 1px solid var(--catalog-border);
}
#ctl00_AppBody_DataPager2 {
	display:flex;
	flex-direction:row;
	padding: var(--catalog-spacing-lg);
}

.catalog-page-btn {
    padding: var(--catalog-spacing-xs) var(--catalog-spacing-md);
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--catalog-font-size-sm);
    font-weight: var(--catalog-font-weight-normal);
    color: var(--catalog-text-primary);
    border-radius: var(--catalog-radius-md);
    cursor: pointer;
    transition: background-color var(--catalog-transition-fast);
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-page-btn:hover:not(:disabled) {
    background-color: var(--catalog-bg-hover-elevated);
}

.catalog-page-btn:disabled {
    opacity: var(--catalog-opacity-disabled);
    cursor: not-allowed;
}

/*.catalog-page-btn:focus-visible {
    outline: 2px solid var(--catalog-brand-primary);
    outline-offset: 2px;
}*/

.catalog-page-active {
    background-color: var(--catalog-brand-primary);
    color: var(--catalog-text-white);
    font-weight: var(--catalog-font-weight-semibold);
}

.catalog-page-active:hover {
    background-color: var(--catalog-brand-primary);
}

.catalog-page-active:focus-visible {
    outline-color: var(--catalog-text-white);
}

.catalog-page-prev svg,
.catalog-page-next svg {
    width: var(--catalog-icon-size-md);
    height: var(--catalog-icon-size-md);
}

/* Footer */
.catalog-footer {
    background-color: var(--catalog-brand-gray);
    border-top: 6px solid var(--catalog-brand-primary);
    padding: var(--catalog-spacing-lg);
    margin-top: auto;
}

.catalog-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.catalog-footer-left p {
    font-size: var(--catalog-font-size-sm);
    font-weight: var(--catalog-font-weight-semibold);
    color: var(--catalog-text-white);
    margin: 0;
}

.catalog-footer-right {
    display: flex;
    gap: var(--catalog-spacing-lg);
    align-items: center;
}

.catalog-footer-link {
    font-size: var(--catalog-font-size-sm);
    font-weight: var(--catalog-font-weight-semibold);
    color: var(--catalog-text-white);
    text-decoration: none;
    padding: var(--catalog-spacing-sm);
    border-radius: var(--catalog-radius-md);
    transition: background-color var(--catalog-transition-fast);
}

.catalog-footer-link:hover {
    background-color: rgba(255, 255, 255, var(--catalog-opacity-footer-hover));
}

.catalog-footer-link:focus-visible {
    outline: 2px solid var(--catalog-text-white);
    outline-offset: 2px;
}

.catalog-footer-divider {
    width: 1px;
    height: var(--catalog-footer-divider-height);
    background-color: var(--catalog-border);
}


/* Responsive */

@media (max-width: 1440px) {
    .main-content {
        flex: 1;
        padding: var(--spacing-lg);
        max-width: auto;
        margin: 24px auto 24px auto;
    }
}




@media (max-width: 1024px) {
    .catalog-container {
        max-width: 100%;
        padding-left: var(--catalog-spacing-md);
        padding-right: var(--catalog-spacing-md);
    }

    .catalog-header-content {
        padding-left: var(--catalog-spacing-md);
        padding-right: var(--catalog-spacing-md);
    }

    .catalog-footer {
        padding-left: var(--catalog-spacing-md);
        padding-right: var(--catalog-spacing-md);
    }

    .catalog-content {
        padding: var(--catalog-spacing-md);
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--catalog-spacing-md);
    }

    .catalog-layout {
        gap: var(--catalog-spacing-md);
    }

    .catalog-logo {
        width: 180px;
        height: auto;
    }

    .catalog-nav {
        gap: var(--catalog-spacing-sm);
    }

    .catalog-nav-item {
        font-size: 13px;
        padding: var(--spacing-xs1) /* 6px */ var(--spacing-m) /* 10px */;
    }

    .catalog-logo-nav {
        gap: var(--catalog-spacing-md);
    }

    .main-content {
        flex: 1;
        padding: var(--spacing-lg);
        max-width: auto;
        margin: 24px auto 24px auto;
        background-color: var(--color-background);
    }
}

@media (max-width: 768px) {

    .catalog-main{
        flex: 1;
        /* padding-top: var(--catalog-spacing-lg); */
        box-shadow: var(--shadow-lg);
        border-radius: var(--radius-lg);
        max-width: 768px;
        /*margin: 36px auto 24px auto;*/
        margin: 24px 4px;
        min-height: calc(100dvh - 160px);
        border: 1px solid var(--faqs-gray-light);
        background-color: var(--color-white);
        padding-top: var(--spacing-lg);
        /* padding-right: var(--spacing-lg); */
        padding-bottom: var(--spacing-lg);
        /* padding-left: var(--spacing-lg); */
        /* background-color: var(--color-background-light-gray); */
        padding-left: 0px;
        padding-right: 0px;
    }

    .catalog-layout {
        flex-direction: column;
    }

    .catalog-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--catalog-border);
        padding-right: 0;
        padding-bottom: var(--catalog-spacing-lg);
    }

    .catalog-sidebar.collapsed {
        width: 100%;
        min-width: auto;
        padding-bottom: var(--catalog-spacing-md);
    }

    .catalog-sidebar.collapsed .catalog-sidebar-title {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        padding-bottom: var(--catalog-spacing-md);
        padding-left: 0;
        border-bottom: 1px solid var(--catalog-border);
        border-left: none;
        margin-left: 0;
    }

    .catalog-sidebar.collapsed .catalog-sidebar-header {
        flex-direction: row;
        gap: 0;
    }


    .catalog-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-search-wrapper,
    .catalog-filter-select {
        max-width: 100%;
        width: 100%;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-nav {
        display: none;
    }
    .catalog-page-btn {
        padding: var(--catalog-spacing-xs);
        border: none;
        background: none;
        font-family: inherit;
        font-size: var(--catalog-font-size-sm);
        font-weight: var(--catalog-font-weight-normal);
        color: var(--catalog-text-primary);
        border-radius: var(--catalog-radius-md);
        cursor: pointer;
        transition: background-color var(--catalog-transition-fast);
        min-width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    } 
    .catalog-page-active {
        background-color: var(--catalog-brand-primary);
        color: var(--catalog-text-white);
        font-weight: var(--catalog-font-weight-semibold);
    }

    .catalog-page-active:hover {
        background-color: var(--catalog-brand-primary);
    }

    .catalog-page-active:focus-visible {
        outline-color: var(--catalog-text-white);
    }

}

/* ============================================
   AWARD LEVELS STYLES
   Award Levels Selection Page
   ============================================ */

/* CSS Variables */


/* Accessibility */
.award-levels-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip Link */
.award-levels-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--award-levels-brand-primary);
    color: var(--award-levels-text-white);
    padding: var(--award-levels-spacing-sm) var(--award-levels-spacing-lg);
    text-decoration: none;
    z-index: var(--award-levels-z-skip-link);
    border-radius: 0 0 var(--award-levels-radius-sm) 0;
    font-weight: var(--award-levels-font-weight-semibold);
}

    .award-levels-skip-link:focus {
        top: 0;
    }

/* Focus Styles */
/*.award-levels-page *:focus-visible {
    outline: 2px solid var(--award-levels-brand-primary);
    outline-offset: 2px;
}*/

/* Page Layout */
.award-levels-page {
    min-height: 100vh;
    background-color: var(--award-levels-bg-page);
    font-family: var(--award-levels-font-family);
    display: flex;
    flex-direction: column;
}

/* Header */
.award-levels-header {
    background-color: var(--award-levels-bg-white);
    box-shadow: var(--award-levels-shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--award-levels-z-header);
    transition: opacity var(--award-levels-transition-fast);
}

.award-levels-header.scrolled {
    opacity: 0.8;
}

.award-levels-header-content {
    max-width: var(--award-levels-max-width);
    margin: 0 auto;
    padding: var(--award-levels-spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.award-levels-logo-nav {
    display: flex;
    gap: var(--award-levels-spacing-lg);
    align-items: center;
}

.award-levels-logo {
    width: var(--award-levels-logo-width);
    height: var(--award-levels-logo-height);
}

.award-levels-logo img {
    width: 100%;
    height: auto;
}

.award-levels-nav {
    display: flex;
    gap: var(--award-levels-spacing-md);
    align-items: center;
}

.award-levels-hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--award-levels-spacing-sm);
    border-radius: var(--award-levels-radius-md);
    transition: background-color var(--award-levels-transition-fast);
}

.award-levels-hamburger:hover {
    background-color: var(--award-levels-bg-hover);
}

.award-levels-hamburger span {
    width: 24px;
    height: 2px;
    background-color: var(--award-levels-brand-gray);
    transition: transform var(--award-levels-transition-fast);
}

.award-levels-nav-item {
    padding: var(--award-levels-spacing-sm);
    font-size: var(--award-levels-font-size-nav);
    font-weight: var(--award-levels-font-weight-semibold);
    color: var(--award-levels-brand-gray);
    text-decoration: none;
    border-radius: var(--award-levels-radius-md);
    position: relative;
    transition: background-color var(--award-levels-transition-fast);
}

.award-levels-nav-item:hover {
    background-color: var(--award-levels-bg-hover);
}

.award-levels-nav-item-active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--award-levels-brand-gray);
    border-radius: var(--award-levels-radius-full);
}

.award-levels-utility-nav {
    display: flex;
    gap: var(--award-levels-spacing-sm);
    align-items: center;
}

.award-levels-user-avatar {
    width: var(--award-levels-avatar-size);
    height: var(--award-levels-avatar-size);
    border-radius: 100px;
    overflow: hidden;
}

    .award-levels-user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Main Content */
.award-levels-main {
    flex: 1;
    /*padding: var(--award-levels-spacing-xl) 0;*/
}

.award-levels-container {
    max-width: var(--award-levels-max-width);
    /*margin: var(--spacing-xl) auto var(--spacing-2xl) auto;*/
    /*margin: 10px auto 24px auto;
    margin: 10px auto 24px auto;
    margin: 10px auto 24px auto;*/
    /*padding: 0 var(--award-levels-spacing-lg);*/
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    border: 1px solid var(--faqs-gray-light);
}

.award-levels-content {
    background-color: var(--award-levels-bg-white);
    border-radius: var(--award-levels-radius-lg);
    padding-top: var(--spacing-xl);
    padding-right: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    padding-left: var(--spacing-2xl);
    /*padding: var(--spacing-2xl);            */
    display: flex;
    flex-direction: column;
    gap: var(--award-levels-spacing-xl);
    /*border: 1px solid var(--faqs-gray-light);*/
}

/* Heading */
.award-levels-heading {
    padding-bottom: var(--award-levels-spacing-md);
    border-bottom: 2px solid var(--award-levels-border-heading);
}

.award-levels-heading h1 {
    font-size: var(--award-levels-font-size-heading);
    font-weight: var(--font-weight-medium);
    color: var(--award-levels-text-primary);
    letter-spacing: var(--award-levels-letter-spacing-heading);
    line-height: var(--award-levels-line-height-heading);
    margin: 0;
}

/* Grid */
.award-levels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--award-levels-spacing-xl);
}

/* Card */
.award-levels-card {
    background-color: var(--award-levels-bg-card);
    border: 1px solid var(--award-levels-border);
    border-radius: var(--award-levels-radius-lg);
    padding: var(--award-levels-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--award-levels-spacing-lg);
    height: var(--award-levels-card-height);
    transition: transform var(--award-levels-transition-fast), box-shadow var(--award-levels-transition-fast);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1);

}

.award-levels-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.award-levels-card-wide {
    grid-column: span 2;
    height: var(--award-levels-card-wide-height);
}

.award-levels-card-title {
    /*font-size: var(--award-levels-font-size-card-title);*/
    /*font-weight: var(--award-levels-font-weight-extrabold);*/
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    color: var(--award-levels-text-primary);
    line-height: var(--award-levels-line-height-heading);
    margin: 0;
}

.award-levels-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--award-levels-spacing-md);
    color: var(--brand-primary);
}

.award-levels-card-link-text {
    font-size: var(--award-levels-font-size-link);
    font-weight: var(--award-levels-font-weight-semibold);
    color: var(--award-levels-text-secondary);
    line-height: var(--award-levels-line-height-link);
    white-space: nowrap;
    color: var(--brand-primary);    
}

.award-levels-card-arrow {
    width: var(--award-levels-arrow-size);
    height: var(--award-levels-arrow-size);
    flex-shrink: 0;
    color: var(--brand-primary);    
}

/* Footer */
.award-levels-footer {
    background-color: var(--award-levels-brand-gray);
    border-top: 6px solid var(--award-levels-brand-primary);
    padding: var(--award-levels-spacing-lg);
    margin-top: auto;
}

.award-levels-footer-content {
    max-width: var(--award-levels-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.award-levels-footer-left p {
    font-size: var(--award-levels-font-size-nav);
    font-weight: var(--award-levels-font-weight-semibold);
    color: var(--award-levels-text-white);
    margin: 0;
}

.award-levels-footer-right {
    display: flex;
    gap: var(--award-levels-spacing-lg);
    align-items: center;
}

.award-levels-footer-link {
    font-size: var(--award-levels-font-size-nav);
    font-weight: var(--award-levels-font-weight-semibold);
    color: var(--award-levels-text-white);
    text-decoration: none;
    padding: var(--award-levels-spacing-sm);
    border-radius: var(--award-levels-radius-md);
    transition: background-color var(--award-levels-transition-fast);
}

.award-levels-footer-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.award-levels-footer-divider {
    width: 1px;
    height: 32px;
    background-color: var(--award-levels-border);
}

/* Responsive */
@media (max-width: 1024px) {
    .award-levels-header-content,
    .award-levels-container,
    .award-levels-footer-content {
        padding-left: var(--award-levels-spacing-md);
        padding-right: var(--award-levels-spacing-md);
    }

    .award-levels-header-content {
        justify-content: space-between;
    }

    .award-levels-content {
        padding: var(--award-levels-spacing-lg);
    }

    .award-levels-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--award-levels-spacing-lg);
    }

    .award-levels-logo-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        gap: 0;
    }

    .award-levels-logo {
        width: 180px;
        height: auto;
    }

    .award-levels-hamburger {
        display: flex;
    }

    .award-levels-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .award-levels-heading h1 {
        font-size: var(--font-size-3xl) /* 32px */;
    }

    .award-levels-grid {
        grid-template-columns: 1fr;
    }

    .award-levels-card-wide {
        grid-column: span 1;
    }

    .award-levels-footer-content {
        flex-direction: column;
        gap: var(--award-levels-spacing-md);
        text-align: center;
    }

    .award-levels-footer-divider {
        display: none;
    }
    .award-levels-grid {
        /* grid-template-columns: 2fr; */
        display: flex;
        flex-direction: column;
    }

}
/* Product Page Styles */



/* Reset and Base Styles */
.product-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--product-page-background);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

/* Skip Link */
.product-page-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--product-page-primary);
    color: var(--product-page-white);
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
    font-weight: 600;
}

.product-page-skip-link:focus {
    top: 0;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Header */
.product-page-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--product-page-white);
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: var(--product-page-z-header);
    transition: box-shadow 0.3s ease;
    left: 0;
    right: 0;
}

.product-page-header-content {
    width: 100%;
    margin: 0 auto;
    padding: var(--product-page-spacing-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.product-page-logo-nav {
    display: flex;
    align-items: center;
    gap: var(--product-page-spacing-6);
}

.product-page-logo {
    height: 65px;
    width: 222px;
    flex-shrink: 0;
}

.product-page-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-page-main-nav {
    display: flex;
    gap: var(--product-page-spacing-3);
    align-items: center;
}

.product-page-nav-item {
    padding: var(--product-page-spacing-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--product-page-gray);
    text-decoration: none;
    border-radius: var(--product-page-radius-lg);
    transition: background-color 0.2s ease;
    position: relative;
}

.product-page-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

   /* .product-page-nav-item:focus-visible {
        outline: 2px solid var(--product-page-primary);
        outline-offset: 2px;
    }*/

.product-page-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--product-page-gray);
    border-radius: 9999px;
}

.product-page-utility-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.product-page-user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.product-page-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-page-logout-button {
    margin-left: 0;
}

.product-page-mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.product-page-mobile-menu-toggle:focus-visible {
    /*outline: 2px solid var(--product-page-primary);
    outline-offset: 2px;*/
    border-radius: var(--product-page-radius-lg);
}

.product-page-hamburger-line {
    width: 24px;
    height: 3px;
    background-color: var(--product-page-gray);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Main Content */
.product-page-main {
    flex: 1;
    padding-top: 90px;
    padding-bottom: var(--product-page-spacing-6);
}

.product-page-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--product-page-spacing-6);
    box-sizing: border-box;
}

.product-page-content {
    background-color: var(--product-page-white);
    border-radius: var(--product-page-radius-2xl);
    padding: var(--product-page-spacing-6) var(--product-page-spacing-12);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Breadcrumb */
.product-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: var(--product-page-spacing-3);
    border-bottom: 2px solid var(--product-page-primary);
    margin-bottom: var(--product-page-spacing-6);
}

.product-page-breadcrumb-link {
    font-size: var(--font-size-base);
    color: var(--product-page-black);
    text-decoration: none;
    letter-spacing: -0.4px;
    transition: color 0.2s ease;
}

.product-page-breadcrumb-link:hover {
    color: var(--product-page-primary);
}

.product-page-breadcrumb-link:focus-visible {
    /*outline: 2px solid var(--product-page-primary);
    outline-offset: 2px;*/
    border-radius: 4px;
}

.product-page-breadcrumb-current {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: 600;
    color: var(--product-page-black);
    letter-spacing: -0.4px;
}

.product-page-breadcrumb-arrow {
    width: 16px;
    height: 16px;
    color: var(--product-page-black);
    flex-shrink: 0;
}

/* Layout */
.product-page-layout {
    display: flex;
    gap: var(--product-page-spacing-6);
}

/* Sidebar */
.product-page-sidebar {
    width: 189px;
    max-width: 300px;
    flex-shrink: 0;
    padding-right: var(--product-page-spacing-6);
}

.product-page-categories-title {
    font-size: var(--font-size-lg) /* 18px */;
    font-weight: 600;
    color: var(--product-page-black);
    letter-spacing: -0.45px;
    padding-bottom: var(--product-page-spacing-3);
    margin: 0;
}

.product-page-categories-list {
    display: flex;
    flex-direction: column;
}

.product-page-category-item {
    border-bottom: 1px solid var(--product-page-border);
}

.product-page-category-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--product-page-spacing-3) 0;

    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.product-page-category-button:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

    /*.product-page-category-button:focus-visible {
        outline: 2px solid var(--product-page-primary);
        outline-offset: -2px;
    }*/

.product-page-category-name {
    font-size: 14px;
    color: var(--product-page-black);
    letter-spacing: -0.35px;
    flex: 1;
}

.product-page-category-icon {
    width: 16px;
    height: 16px;
    color: var(--product-page-black);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.product-page-category-icon.expanded {
    transform: rotate(180deg);
}

/* Product Area */
.product-page-product-area {
    flex: 1;
}

.product-page-product-container {
    background-color: var(--product-page-white);
    border-radius: var(--product-page-radius-2xl);
}

.product-page-product-content {
    display: flex;
    gap: var(--product-page-spacing-12);
}

.product-page-product-image {
    flex: 1;
    min-height: 400px;
    height: 579px;
    margin: 0;
}

.product-page-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-page-product-details {
    flex: 1;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: var(--product-page-spacing-12);
}

.product-page-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--product-page-spacing-12);
}

.product-page-product-brand {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: 600;
    color: var(--product-page-text-secondary);
}

.product-page-product-title {
    font-size: var(--font-size-2xl) /* 24px */;
    font-weight: 600;
    color: var(--product-page-black);
    line-height: 1.5;
    margin: 0;
}

.product-page-product-number {
    font-size: 14px;
    color: var(--product-page-text-secondary);
    letter-spacing: -0.35px;
    margin: 0;
}

/* Description */
.product-page-description {
    display: flex;
    flex-direction: column;
    gap: var(--product-page-spacing-3);
}

.product-page-description-content {
    position: relative;
    height: auto;
    overflow: hidden;
}

.product-page-description-content.expanded {
    height: 100px;
}

.product-page-description-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.product-page-description-content.expanded::after {
    display: none;
}

.product-page-description-text {
    font-size: var(--font-size-base) /* 16px */;
    color: var(--product-page-black);
    line-height: 1.5;
    margin: 0;
}

.product-page-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--product-page-spacing-2);
    padding: var(--product-page-spacing-2) 0;
    border-top: 1px solid var(--product-page-border);
    background: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--product-page-text-secondary);
    letter-spacing: -0.35px;
    transition: color 0.2s ease;
}

.product-page-read-more:hover {
    color: var(--product-page-black);
}

.product-page-read-more:focus-visible {
    /* outline: 2px solid var(--product-page-primary);
    outline-offset: 2px;*/
    border-radius: 4px;
}

.product-page-read-more-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.product-page-read-more-icon.expanded {
    transform: rotate(180deg);
}

/* Add to Cart Button */
.product-page-add-to-cart {
    width: 100%;
    padding: var(--product-page-spacing-2) var(--product-page-spacing-6);
    background-color: var(--product-page-primary);
    color: var(--product-page-white);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: 600;
    border: none;
    border-radius: var(--product-page-radius-xl);
    cursor: pointer;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.product-page-add-to-cart:hover {
    background-color: var(--brand-primary) /* #8a0732 */;
}

.product-page-add-to-cart:active {
    transform: scale(0.98);
}

.product-page-add-to-cart:focus-visible {
    outline: 3px solid var(--product-page-black);
    outline-offset: 2px;
}

/* Footer */
.product-page-footer {
    width: 100%;
    background-color: var(--product-page-gray);
    border-top: 6px solid var(--product-page-primary);
    margin-top: auto;
    left: 0;
    right: 0;
}

.product-page-footer-content {
    width: 100%;
    margin: 0 auto;
    padding: var(--product-page-spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.product-page-footer-left p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--product-page-white);
    line-height: 20px;
}

.product-page-footer-right {
    display: flex;
    align-items: center;
    gap: var(--product-page-spacing-3);
}

.product-page-footer-link {
    padding: var(--product-page-spacing-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--product-page-white);
    text-decoration: none;
    border-radius: var(--product-page-radius-lg);
    transition: background-color 0.2s ease;
}

.product-page-footer-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.product-page-footer-link:focus-visible {
    outline: 2px solid var(--product-page-white);
    outline-offset: 2px;
}

.product-page-footer-divider {
    width: 1px;
    height: 32px;
    background-color: var(--product-page-border);
    padding: 4px 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .product-page-header-content {
        padding: var(--product-page-spacing-3);
    }

    .product-page-logo {
        height: 50px;
        width: 170px;
    }

    .product-page-layout {
        flex-direction: column;
    }

    .product-page-sidebar {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: var(--product-page-spacing-6);
    }

    .product-page-product-content {
        flex-direction: column;
    }

    .product-page-product-details {
        max-width: 100%;
    }

    .product-page-content {
        padding: var(--product-page-spacing-6);
    }
}

@media (max-width: 768px) {
    .product-page-mobile-menu-toggle {
        display: flex;
    }

    .product-page-header-content {
        position: relative;
    }

    .product-page-logo-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .product-page-main-nav {
        display: none;
    }

    .product-page-utility-nav {
        margin-left: auto;
    }

    .product-page-footer-content {
        flex-direction: column;
        gap: var(--product-page-spacing-3);
        text-align: center;
    }

    .product-page-main {
        padding-top: 60px;
    }

    .product-page-content {
        padding: var(--product-page-spacing-3);
    }

    .product-page-product-image {
        min-height: 300px;
        height: auto;
    }

    .product-page-container {
        padding: 0 var(--product-page-spacing-3);
    }

    .product-grid {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    gap: var(--spacing-lg);
    width: 100%;
    /*flex-direction: column;*/
   }

}


/* ============================================
   REDEEM AWARD PAGE - CUSTOM STYLES
   ============================================ */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Screen Reader Only */
.redeem-award-skip-link {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.redeem-award-skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    padding: var(--spacing-md) 16px;
    background: var(--redeem-award-primary);
    color: var(--redeem-award-white);
    z-index: 10000;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

/* Page Layout */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-background-light-gray);
}

.redeem-award-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--redeem-award-background);
}

/* ============================================
       HEADER - FULL WIDTH
       ============================================ */
.redeem-award-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--redeem-award-white);
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 24px;
    left: 0;
    right: 0;
}

.redeem-award-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.redeem-award-header-content {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo and Navigation */
.redeem-award-logo-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

.redeem-award-logo {
    height: 65px;
    width: 222px;
    flex-shrink: 0;
}

.redeem-award-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* Hamburger Menu - Hidden on Desktop */
.redeem-award-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.redeem-award-hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--redeem-award-secondary);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.redeem-award-hamburger:focus-visible {
    outline: 2px solid var(--redeem-award-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Main Navigation */
.redeem-award-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.redeem-award-nav-item {
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--redeem-award-secondary);
    text-decoration: none;
    border-radius: var(--radius-md) /* 8px */;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.redeem-award-nav-item:hover {
    background-color: rgba(92, 92, 92, 0.1);
}

.redeem-award-nav-item:focus-visible {
    outline: 2px solid var(--redeem-award-primary);
    outline-offset: 2px;
}

.redeem-award-nav-item-active {
    color: var(--redeem-award-secondary);
    position: relative;
}

.redeem-award-nav-item-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--redeem-award-secondary);
    border-radius: 9999px;
}

/* Utility Navigation */
.redeem-award-utility-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.redeem-award-user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.redeem-award-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
       MAIN CONTENT
       ============================================ */
.redeem-award-main {
    flex: 1;
    width: 100%;
    padding-top: 0px;
    padding-bottom: var(--spacing-2xl);
}

.redeem-award-body {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: var(--spacing-xl);
    /*padding-right: var(--spacing-2xl);*/
    padding-bottom: var(--spacing-2xl);
    /*padding-left: var(--spacing-2xl);*/
}

.redeem-award-container {
    background-color: var(--redeem-award-white);
    border-radius: var(--radius-lg);
    padding-top: var(--spacing-xl);
    padding-right: var(--spacing-2xl); 
    padding-bottom: var(--spacing-2xl);
    padding-left: var(--spacing-2xl);        
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--faqs-gray-light);
    box-shadow: var(--shadow-xl);
}

/* Header Section */
.redeem-award-header-section {
    border-bottom: 2px solid var(--redeem-award-primary);
    padding-bottom: var(--spacing-md);
    margin-bottom: 24px;
}

.redeem-award-title {
    font-size: var(--font-size-2xl) /* 24px */;
    font-weight: 500;
    color: var(--redeem-award-black);
    margin: 0;
    letter-spacing: -0.6px;
    line-height: 1.5;
}

/* Content Area */
.redeem-award-content {
    background-color: var(--redeem-award-white);
    border: 1px solid var(--redeem-award-border);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    gap: 48px;
}

/* Empty State */
.redeem-award-empty-state {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 48px;
    gap: 32px;
}

.redeem-award-empty-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--redeem-award-black);
    margin: 0;
    line-height: 1.4;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
}

.redeem-award-empty-message {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: 400;
    color: var(--redeem-award-text-primary);
    line-height: 1.6;
    margin: 0;
    max-width: 500px;
}

.redeem-award-empty-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.redeem-award-content-hidden {
    display: none;
}

/* Welcome Section */
.redeem-award-welcome {
    width: 360px;
    flex-shrink: 0;
}

.redeem-award-welcome-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.redeem-award-welcome-title {
    font-size: var(--font-size-2xl) /* 24px */;
    font-weight: 600;
    color: var(--redeem-award-black);
    margin: 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--redeem-award-gray-light);
    line-height: 1.5;
}

.redeem-award-welcome-description {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: 400;
    color: var(--redeem-award-text-primary);
    line-height: 1.5;
    margin: 0;
}

/* Award Cards Section */
.redeem-award-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.redeem-award-card {
    background-color: var(--redeem-award-white);
    border: 1px solid var(--redeem-award-border);
    border-radius: 16px;
    padding: 48px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Award Icon */
.redeem-award-card-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.redeem-award-icon-circle {
    width: 120px;
    height: 120px;
    border: 8px solid var(--redeem-award-primary);
    border-radius: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--redeem-award-white);
    padding: 16px;
}

.redeem-award-icon {
    width: 100%;
    height: auto;
}

/* Card Content */
.redeem-award-card-content {
    width: 100%;
    background-color: var(--redeem-award-white);
    border-radius: 16px;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Desktop */
    margin-top:30px;
}

.redeem-award-card-inner {
    min-height: 325px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 40px 0;
    border-radius: 16px;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #f5e6d3 0%, #fef9e7 50%, #fffacd 100%);
}

.redeem-award-card-text {
    text-align: center;
    margin-bottom: 24px;
    padding-top: 160px;
}

.redeem-award-card-years {
    font-size: 64px;
    font-weight: 900;
    color: var(--redeem-award-primary);
    margin: 0 0 4px 0;
    line-height: 1;
}

.redeem-award-card-label {
    font-size: var(--font-size-2xl) /* 24px */;
    font-weight: 700;
    color: var(--redeem-award-primary);
    margin: 0;
    line-height: 1.5;
}

/* Buttons */
.redeem-award-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: var(--radius-std);
   font-size: var(--font-size-base) /* 16px */;
    font-weight: 600;
    line-height: 20px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
    /*font-size: var(--font-size-base);*/
}

.redeem-award-button:focus-visible {
    outline: 2px solid var(--redeem-award-primary);
    outline-offset: 2px;
}

.redeem-award-button-primary {
    background-color: var(--redeem-award-primary);
    color: var(--redeem-award-white);
}

.redeem-award-button-primary:hover {
    background-color: var(--redeem-award-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0px 6px 8px -4px rgba(0, 0, 0, 0.15), 0px 12px 20px -3px rgba(0, 0, 0, 0.15);
}

.redeem-award-button-primary:active {
    transform: translateY(0);
}

.redeem-award-button-redeemed {
    background-color: var(--redeem-award-secondary);
    color: var(--redeem-award-white);
    cursor: not-allowed;
    opacity: 0.9;
}

.redeem-award-button-redeemed:hover {
    background-color: var(--redeem-award-secondary);
    transform: none;
}

.redeem-award-button-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ============================================
       FOOTER - FULL WIDTH
       ============================================ */
.redeem-award-footer {
    width: 100%;
    background-color: var(--redeem-award-secondary);
    border-top: 6px solid var(--redeem-award-primary);
    padding: 24px;
    margin-top: auto;
    left: 0;
    right: 0;
}

.redeem-award-footer-content {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.redeem-award-footer-left,
.redeem-award-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.redeem-award-footer-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--redeem-award-white);
    margin: 0;
    padding: 8px;
}

.redeem-award-footer-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--redeem-award-white);
    text-decoration: none;
    padding: 8px;
    border-radius: var(--radius-md) /* 8px */;
    transition: background-color 0.2s ease;
}

.redeem-award-footer-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.redeem-award-footer-link:focus-visible {
    outline: 2px solid var(--redeem-award-white);
    outline-offset: 2px;
}

.redeem-award-footer-divider {
    color: var(--redeem-award-white);
    font-weight: 400;
}

/* ============================================
       RESPONSIVE - TABLET
       ============================================ */
@media (max-width: 1024px) {
    .redeem-award-header-content {
        padding: 0 16px;
    }

    .redeem-award-body {
        padding: 16px;
    }

    .redeem-award-content {
        flex-direction: column;
        padding: 32px 24px;
        gap: 32px;
    }

    .redeem-award-welcome {
        width: 100%;
    }

    .redeem-award-card {
        padding: 32px 24px;
    }

    .redeem-award-card-icon {
        top: 0;
        transform: translate(-50%, -50%);
    }

    .redeem-award-footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Card Content */
    .redeem-award-card-content {
        width: 100%;
        background-color: var(--redeem-award-white);
        border-radius: 16px;
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        position: relative;
        /* Tablet */
        margin-top:50px;
    }
}

/* ============================================
       RESPONSIVE - MOBILE
 ============================================ */
@media (max-width: 768px) {
    .header {
        position: initial;
    }

    .redeem-award-header {
        padding: 16px;

    }

    .redeem-award-logo-nav {
        width: 100%;
        justify-content: space-between;
    }


    .redeem-award-logo {
        width: 180px;
        height: 52px;
        order: 2;
    }

    /* Show Hamburger on Mobile */
    .redeem-award-hamburger {
        display: flex;
        order: 1;
    }

    /* Hide Navigation on Mobile by Default */
    .redeem-award-nav {
        display: none;
        position: fixed;
        top: 84px;
        left: 0;
        right: 0;
        background-color: var(--redeem-award-white);
        flex-direction: column;
        padding: 16px;
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 999;
        gap: 8px;
        align-items: stretch;
    }

    .redeem-award-nav.mobile-open {
        display: flex;
    }

    .redeem-award-nav-item {
        width: 100%;
        text-align: left;
        padding: var(--spacing-md) 16px;
    }

    /* Move Logout to Right on Mobile */
    .redeem-award-utility-nav {
        order: 3;
        margin-left: auto;
    }

    .redeem-award-utility-nav .redeem-award-nav-item {
        padding: 8px var(--spacing-md);
    }

    /* Main Content */
    .redeem-award-body {
        padding: 16px;
    }

    .redeem-award-container {
        padding: 16px;
    }

    .redeem-award-title {
        font-size: var(--font-size-xl) /* 20px */;
    }

    .redeem-award-content {
        padding: 24px 16px;
        gap: 24px;
    }

    .redeem-award-empty-state {
        padding: 48px 24px;
        gap: 24px;
    }

    .redeem-award-empty-title {
        font-size: 22px;
    }

    .redeem-award-empty-message {
        font-size: 14px;
    }

    .redeem-award-empty-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .redeem-award-empty-actions .redeem-award-button {
        width: 100%;
    }

    .redeem-award-welcome-title {
        font-size: var(--font-size-xl) /* 20px */;
    }

    .redeem-award-welcome-description {
        font-size: 14px;
    }

    .redeem-award-card {
        padding: 24px 16px;
    }

    .redeem-award-card-years {
        font-size: 48px;
    }

    .redeem-award-card-label {
        font-size: var(--font-size-lg) /* 18px */;
    }

    .redeem-award-button {
        font-size: 14px;
        padding: 10px 20px;
    }

    .redeem-award-icon-circle {
        width: 100px;
        height: 100px;
        border-width: 6px;
        padding: 14px;
    }

    .redeem-award-card-icon {
        top: 0;
        transform: translate(-50%, -50%);
    }

    .redeem-award-card-inner {
        min-height: 280px;
        padding-bottom: 32px;
    }

    .redeem-award-card-text {
        padding-top: 120px;
        margin-bottom: 20px;
    }

    /* Footer */
    .redeem-award-footer {
        padding: 16px;
    }

    .redeem-award-footer-content {
        flex-direction: column;
        gap: 12px;
    }

    .redeem-award-footer-right {
        flex-direction: column;
        gap: 8px;
    }

    .redeem-award-footer-divider {
        display: none;
    }

    /* TSX-Style Header CSS */
    .header {
    /*width: 100%;*/
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background-color 0.2s ease;
    /*margin-bottom: var(--spacing-xl);*/
    }
}

/* TSX-Style Header CSS */
.header {
  /*width: 100%;*/
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.2s ease;
  /*margin-bottom: var(--spacing-xl);*/
}

.header.scrolled {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.header-content {
 /*width: 100%;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--spacing-md);
  gap: 8px;
  position: relative;
  box-sizing: border-box;
}

.logo-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  position: static;
  flex: 1;
}

.logo {
  min-width: 200px;
  width: 200px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /*margin-top:80px;*/
  /*z-index:110;*/
}

.logo img {
  width: 100%;
  height: auto;
  display: inline-block;
}

/*.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-top: 40px;
  margin-bottom: 5px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 102;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}*/

.mobile-menu-toggle {  
    display: flex;    
    flex-direction: column;    
    justify-content: center;    
    align-items: center;    
    gap: 5px;    
    width: 40px;    
    height: 40px;    
    margin-top: 10px;    
    margin-bottom: 25px;    
    padding: 4px;    
    background: transparent;    
    border: none;    
    cursor: pointer;    
    flex-shrink: 0;    
    z-index: 102;    
    border-radius: var(--radius-md) /* 8px */;    
    transition: background-color 0.15s ease;
}


.mobile-menu-toggle:hover {
  background-color: rgba(92, 92, 92, 0.1);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--brand-primary-light);
  outline-offset: 2px;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  /*background-color: #5c5c5c;*/
  background-color: var(--brand-white);
  transition: all 0.15s ease;
  border-radius: 2px;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
  display: none;
  flex-direction: column;
  gap: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  padding: 80px 24px 24px;
  z-index: 100;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  overflow-y: auto;
}

.main-nav.open {
  display: flex;
}

.nav-item-wrapper {
  position: relative;
  display: block;
}

.nav-item {
  font-size: var(--font-size-lg) /* 18px */;
  font-weight: 600;
  color: #5c5c5c;
  text-decoration: none;
  /*padding:16px;*/
  padding: 16px 16px 0px 16px;
  border-radius: var(--radius-md) /* 8px */;
  white-space: nowrap;
  transition: all 0.15s ease;
  position: relative;
  border-bottom: 1px solid #e4e4e7;
  display: block;
  cursor: pointer;
}

.nav-item:last-child {
  border-bottom: none;
}

.nav-item:hover {
  background-color: rgba(92, 92, 92, 0.1);
}

.nav-item:focus-visible {
/*  outline: 2px solid var(--brand-primary);*/
  outline-offset: 2px;
  border-radius: var(--radius-md) /* 8px */;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background-color: #5c5c5c;
  border-radius: 9999px;
}

.nav-item.has-submenu::after {
  content: '▼';
  font-size: 10px;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.nav-item-wrapper.submenu-open .nav-item.has-submenu::after {
  transform: rotate(180deg);
}

.sub-menu-wrap {
  display: none;
  padding-left: 24px;
  /*margin-top: 8px;*/
  margin-top: 0px;
  margin-bottom: 8px;
}

.nav-item-wrapper.submenu-open .sub-menu-wrap {
  display: block;
}

.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sub-menu li {
  margin: 4px 0 0 0;
}

.sub-menu a {
  font-size: var(--font-size-base) /* 16px */;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-gray-gray);
  text-decoration: none;
  padding: 8px 8px;
  display: block;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.sub-menu a:hover {
  background-color: rgba(92, 92, 92, 0.05);
  color: #5c5c5c;
}

.utility-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
 /* z-index: 100;*/
  margin-top: -100px;
  pointer-events: auto;
}

.utility-nav .nav-item {
  padding: 8px 0;
  font-size: 14px;
  border-bottom: none;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  /*display: block;*/
  display: inline-block;
  margin: 0 5px;
}

/*.header-content {
  padding: 0px 24px;
}*/

/* Mobile/Tablet Styles - under 1024px */
@media (max-width: 1023px) {
  .header-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: var(--spacing-md);
    position: relative;
  }
  
  .logo-nav {
    order: 2 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    flex-shrink: 0;
    z-index: 10;
    margin: 0 !important;
  }
  
  .logo {
    position: static;
    transform: none;
  }
  
  .mobile-menu-toggle {
    order: 1 !important;
    display: flex !important;
    visibility: visible !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
    position: relative;
    z-index: 103 !important;
  }
  
 /*.mobile-menu-toggle.open {
    position: fixed;

  }*/

  .mobile-menu-toggle.open {        
    position: fixed !important;        
    top: var(--spacing-md) !important;
    /*left: var(--spacing-md) !important; */
    /* right: auto !important; */        
    z-index: 103 !important;
    /* right: var(--spacing-md); */
    /* float: right !important; */        
    right: 12px !important;
  }
  
  /* Transform hamburger into X when open */
  .mobile-menu-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .mobile-menu-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .main-nav {
    display: none;
  }
  
  .main-nav.open {
    display: flex;
    z-index: 101;
  }
  
  .main-nav.open ~ .utility-nav {
    display: none !important;
  }
  
  .utility-nav {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: absolute !important;
    right: var(--spacing-md) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    flex-shrink: 0;
    z-index: 102;
    width: auto !important;
  }
  
  /* Make ASP.NET Panels transparent on mobile too */
  div[id*="pnl"] {
    display: contents !important;
  }
}

/* Small Mobile Styles - 768px and below */
@media (max-width: 768px) {
  
  /* Make ASP.NET Panels transparent for small mobile too */
  .header-content > div[id*="pnl"],
  .header-content > [id*="pnl"],
  .logo-nav > div[id*="pnl"],
  .logo-nav > [id*="pnl"],
  div[id*="pnlMenu"],
  div[id*="plMenu"] {
    display: contents !important;
  }
  
  .header {
    position: static !important;
  }
  
  .hero-banner {
    margin-top:40px;
  }

  .header-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: var(--spacing-md);
    position: relative;
    gap: var(--spacing-md);
  }
  
  .header-content .logo-nav {
    order: 1 !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .header-content .utility-nav {
    order: 2 !important;
    position: static !important;
    transform: none !important;
    /*width: 100% !important;*/
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 100000 !important;
  }
  
  .header-content .mobile-menu-toggle {
    order: 3 !important;
    position: static !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
  }
  
  .mobile-menu-toggle.open {
    position: fixed !important;
    top: var(--spacing-md) !important;
    /*left: var(--spacing-md) !important;*/
    right: auto !important;
    z-index: 103 !important;
  }
  
  .main-nav.open {
    margin-top: var(--spacing-md);
    z-index: 101 !important;
  }
  
  /* Google Translate dropdown positioning for small mobile */
  #google_translate_element {
    position: relative !important;
    z-index: 99999 !important;
  }
  
  #google_translate_element .goog-te-combo {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 45px !important;
    z-index: 99999 !important;
    min-width: 250px;
    max-width: 90vw;
  }
  
  #google_translate_element .goog-te-combo[size] {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 45px !important;
    z-index: 99999 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  
  #google_translate_element .goog-te-gadget {
    position: relative !important;
    z-index: 99999 !important;
  }
  
  .mobile-menu-toggle {
    z-index: 102 !important;
  }
  
  .mobile-menu-toggle.open {
    z-index: 103 !important;
  }
}

/* Desktop Styles */
@media (min-width: 1024px) {

/*.header {
  min-height:10px;
}*/

  /* Make ASP.NET Panel controls not interfere with flex layout */
  .header-content > div[id*="pnl"],
  .header-content > [id*="pnl"],
  .logo-nav > div[id*="pnl"],
  .logo-nav > [id*="pnl"],
  div[id*="pnlMenu"],
  div[id*="plMenu"] {
    display: contents !important;
  }
  
  /* Ensure mobile toggle and main-nav appear inline */
  .header-content .main-nav,
  .header-content .utility-nav {
    display: flex !important;
  }

  .header-content {
   display: flex !important;
   flex-direction: row !important;
   padding: 0px 24px;
   align-items: center !important;
   flex-wrap: nowrap !important;
   justify-content: flex-start !important;
   gap: 0px;
   width: 100%;
   min-width: 0;
  }
  
  .logo-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 0px;
    margin-left: 20px;
    margin-right: 0px;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 0;
    width: auto;
    max-width: 240px;
    order: 1;
  }
  
  .logo {
    min-width: 222px;
    width: 222px;
    position: static;
    transform: none;
    margin-right: 24px;
    flex-shrink: 0;
  }
  
  .mobile-menu-toggle {
    display: none !important;
    visibility: hidden !important;
  }
  
  .main-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;

    box-shadow: none !important;
    justify-content: flex-start;
    overflow-y: visible;
    flex-shrink: 0;
    z-index: auto;
    order: 2;
  }
  
  .nav-item-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .nav-item {
    font-size: 14px;
    padding: 8px;
    border-bottom: none;
  }
  
  .nav-item.active::after {
    bottom: -10px;
    left: 0;
    right: 0;
  }
  
  .nav-item.has-submenu::after {
    content: '▼';
    font-size: 8px;
    margin-left: 4px;
  }
  
  .sub-menu-wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md) /* 8px */;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    padding: 8px 8px 0px 8px;
    margin-top: 4px;
    min-width: 180px;
    z-index: 1001;
    pointer-events: auto;
  }
  
  .nav-item-wrapper:hover .sub-menu-wrap {
    display: block;
  }
  
  .utility-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;
    margin-left: auto;
    margin-right:20px;
    margin-top:0px !important;
    margin-bottom:0px !important;
    flex-shrink: 0;
    width: auto !important;
    max-width: none !important;
    position: relative !important;
    top: auto !important;
    order: 3;
    /*--- for Google Translate ---*/
    /*z-index: 100;*/
  }
  
  .utility-nav .nav-item {
    padding: 8px;
  }
}

@media (max-width: 1024px) {
  .logo {
    width: 180px;
    min-width: 180px;
    margin-top: 80px;
    min-height: 70px !important;   
    z-index:109;
  }
  .header {
    min-height:20px;
  }
  .utility-nav {
    /*margin-right:20px;
    margin-top:-110px;  */
    margin-right: 10px;        
    margin-top: -120px;        
    padding-bottom: 10px;  
    column-gap: 0;
  }

  .header-content{
    margin-top: 0px;
    margin-bottom: 60px;
  }
  .mobile-menu-toggle{
    margin-right: 98%;
  }

  #menu_button {
    background-color:var(--brand-primary);
    color:#FFFFFF;
  }

}


@media (max-width: 768px) {
  .logo {
    width: 180px;
    min-width: 180px;
    /*margin-top: 80px;*/
    margin-top:0px;
    min-height: 70px !important;   
  }
 .header-content{
    /*margin-top: -40px;
    margin-bottom: 60px;*/
    margin-top: -6px;        
    margin-bottom: 30px; 
  }

  .mobile-menu-toggle{
    margin-right: 90%;
  }
  #menu_button {
    background-color:var(--brand-primary);
	color:#FFFFFF;
    margin: 0 auto !important;
  }
  .utility-nav {
    margin-top:-110px;
  }
}


/*---------------------------------
    FAQS Main Content 
----------------------------------*/
.faqs-main {
  flex: 1;
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-2xl);
}
.faqs-body {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 0px;
  padding-bottom: var(--faqs-spacing-xl);
  padding-top: 16px;
}
.faqs-container {
  background: var(--faqs-white);
  border: 1px solid var(--faqs-gray-light);
  border-radius: var(--faqs-radius-lg);
  /*padding: calc(var(--faqs-spacing-xl) * 2);*/
  padding: var(--spacing-xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--faqs-spacing-xl);
  box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1);  
}

.redeem-button {
  background: var(--faqs-primary);
  color: var(--faqs-white);
  border: none;
  border-radius: var(--faqs-radius-md);
  padding: var(--faqs-spacing-md) var(--faqs-spacing-xl);
  font-size: var(--font-size-base) /* 16px */;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
.redeem-button:hover {
  background: var(--brand-primary-hover) /*  #6F457D */;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.redeem-button:focus-visible {
  outline: 2px solid var(--faqs-primary);
  outline-offset: 2px;
}

/* FAQs Content */
.faqs-content {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--faqs-spacing-xl);
}

/* FAQ Item */
.faq-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* FAQ Question */
.faq-question {
  width: 100%;
  background: var(--faqs-white);
  border: none;
  border-bottom: 1px solid var(--faqs-border);
  padding: var(--faqs-spacing-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.faq-question:hover {
  background: rgba(0, 0, 0, 0.02);
}
.faq-question:focus-visible {
  outline: 2px solid var(--faqs-primary);
  outline-offset: 2px;
}
.faq-question-text {
  flex: 1;
  font-size: var(--font-size-xl) /* 20px */;
  font-weight: 600;
  color: #09090b;
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.faq-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: #09090b;
  transition: transform 0.3s ease;
}
.faq-chevron.open {
  transform: rotate(180deg);
}

/* FAQ Answer */
.faq-answer {
  background: var(--faqs-white);
  padding: var(--faqs-spacing-md) 0;
  animation: fadeIn 0.3s ease;
}
.faq-answer p {
  font-size: var(--font-size-base) /* 16px */;
  font-weight: 400;
  color: var(--faqs-gray-text);
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .redeem-button {
    margin:0 auto;
  }
}

@media (max-width: 768px) {

  .faqs-body {
    padding: 16px;
  }
  .faqs-container {
    padding: 16px;
  }
  .page-title {
    font-size: 28px;
  }
  .faq-question-text {
    font-size: var(--font-size-lg) /* 18px */;
  }
  .faq-answer p {
    font-size: 14px;
  }

}


/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}
.page-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  color: var(--faqs-black);
  margin: 0;
  letter-spacing: -1.2px;
  line-height: 1.25;
}
.redeem-button {
  background: var(--faqs-primary);
  color: var(--faqs-white);
  border: none;
  border-radius: var(--faqs-radius-md);
  padding: var(--faqs-spacing-md) var(--faqs-spacing-xl);
  font-size: var(--font-size-base) /* 16px */;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
.redeem-button:hover {
  background:  var(--brand-primary-hover) /* #8A0733 */;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.redeem-button:focus-visible {
  outline: 2px solid var(--faqs-primary);
  outline-offset: 2px;
}


@media (max-width: 1024px) {
  .page-header {
    /*flex-direction: column;*/
    flex-direction: row;
    align-items: flex-start;
    gap: var(--faqs-spacing-lg);
    /*margin-left: var(--spacing-2xl);*/
    margin-bottom:0px;
  }
  
  .page-title {
    font-size: 36px;
    /*text-align:center;*/
    text-align: left !important;
    /* margin: 0 auto; */ 
    /*margin-left: var(--spacing-xl) !important;*/
  }
  .redeem-button {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {

  .page-title {
    font-size: 28px;
    text-align: left;
  }
}


/*---------------------------------
    Edit Account Page Styles
----------------------------------*/

.edit-account-page {
  min-height: 100vh;
  background: var(--edit-account-gray-bg);
  font-family: var(--edit-account-font-family);
  display: flex;
  flex-direction: column;
}

.edit-account-skip-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.edit-account-skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: var(--spacing-md) 16px;
  background: var(--edit-account-primary);
  color: var(--edit-account-white);
  z-index: 10000;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

.edit-account-header {
  width: 100%;
  background: var(--edit-account-white);
  box-shadow: 0px 2px 4px -2px rgba(0,0,0,0.1), 0px 4px 6px -1px rgba(0,0,0,0.1);
  padding: var(--edit-account-spacing-xl);
  left: 0;
  right: 0;
}
.edit-account-header-content {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit-account-logo-nav {
  display: flex;
  align-items: center;
  gap: var(--edit-account-spacing-xl);
}
.edit-account-logo {
  height: 65px;
  width: 222px;
  flex-shrink: 0;
}
.edit-account-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.edit-account-nav {
  display: flex;
  gap: var(--edit-account-spacing-md);
  align-items: center;
}
.edit-account-nav-item {
  padding: var(--edit-account-spacing-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--edit-account-secondary);
  text-decoration: none;
  border-radius: var(--edit-account-radius-md);
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}
.edit-account-nav-item:hover {
  background: rgba(92,92,92,0.1);
}
.edit-account-nav-item:focus-visible {
  outline: 2px solid var(--edit-account-primary);
  outline-offset: 2px;
}
.edit-account-utility-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.edit-account-user-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--edit-account-radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.edit-account-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-account-main {
  flex: 1;
  width: 100%;
  padding-top: var(--edit-account-spacing-xl);
  padding-bottom: var(--edit-account-spacing-xl);
}
.edit-account-body {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /*padding: var(--edit-account-spacing-xl);*/
  /*padding-bottom: var(--edit-account-spacing-xl);*/
  padding: 0px var(--edit-account-spacing-xl);
}
.edit-account-container {
  background: var(--edit-account-white);
  border-radius: var(--edit-account-radius-lg);
  padding-top: var(--edit-account-spacing-xl);
  padding-right: var(--edit-account-spacing-2xl);
  padding-left: var(--edit-account-spacing-2xl);
  padding-bottom: var(--edit-account-spacing-2xl);
  box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1);
  border: 1px solid var(--faqs-gray-light);
}
.edit-account-header-section {
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}
.edit-account-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.6px;
  line-height: 1.5;
}
.edit-account-form {
  display: flex;
  flex-direction: column;
  gap: var(--edit-account-spacing-2xl);
}
.edit-account-profile-row {
  display: flex;
  align-items: center;
  gap: var(--edit-account-spacing-2xl);
  margin-bottom: var(--edit-account-spacing-xl);
}
.edit-account-avatar-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.edit-account-avatar {
  width: 160px;
  height: 160px;
  border-radius: var(--edit-account-radius-full);
  object-fit: cover;
  margin-right: -32px;
}
.edit-account-avatar-edit {
  position: relative;
  background: var(--edit-account-primary);
  border: 3px solid var(--edit-account-white);
  border-radius: var(--edit-account-radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -32px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: 0px 2px 4px -2px rgba(0,0,0,0.1), 0px 4px 6px -1px rgba(0,0,0,0.1);
}
.edit-account-avatar-edit:focus-visible {
  outline: 2px solid var(--edit-account-primary);
  outline-offset: 2px;
}
.edit-account-profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--edit-account-spacing-sm);
}
.edit-account-profile-name {
  font-size: var(--font-size-xl) /* 20px */;
  font-weight: 600;
  color: var(--edit-account-black);
  margin-bottom: var(--edit-account-spacing-xs);
  border-bottom: 1px solid var(--edit-account-gray-light);
  padding-bottom: var(--edit-account-spacing-xs);
}
.edit-account-profile-username {
  font-size: var(--font-size-base) /* 16px */;
  color: var(--edit-account-secondary);
}
.edit-account-fields {
  display: flex;
  flex-direction: column;
  gap: var(--edit-account-spacing-lg);
}
.edit-account-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--edit-account-black);
  margin-bottom: var(--edit-account-spacing-xs);
  display: flex;
  flex-direction: column;
  gap: var(--edit-account-spacing-xs);
}
.edit-account-input {
  font-size: var(--font-size-base) /* 16px */;
  font-family: var(--edit-account-font-family);
  padding: var(--edit-account-spacing-sm) var(--edit-account-spacing-md);
  border-radius: var(--edit-account-radius-md);
  border: 1px solid var(--edit-account-border);
  background: var(--edit-account-white);
  color: var(--edit-account-black);
  margin-top: var(--edit-account-spacing-xs);
  margin-bottom: var(--edit-account-spacing-xs);
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.edit-account-input:focus-visible {
  /*outline: 2px solid var(--edit-account-primary);
  outline-offset: 2px;*/
  border-color: var(--edit-account-primary);
}
.edit-account-save-btn {
  background: var(--edit-account-primary);
  color: var(--edit-account-white);
  font-size: var(--font-size-base) /* 16px */;
  font-weight: 600;
  border: none;
  /*border-radius: 12px;*/
  border-radius: var(--radius-std);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  /*padding: 12px 24px;*/
  margin-top: var(--spacing-3xl);
  margin-bottom:var(--spacing-3xl);
  cursor: pointer;
  box-shadow: 0px 2px 4px -2px rgba(0,0,0,0.1), 0px 4px 6px -1px rgba(0,0,0,0.1);
  transition: background 0.2s, transform 0.2s;
  width:100%;
}
.edit-account-save-btn:hover {
  background: var(--brand-primary-hover) /* #8A0733 */;
  transform: translateY(-1px);
}
/*.edit-account-save-btn:focus-visible {
  outline: 2px solid var(--edit-account-primary);
  outline-offset: 2px;
}*/
.edit-account-help {
    margin-top: var(--spacing-xl);
    font-size: 14px;
    color: var(--color-black);
    text-align: center;
	margin-bottom:var(--spacing-xl);
}
.edit-account-footer {
  width: 100%;
  background: var(--edit-account-secondary);
  border-top: 6px solid var(--edit-account-primary);
  padding: var(--edit-account-spacing-xl);
  margin-top: auto;
  left: 0;
  right: 0;
}
.edit-account-footer-content {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit-account-footer-left,
.edit-account-footer-right {
  display: flex;
  align-items: center;
  gap: var(--edit-account-spacing-md);
}
.edit-account-footer-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--edit-account-white);
  margin: 0;
  padding: var(--edit-account-spacing-sm);
}
.edit-account-footer-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--edit-account-white);
  text-decoration: none;
  padding: var(--edit-account-spacing-sm);
  border-radius: var(--edit-account-radius-md);
  transition: background 0.2s;
}
.edit-account-footer-link:hover {
  background: rgba(255,255,255,0.1);
}
/*.edit-account-footer-link:focus-visible {
  outline: 2px solid var(--edit-account-white);
  outline-offset: 2px;
}*/
.edit-account-footer-divider {
  color: var(--edit-account-white);
  font-weight: 400;
}

@media (min-width:768px) {
  .md\:w-2\/3 {
     width: 66.666667%;
  }
}


@media (max-width: 1024px) {

  .edit-account-header-content {
    padding: 0 16px;
  }
  .edit-account-body {
    padding: 0px var(--spacing-md);
  }
  .edit-account-container {
    padding: 16px;
  }
  .edit-account-profile-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .edit-account-header {
    padding: 16px;
  }
  .edit-account-logo {
    width: 180px;
    height: 52px;
  }
  .edit-account-logo-nav {
    width: 100%;
    justify-content: space-between;
  }
  .edit-account-nav {
    gap: 8px;
  }
  .edit-account-body {
    padding: 8px;
  }
  .edit-account-container {
    padding: 8px;
  }
  .edit-account-title {
    font-size: var(--font-size-xl) /* 20px */;
  }
  .edit-account-profile-row {
    gap: 16px;
  }
  .edit-account-avatar {
    width: 100px;
    height: 100px;
    margin-right: -16px;
  }
  .edit-account-avatar-edit {
    width: 28px;
    height: 28px;
    margin-right: -16px;
  }
  .edit-account-profile-name {
    font-size: var(--font-size-base) /* 16px */;
  }
  .edit-account-profile-username {
    font-size: 14px;
  }
  .edit-account-label {
    font-size: var(--font-size-xs);
  }
  .edit-account-input {
    font-size: 14px;
    padding:  var(--spacing-xs1) /* 6px */ var(--spacing-md) /* 10px */;
  } 
  .edit-account-save-btn {
    font-size: 14px;
    padding: var(--spacing-md) /* 10px */ var(--spacing-lg) /* 20px */;
  }
  .edit-account-footer {
    padding: 16px;
  }
  .edit-account-footer-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .edit-account-footer-right {
    flex-direction: column;
    gap: 8px;
  }
  .edit-account-footer-divider {
    display: none;
  }
}



/*.order-history-main {
    flex: 1;
    width: 100%;
    padding: var(--order-history-spacing-xl);
    
}*/

.order-history-main {
    flex: 1;
    width: 100%;
    /*padding: var(--order-history-spacing-md);*/
    max-width: 1232px;
    margin: 0 auto;
    /*height: calc(100dvh - 150px);*/

    flex: 1;
    /*padding: var(--spacing-2xl);*/
    margin: 24px auto 24px auto;
    /*border-radius:24px;
    box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1);
    */

}



.order-history-body {
    width: 100%;
    max-width: 1440px;
    margin: var(--spacing-lg) auto;
    /*padding-top: var(--spacing-md);
    padding-right: var(--spacing-xl);
    padding-left: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);*/
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    /*margin-top: var(--spacing-xl);      */
    border: 1px solid var(--faqs-gray-light);
    /*height: calc(100dvh - 100px);*/
    height:auto; 
    background-color: var(--color-white);
    border: 1px solid var(--faqs-gray-light);
}
.order-history-container {
    background: var(--order-history-white);
    border-radius: var(--order-history-radius-lg);
    /*padding: var(--order-history-spacing-xl);*/
    padding-right: var(--spacing-2xl);
    padding-left: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--order-history-spacing-xl);
}
.order-card {
    display: flex;
    flex-direction: column;
    gap: var(--order-history-spacing-lg);
    padding: var(--order-history-spacing-xl);
    border: 1.5px solid var(--order-history-border);
    border-radius: var(--order-history-radius-lg);
    background: var(--order-history-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: var(--order-history-spacing-xl);
}
.order-card:last-of-type {
    margin-bottom: 0;
}
.order-headers {
    display: grid;
    grid-template-columns: 139px 131px 252px 138px 1fr;
    gap: 0;
    width: 100%;
    position: relative;
    padding-bottom: var(--order-history-spacing-md);
}
.order-headers .col-header {
    display: block;
}
.order-summary {
    display: grid;
    grid-template-columns: 139px 131px 252px 138px 1fr;
    gap: 0;
    width: 100%;
    position: relative;
    padding-top: var(--order-history-spacing-sm);
    padding-bottom: var(--order-history-spacing-md);
    /*margin-bottom: var(--order-history-spacing-md);*/
}
.order-summary .col-header {
    display: none;
}
.order-history-headers {    
        display: grid;    
        grid-template-columns: 139px 131px 252px 138px 1fr;    
        gap: 0;    
        width: 100%;    
        position: relative;    
        padding-bottom: var(--order-history-spacing-md);
    }

.order-history-summary {    
     /*display: flex; */
     display: grid;    
     grid-template-columns: 139px 131px 252px 138px 1fr;  
     flex-direction: row;    
     height: fit-content;    
     background-color: white;    
     border: 1px solid var(--color-border);    
     border-radius: var(--radius-lg);    
     padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xs);
     position: sticky;    
     top: calc(113px + var(--spacing-4));    
}
.order-history-summary .col-header {
    display: none;
} 
.order-col {
    display: flex;
    flex-direction: column;
    gap: var(--order-history-spacing-xs);
    padding: var(--order-history-spacing-md);
    min-height: 56px;
    justify-content: center;
}
.col-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--order-history-gray-text);
    white-space: nowrap;
    line-height: 20px;
    margin: 0;
}
.col-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--order-history-content-primary);
    white-space: nowrap;
    line-height: 1.2;
}
.award-value {
    font-family: var(--order-history-font-inter);
    font-weight: 500;
}
.order-value {
    font-family: var(--order-history-font-inter);
    font-weight: 500;
}
.delivery-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--order-history-spacing-sm) 0;
    border-radius: var(--order-history-radius-md);
    background: var(--order-history-white);
}
.online-code {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--order-history-black);
    line-height: 1.2;
}
.order-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--order-history-spacing-xl);
    padding-top: var(--order-history-spacing-sm);
    border-top: 1px solid var(--order-history-border);
}
.product-info {
    display: flex;
    flex-direction: column;
    gap: var(--order-history-spacing-lg);
    padding: var(--order-history-spacing-md) var(--order-history-spacing-md) var(--order-history-spacing-xs);
    justify-content: flex-start;
    width: 100%;
}
.product-name {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: 700;
    color: var(--order-history-content-primary);
    margin: 0 0 var(--order-history-spacing-md) 0;
    line-height: 1.2;
    padding-bottom: 0;
}
.product-quantity {
    font-size: 14px;
    font-weight: 400;
    color: var(--order-history-content-primary);
    margin: 0 0 var(--order-history-spacing-md) 0;
    line-height: 1.2;
}
.visually-hidden { 
    position: absolute !important; 
    width: 1px !important; 
    height: 1px !important; 
    padding: 0 !important; 
    margin: -1px !important; 
    overflow: hidden !important; 
    clip: rect(0, 0, 0, 0) !important; 
    white-space: nowrap !important; 
    border: 0 !important; 
}
.shipping-info {
    overflow-wrap: break-word;
    color: var(--brand-primary) !important;
}

.btn-primary-eCard-success {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    margin: 10px 0px;
    padding: var(--spacing-md);
}

@media (max-width: 1024px) {
    .header-content {
    padding: 0 16px;
    }
    .order-history-body {
    padding: 16px;
    }
    .order-history-container {
    padding: 16px;
    }
    .order-headers {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .order-summary {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .order-details {
    grid-template-columns: 1fr;
    }
    .order-history-headers {        
        display: none;        
    }
    .order-history-summary {    
        display: flex;    
        /* display: grid; */    
        /*grid-template-columns: 139px 131px 252px 138px 1fr; */
        flex-direction: column;    
        height: fit-content;    
        background-color: white;    
        border: 1px solid var(--color-border);    
        border-radius: var(--radius-lg);    
        padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xs);    
        position: sticky;    
        top: calc(113px + var(--spacing-4));
    }    
    .order-history-summary .col-header {
        display: block;
    }    
    .order-col {
        padding: var(--order-history-spacing-sm);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--order-history-spacing-md);
        min-height: auto;
    }     
}

@media (max-width: 768px) {
    .order-history-body {
    padding: 8px;
    }
    .order-history-container {
    padding: 8px;
    }
    .page-title {
    font-size: var(--font-size-xl) /* 20px */;
    }
    .order-headers {
    display: none;
    }
    .order-summary .col-header {
    display: inline-block;
    }
    .order-summary {
    grid-template-columns: 1fr;
    gap: var(--order-history-spacing-sm);
    }
    .order-col {
    padding: var(--order-history-spacing-sm);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--order-history-spacing-md);
    min-height: auto;
    }
    .col-header {
    font-size: var(--font-size-xs);
    display: inline-block;
    }
    .col-value {
    font-size: var(--font-size-xs);
    text-align: right;
    }
    .product-info {
    padding: var(--order-history-spacing-sm);
    }
    .product-name {
    font-size: 14px;
    }
    .product-quantity {
    font-size: var(--font-size-xs);
    }
    .header-content {
    padding: 14px 0px 0px 0px !important;
    }
}


#go_to_top:hover{
background: var(--brand-secondary);
}

#go_to_top {    
    width: 40px;    
    height: 40px;    
    color: #fff;    
    background: var(--brand-primary);   
    position: fixed;    
    left: 50%;    
    margin: -20px 0 0 620px;    
    top: 50%;    
    font-size: 1.65em;
}

#go_to_top i:only-of-type {
    line-height: 40px;
}

.fa, .fas {    
    font-family: 'Font Awesome 5 Free';    
    font-weight: 900;
}

.fa, .fas, .far, .fal, .fad, .fab {    
    -moz-osx-font-smoothing: grayscale;    
    -webkit-font-smoothing: antialiased;    
    display: inline-block;   
    font-style: normal;    
    font-variant: normal;    
    text-rendering: auto;    
    line-height: 1;
}


/* Cart Page Container */

.cart-page {
    min-height: calc(100dvh - 160px); 
    display: flex;
    flex-direction: column;
}

/* ==================== Main Content ==================== */
.cart-main {
    flex: 1;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-xl2) var(--spacing-xl);
}

.cart-body {
    width: 100%;
}

.cart-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    /*padding-top: var(--spacing-md);*/
    /*padding-right: var(--spacing-lg);
    padding-left: var(--spacing-lg);*/
    /*padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);*/
    padding-bottom: var(--spacing-2xl);   
    border-radius: var(--radius-2xl);  
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--faqs-gray-light);
    border-radius: var(--radius-xl) !important;
    background-color: var(--color-background);
    padding-right:var(--spacing-2xl);
    padding-left: var(--spacing-2xl);
}
/* Order Review Header */
.order-review-header {
    display: flex;
    gap: var(--spacing-4);
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.order-review-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.order-review-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
    flex: 1;

}
/* Cart Content Grid */
.cart-content-grid {
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: var(--spacing-xl2);
    /*align-items: start;*/
    align-items: stretch;
}

/* Product Section */
.product-section {
    display:flex;
    flex-direction: column;
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.product-table {
    display: flex;
    flex:1;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.product-table-header {
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.milestone-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.product-row {
    display: grid;
    grid-template-columns: 181px 1fr;
    gap: var(--spacing-xl);
}

.product-image {
    width: 181px;
    height: 146px;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-top: var(--spacing-2);
}

.product-brand {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.product-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.product-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.product-number,
.product-quantity {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.product-number strong,
.product-quantity strong {
    font-weight: var(--font-weight-bold);
}

/* Order Summary Sidebar */
.order-summary {
    display: flex;
    flex-direction: column;
    height: fit-content;
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    position: sticky;
    top: calc(113px + var(--spacing-4));
}

.order-summary-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xl) 0;
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.summary-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.summary-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.summary-address,
.summary-phone {
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
}

.summary-link {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.change-link {
    color: var(--text-primary);
    text-decoration: underline;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-base);
}

.change-link:hover,
.change-link:focus {
    color: var(--brand-primary);
}

/* Cart Actions */
.cart-actions {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: space-between;
}
/* ==================== Responsive Design ==================== */

/* Tablet */
@media (max-width: 1024px) {
    .cart-content-grid {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
    }

    .product-row {
        grid-template-columns: 1fr;
    }

    .product-image {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .summary-row {
        grid-template-columns: 1fr;
        }
    }

/* Mobile */
@media (max-width: 768px) {
    .cart-main {
        padding: var(--spacing-xl) var(--spacing-4);
    }
    .order-review-header {
        flex-direction: column;
        gap: var(--spacing-2);
    }
    .cart-actions {
        flex-direction: column;
    }
    .cart-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        /* padding-top: var(--spacing-md); */
        padding-bottom: var(--spacing-2xl);
        padding-right: var(--spacing-md);
        padding-left: var(--spacing-md);
        border-radius: var(--radius-2xl);
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--faqs-gray-light);
        border-radius: var(--radius-xl) !important;
        margin-left: 8px;
        margin-right: 8px;
    }            
}

/* Focus Styles for Accessibility */
/* *:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
*/
a:-webkit-any-link {
    /*color: -webkit-link;*/
    cursor: pointer;
    text-decoration: none;
    /*color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);*/
}

@media (max-width: 1200px) {    
    .nav-item {
        font-size: 14px; 
        padding: 8px;        
        border-bottom: none;
    }
}


@media (max-width: 1200px) {
    .utility-nav .nav-item {        
         cursor: pointer !important;        
         font-size: 14px;
         z-index: 100;
    }
}


@media (min-width: 1200px) {    
.nav-item {
        font-size: var(--font-size-base) /* 16px */;       
        padding: 8px;        
        border-bottom: none;
    }
}


@media (min-width: 1200px) {
    .utility-nav .nav-item {        
        cursor: pointer !important;        
        font-size: var(--font-size-base) /* 16px */;  
        z-index: 100;
    }
}


.warning-text {
	/*color: var(--color-text-red);*/
    /*color: var(--text-primary);*/
    color: var(--brand-primary);
	text-align: center;
    font-weight: var(--font-weight-semibold);
    /*font-style: italic;*/
}

.fa, .fas, .far, .fal, .fad, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-left: 5px;
}


.checkout-additional-items-page {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--bg-page);
}

/* Main Content */

.content-card {
background-color: var(--background-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--spacing-2xl);
padding-bottom: var(--spacing-xl);
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}

.page-title-wrapper {
border-bottom: 2px solid var(--brand-primary);
padding-bottom: var(--spacing-md);
}

.page-title {
font-size: var(--font-size-4xl);
/*font-weight: var(--font-weight-medium);*/
font-weight: var(--font-size-normal);
color: var(--content-primary);
letter-spacing: -0.6px;
line-height: 1.5;
}

.instruction-text p {
font-size: var(--font-size-base);
color: var(--content-primary);
letter-spacing: -0.4px;
}

/* Product Grid */
.product-grid {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
width: 100%;
}

.product-card {
flex: 1 0 0;
min-width: 220px;
max-width: 278px;
/*height: 300px;*/
height: auto;
border: 1px solid var(--border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}

.product-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

.product-card.selected {
border: 2px solid var(--brand-primary);
box-shadow: var(--shadow-lg);
}

.product-card-content {
background-color: var(--background-primary);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
height: 100%;
padding: var(--spacing-md);
}

.product-card.selected .product-card-content {
border-radius: var(--radius-lg);
}

.product-image-placeholder {
/* background-color: var(--brand-gray);*/
display: flex;
align-items: center;
justify-content: center;
height: 160px; /*192px;*/
width: 100%;
border-radius: var(--radius-sm);
}

.placeholder-text {    
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-extrabold);
color: var(--content-inverse-primary);
text-align: center;
/*width: 204px;*/
letter-spacing: -0.6px;
}

.product-info {
display: flex;
flex-direction: column;
padding-top: var(--spacing-md);
width: 100%;
}

.product-brand {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--content-secondary);
margin-bottom: var(--spacing-xs);
}

.product-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--content-primary);
margin-bottom: var(--spacing-xs);
}

.product-number {
font-size: var(--font-size-xs);
color: var(--content-secondary);
letter-spacing: -0.3px;
}

/* Action Buttons */
.action-buttons {
display: flex;
gap: var(--spacing-lg);
align-items: center;
justify-content: flex-end;
width: 100%;
}
/* Confirm Action Buttons */
.action-buttons-confirm {    
    display: flex;    
    gap: var(--spacing-lg);    
    align-items: center;    
    justify-content: center;
    width: 100%;
    padding-top: var(--spacing-xl);
}
/* Help Message */
.help-message {
border-top: 1px solid var(--border-primary);
padding-top: var(--spacing-lg);
text-align: center;
}

.help-message p {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--content-secondary);
max-width: 460px;
margin: 0 auto;
}

#main-content {
    /*padding: var(--spacing-2xl);*/
    margin: 0px auto 0px auto;
    max-width: 1440px;
    height: auto;
    /*padding-top:12px;*/
    /*padding-right: var(--spacing-2xl);
    padding-left: var(--spacing-2xl);*/
    padding-bottom: var(--spacing-sm);   
    /*min-height: calc(100dvh + 100px);  */
    background-color: var(--color-background-light-gray);
}

@media (max-width: 1024px) {
    .content-card {
      padding: var(--spacing-md);
      padding-bottom: var(--spacing-lg);
    }

    .page-title {
      font-size: var(--font-size-4xl);
      font-weight:var(--font-weight-medium);
    }

    .instruction-text p {
      font-size: var(--font-size-sm);
    }

    .product-grid-section {
        display:flex;
        flex-direction: column; 
        justify-content: space-between;
        width:100%;
    }

    .product-card {        
        /* min-width: 200px; */
        /* max-width: 100%; */        
        height: auto;       
        /* padding-bottom: 24px; */        
        /* gap: 24px; */       
        /* padding: 24px; */        
        margin: 24px;        
        display: flex;        
        flex-direction: column;        
        /* width: 100%; */
    }

    .product-grid {
        justify-content: space-between;        
      gap: var(--spacing-md);
    }

    #main-content {
        padding: 0px var(--spacing-2xl);
        margin: 24px auto 24px auto;
        display:flex;
        flex-direction: column;
        align-items: center;
        /*height: auto;*/
        min-height: calc(100dvh + -150px);
    }

    .product-page-main {
        padding-top: 60px;
    }

    .product-page-content {
        padding: var(--product-page-spacing-3);
    }

    .product-page-product-image {
        min-height: 300px;
        height: auto;
    }

    .product-page-container {
        padding: 0 var(--product-page-spacing-3);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-title {
        font-size: var(--font-size-3xl);
        font-weight:var(--font-weight-medium);
    }

    .product-grid {
        /*gap: var(--spacing-md);*/
        gap: var(--spacing-md);
        align-items: center;
        display: flex;
        justify-content: center;       
    }
            
    #main-content {
        /* padding: var(--spacing-2xl);*/
        padding:0px;
        margin: 0 auto 0px auto;
        /*margin: 24px auto 24px auto;*/
        display:flex;
        flex-direction: column;
        align-items: center;
        height: auto;
    }
    .product-grid-section {
        display:flex;
        flex-direction: column; 
        height: fit-content;
    }
    .product-card {
        /*height: 800px !important; */
        margin: 24px;        
        display: flex;        
        flex-direction: column;        
    }
}

@media (max-width: 480px) {

    .product-card {
      min-width: 150px;
      max-width: 100%;
    }
}



.helper-text p {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-normal);
    margin: 0;
    text-align: center;
}

.helper-text-bold {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-tertiary);
    text-align: center;
}



/* Ensure utility-nav items have pointer cursor and proper styling */
.utility-nav .nav-item {
    cursor: pointer !important;
    text-decoration: none;
    color: #5c5c5c;
    font-weight: 600;
    padding: 8px;
    transition: all 0.15s ease;
}

.utility-nav .nav-item:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* Desktop specific styles */
@media (min-width: 1024px) {
    .utility-nav .nav-item {
        cursor: pointer !important;
        font-size: 14px;
        z-index:100;
    }
    .sub-menu-wrap {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #ffffff;
        border: 1px solid #e4e4e7;
        border-radius: var(--radius-md) /* 8px */;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        padding: 8px 8px 8px 8px;
        /*margin-top: 4px;*/
		margin-top: 0px;
        min-width: 200px;
        z-index: 1001;
        pointer-events: auto;
    }    
}


.page {
    background-color: var(--color-white);
    border-radius: 7px;
    margin: 0px 2px;
    border: solid 1px var(--brand-primary);
}
.page:hover {
    background-color: var(--brand-primary);
    color: var(--color-white);
    cursor: pointer;
}

.page-link {
    color: var(--brand-primary);
}
.page-link:hover {
    color: var(--color-white);
}


.hr_light_gray  {
    /*color: var(--color-text-gray);*/
    border-bottom: solid 1px var(--color-text-gray) 0.3;
}


.account-help-need-help {
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
}

.outer_page_background {
    background-color:var(--color-background-light-gray);
    /*margin-top: -20px;*/
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-2xl);
}
.outer_page_background_2 {
    background-color:var(--color-background-light-gray);
    margin-top: -20px;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
}

.report-page-title {
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--brand-primary);
    margin-top: var(--spacing-2xl);
    margin-right: var(--spacing-2xl);
    margin-left: var(--spacing-2xl);
  }

#cmsResponsiveContainer {
	background-color:var(--background-color-light-gray);
}

.disabled-form-field-background {
    background-color: var(--color-disabled-field);
    cursor: not-allowed;
    margin-bottom: 7px;
}

#ctl00_pnlTopLinks {
    /*max-width: 1420px;*/
    max-width:100%;
    margin: 0 auto;
}



/* ==================== Main Content ==================== */
.order-complete-main {
  flex: 1;
  background-color: var(--color-background) !important;
  border-radius: var(--radius-xl);
  margin-top: var(--spacing-2xl) !important;
}

.order-complete-body {
  padding: var(--spacing-xl);
}

.order-complete-container {
  max-width: 1440px;
  margin: 0 auto 24px auto;
  /*padding: var(--spacing-xl);*/
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Confirmation Card */
.confirmation-card {
  background-color: var(--color-card-background);
  border-radius: var(--border-radius-2xl);
  /*padding: var(--spacing-6);*/
  /*padding-top:var(--spacing-xl);*/
  padding-top:0px;
  padding-right: var(--spacing-2xl);
  padding-left: var(--spacing-2xl);
  padding-bottom: var(--spacing-12);
  /*box-shadow: var(--shadow-lg);*/
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  border-radius: var(--radius-xl);
  /*margin-top: var(--spacing-2xl);*/
}

/* Page Header */
/*.page-header {*/
/*  border-bottom: 2px solid var(--brand-primary);*/
/*  padding-bottom: var(--spacing-3);*/
/*}*/

/*.page-title {
  font-size: var(--font-size-2xl)  24px ;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-black);
  letter-spacing: -0.6px;
  line-height: 1.5;
  margin: 0;
  border-bottom: none !important;
}*/

/* Success Section */
.success-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  align-items: center;
  padding-top: var(--spacing-3xl);
}

.success-title-wrapper {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: var(--spacing-sm);
}

.success-title {
  font-size: var(--font-size-4xl) /* 40px */;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -1px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.success-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.success-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-bottom: var(--spacing-xl);
}

.subtitle-text {
  font-size: var(--font-size-base) /* 16px */;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-black);
  letter-spacing: -0.4px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

.success-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.message-text {
  font-size: var(--font-size-base) /* 16px */;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-black);
  letter-spacing: -0.4px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  flex: 1;
}

/* Action Buttons Section */
.action-buttons-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    padding: 0;
    width: 100%;
}

.action-buttons {
    /* display: flex;
    gap: var(--spacing-6);
    align-items: center;
    justify-content: flex-end;
    max-width: 518px;
    width: 100%;*/
    /*width: 100%;*/
    /*background-color: var(--brand-primary, #982F6A);*/
    border: none;
    border-radius: var(--radius-std);
    padding: 8px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 20px;
    color: var(--content-inverse-primary, white);
    cursor: pointer;
    white-space: nowrap;
    /*box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);*/
    margin-top: var(--spacing-2xl);
}

.btn {
  flex: 1;
  min-height: 56px;
  padding: var(--spacing-2) var(--spacing-6);
  font-size: var(--font-size-base) /* 16px */;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}

.btn-secondary {
  background-color: var(--color-card-background);
  color: var(--brand-primary);
}

.btn-secondary:hover {
  background-color: #fef2f2;
}

.btn-primary {
  background-color: var(--brand-primary);
  color: var(--color-text-light);
}

.btn-primary:hover {
  background-color: #8a0832;
}*/

/* Customer Service Info */
.customer-service-info {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

.info-bold {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-1) 0;
}

.info-text {
  font-weight: var(--font-weight-regular);
  margin: 0;
}

.ecard-submitted-action-buttons {    
     /*border-top: 1px solid #e4e4e7;    
     padding-top: 24px;    
     display: flex;    
     gap: 24px;    
     justify-content: flex-end;    
     max-width: 518px;
     width: 100%;   
     margin-left: auto;    
     box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
     margin: 0 auto;*/
    padding-top: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    justify-content: flex-end;
    max-width: 518px;
    width: 100%;
    margin: 0 auto;
}



/* ==================== Responsive Styles ==================== */

/* Tablet */
@media (max-width: 768px) {

    .success-title {
        font-size: var(--font-size-3xl) /* 32px */;
    }

    .action-buttons {
        flex-direction: column;
        max-width: 100%;
    }

    .btn {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {

  .order-complete-body {
    padding: var(--spacing-4);
  }

  .order-complete-container {
    padding: var(--spacing-4);
  }

  .confirmation-card {
    padding: var(--spacing-4);
    padding-bottom: var(--spacing-xl);
  }

  .success-title {
    font-size: var(--font-size-lg) /* 18px */;
    white-space: normal;
  }

  .subtitle-text,
  .message-text {
    font-size: 14px;
  }
  .page-header {
    flex-direction: column;
    /*flex-direction: row;*/
    align-items: flex-start;
    gap: var(--faqs-spacing-lg);
    /*margin-left: var(--spacing-2xl);*/
    margin-bottom:0px;
   }
}

/* Extra Small Mobile */
@media (max-width: 320px) {
    .success-title {
        font-size: var(--font-size-2xl) /* 24px */;
    }

    .page-title {
        font-size: var(--font-size-xl) /* 20px */;
    }
}



.need-help-btn {
    width: auto;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md) 0;
    /*background: #f7f7f7;*/
    background-color: var(--color-background);
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--input-text-color);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    padding: var(--spacing-xs);
    /*text-decoration: underline;*/
}
.need-help-btn:hover {
    width: auto;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md) 0;
    /*background-color: #f1f1f1;*/
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-primary);
    color: var(--input-text-color);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    padding: var(--spacing-xs);
    text-decoration: underline;
}



/* ContactUs Page Styles */
.contact-us-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background-secondary, #fafafa);
    padding: var(--spacing-2xl);
}

.content-card {
    max-width: 1440px;
    background-color: var(--core-white, white);
    /*padding: 24px;*/
    border-radius: 16px;
    /*box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);*/
    display: flex;
    flex-direction: column;
    gap: 48px;
    border: 1px solid var(--faqs-gray-light);
} 


/* Page Content */


.copy-and-form {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* Left Column - Copy */
.copy {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    flex-shrink: 0;
    padding-top:var(--spacing-4xl);
}


.section-title {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-primary, #e4e4e7);
}

.section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: var(--font-size-xl) /* 20px */;
    line-height: 1.5;
    color: var(--core-black, black);
    margin: 0;
    white-space: nowrap;
}

.section-header {
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: var(--spacing-md);
}
.description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 20px;
    color: var(--content-primary, #09090b);
    margin: 0;
    padding-top: var(--spacing-xl);      
}

.customer-service {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-service h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 20px;
    letter-spacing: 0.16px;
    color: var(--content-primary, #09090b);
    margin: 0;
}

.contact-info {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.contact-info svg {
    flex-shrink: 0;
}

.phone-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phone {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-base) /* 16px */;
    letter-spacing: 0.48px;
    color: var(--content-primary, #09090b);
    margin: 0;
}

.hours {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--content-secondary, #71717a);
    margin: 0;
}

/* Right Column - Form */
.form-container {
    flex: 1;
    min-width: 0;
    background-color:var(--color-background-light-gray,#f3f3f3);
    /*background-color: var(--color-background);*/
    /*padding: var(--spacing-2xl, 48px);*/
    border-radius: var(--border-radius-2xl, 16px);
    /*box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);*/
    border: 1px solid var(--faqs-gray-light);
    /*box-shadow: var(--shadow-xl);*/
    padding: var(--spacing-2xl);
}

.contact-form {
    background-color: var(--background-secondary, #fafafa);
    border: 1px solid var(--border-primary, #e4e4e7);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    border: solid 1px var(--background-secondary, #e4e4e7);
}

.form-row {
    display: flex;
    gap: 48px;
    /*align-items: center;*/
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding-top:var(--spacing-xl)
}

.form-field label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--content-primary, #09090b);
}

#pnlUSState{
    max-width:50%;
}

.required {
    color: #b91c1c;
}

.form-field input,
.form-field textarea {
    width: 100%;
    background-color: var(--background-primary, white);
    border: 1px solid var(--border-primary, #e4e4e7);
    border-radius: var(--radius-std) /* 8px */;
    padding: var(--spacing-md);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 24px;
    color: var(--content-primary, #09090b);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--content-secondary, #71717a);
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--brand-primary) /* #982F6A) */;
}

.form-field textarea {
    resize: vertical;
    min-height: 144px;
}


.divider {
    width: 1px;
    height: 32px;
    background-color: var(--border-primary, #e4e4e7);
    padding: 4px 0;
}


/* ==================== Main Content ==================== */
.order-complete-main {
    flex: 1;
    background-color: var(--color-background);
    height: auto;
    margin-bottom: var(--spacing-2xl) !important;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--faqs-gray-light);     
    border-radius: var(--radius-xl);   
}

.order-complete-body {
    padding: var(--spacing-xl);
}

.order-complete-container {
    max-width: 1440px;
    margin: 0 auto var(--spacing-xl) auto;
    padding: var(--spacing-lg) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Confirmation Card */
.confirmation-card {
    background-color: var(--color-card-background);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    padding-bottom: var(--spacing-12);
    /*box-shadow: var(--shadow-lg);*/
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}


/* Success Section */
.success-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    align-items: center;
    padding-top: var(--spacing-2xl);
}

.success-title-wrapper {
    display: flex;
    gap: 0;
    align-items: flex-start;
    justify-content: center;
}

.success-title {
    /*font-size: var(--font-size-4xl) /* 40px ;*/
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -1px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.success-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}


.success-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.subtitle-text {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
    letter-spacing: -0.4px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

.success-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.message-text {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-black);
    letter-spacing: -0.4px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    flex: 1;
}


/* Customer Service Info */
.customer-service-info {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

.info-bold {
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-1) 0;
}

.info-text {
    font-weight: var(--font-weight-regular);
    margin: 0;
}
.ecard-submitted-action-buttons {
    /*padding-top: var(--spacing-6);*/
    padding: var(--spacing-xl) var(--spacing-lg);        
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    justify-content: center;
    max-width: 518px;
    width: 100%;
    margin: 0 auto;
}


.form-container-white-bg {
    background-color: var(--color-background);
    border-radius: var(--border-radius-2xl, 16px);
    padding: var(--spacing-2xl);
    border: 1px solid var(--faqs-gray-light);
}



/*---------------------------------------------------
    Max Width 1024px Styles
  ---------------------------------------------------*/

    /* Responsive Styles */  
@media (max-width: 1024px) {
    .copy {
        display: flex;
        /*gap: 48px;*/
        gap: 24px;
        flex-shrink: 0;
        padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl);
        padding-top: var(--spacing-2xl);
        width: 100%;
        flex-direction: column;
    }
    .copy-and-form {
      display: flex;
      gap: 48px;
      flex-direction: column;
    }	
    .form-container {
      flex: 1 1;
      /*background-color: var(--color-background-light-gray, #f3f3f3);*/
      background-color: var(--color-background);
      /*padding: var(--spacing-2xl, 48px);*/
      border-radius: var(--border-radius-2xl, 16px);
      display: flex;
      flex-direction: column;
      margin: 0 var(--spacing-2xl);
      min-width: 90%;
      /*box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);*/
      /*border: 1px solid var(--faqs-gray-light);*/
      /*box-shadow: var(--shadow-xl);*/
	  }	   
    .success-title {
        /*font-size: var(--font-size-4xl)/* /* 40px ;*/
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        letter-spacing: -1px;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
    }

}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .body {
        padding: var(--spacing-md);
        height: auto;
    }
    .content-card {
        padding: 16px;
        gap: 24px;
    }
    .copy-and-form {
        gap: 24px;
    }
    .copy {
        width: 100%;
        display: block;
        gap: 48px;
        /*padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl);
        padding-top: var(--spacing-2xl);*/
        padding-left:var(--spacing-xs);
        padding-right: var(--spacing-xs);
        padding-top: var(--spacing-lg);
    }                
    .contact-form {
        padding: 24px;
        gap: 24px;
    }
    .form-row {
        flex-direction: column;
        gap: 24px;
    }
    .section {
        /*display: block; */
        gap: 12px;
        padding-bottom: var(--spacing-2xl);
        /*padding-bottom:var(--spacing-xl);*/
        padding-top: var(--spacing-2xl);
    }            
    .form-container {
    flex: 1 1;
    /*background-color: var(--color-background-light-gray, #f3f3f3);*/
    background-color: var(--color-background);
    border-radius: var(--border-radius-2xl, 16px);
    display: flex;
    flex-direction: column;
    margin:0px;
    /*padding:10px 24px;*/
    padding: var(--spacing-md) var(--spacing-xs);
    width:100%;
    /*box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);*/
    /*border: 1px solid var(--faqs-gray-light);*/
    /*box-shadow: var(--shadow-xl);*/           
    }	   
    .customer-service {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: var(--spacing-xl);
    }         
    .ecard-submitted-action-buttons {
        padding-top: var(--spacing-xl);
        display: flex;
        /* gap: var(--spacing-6); */
        gap:0;
        align-items: center;
        justify-content: flex-end;
        max-width: 518px;
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }          
    .success-title {
        /*font-size: var(--font-size-4xl) 40px ;*/
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        letter-spacing: -1px;
        line-height: 1.5;
        text-align: center;
        white-space: wrap;
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
    }        

    .description {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: var(--font-size-base) /* 16px */;
        line-height: 20px;
        color: var(--content-primary, #09090b);
        margin: 0;
        padding-top: var(--spacing-xl);
    }
}
.submit-button {
    width: 100%;
    background-color: var(--brand-primary) /* #982F6A */;
    border: none;
    border-radius: var(--radius-sm) /* 12px */;
    padding: var(--spacing-sm) var(--spacing-xl) /* 8px 24px */;
    font-family: var(--font-family-secondary) /* 'Montserrat', sans-serif */;
    font-weight: var(--font-weight-semibold) /* 600 */;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 20px;
    color: var(--content-inverse-primary, white);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin-top: var(--spacing-2xl);
    }

.submit-button:hover {
    background-color: var(--brand-primary-hover) /* #8A0733 */ ;
    }

.order-complete-body {
    padding: var(--spacing-xl);
    margin: 0 8px;
}


/*------------------------------------------
    REPORTS Base Styles 
-------------------------------------------*/
#calEndDt_ImgBntCalc {
    height: 20px !important;    
    width: 20px !important;    
    vertical-align: middle  !important;;    
    margin-top: -35px !important;;    
    z-index: 999999 !important;;    
    margin-left: 85% !important;;
}
#calStartDt_ImgBntCalc {
    height: 20px !important;    
    width: 20px !important;    
    vertical-align: middle  !important;;    
    margin-top: -35px !important;;    
    z-index: 999999 !important;;    
    margin-left: 85% !important;;
}
/*------------------------------------------ 
		Main Content
-------------------------------------------*/
.reports-main {
    flex: 1;
    background-color: var(--color-background);
    padding-top: var(--spacing-xl);
}
.reports-body {
    padding: var(--spacing-xl);
}
.reports-container {
    max-width: var(--max-width);
    margin: 0 auto;
}
.reports-card {
    background-color: var(--color-card-background);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}
/* Page Header */
	/*.page-header {
		border-bottom: 2px solid var(--brand-primary);
		padding-bottom: var(--spacing-3);
	}*/
/*------------------------------------------
		Search Section 
------------------------------------------*/
.search-section {
    width: 100%;
}
.search-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}
.search-title {
    font-size: var(--font-size-lg) /* 18px */;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.45px;
    line-height: 1.5;
}
.search-form {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;

}
.search-inputs {
    display: flex;
    gap:  var(--spacing-xl);
    flex: 1;
}
.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.search-input {
    width: 100%;
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xs1) /* 6px */ var(--spacing-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: 24px;
    box-shadow: var(--shadow);
    transition: border-color 0.2s ease;
}
.search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
}
.search-input::placeholder {
    color: var(--color-text-primary);
    opacity: 0.6;
}
.search-buttons {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}


/*------------------------------------------
		Reports Section 
------------------------------------------*/
.reports-section {
    width: 100%;
}
.reports-section-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}
/*.section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.45px;
    line-height: 1.5;
}*/
/*------------------------------------------
		Report Cards Grid 
------------------------------------------*/
.report-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3xl);
}
.report-card {
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    min-height: 228px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
	/*--- Update --*/
	height: 100%;
    max-width: 350px;
    width: 100%;
}
.report-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.report-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
	/*--- Update --*/
	flex: 1;
}
.report-card-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}
.report-card-title {
    font-size: var(--font-size-xl) /* 20px */;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.5;
    /*white-space: nowrap;*/
	/*--- Update --*/
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    width: 100%;	
}
.report-card-description {
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.report-card-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: gap 0.2s ease;
}
.report-card-action:hover {
    gap: var(--spacing-2xl);
}
.action-text {
    font-family: var(--font-family);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-primary);
    line-height: 1.5;
    white-space: nowrap;
}
.action-icon {
    width: 20px;
    height: 20px;
}
/*------------------------------------------
    Main Content 
-------------------------------------------*/
.report-form-main {
    flex: 1;
}
.report-form-body {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-xl);
    padding-top: var(--spacing-2xl);
}
.report-form-container {
    width: 100%;
}
.report-form-card {
    background-color: var(--color-card-background);
    border-radius: var(--border-radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}
/* Page Header */
/*.page-header {
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: var(--spacing-3);
}
.page-title {
    font-size: var(--font-size-2xl) 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-black);
    line-height: 1.5;
    letter-spacing: -0.6px;
}
*/
/*------------------------------------------
		Form Section 
--------------------------------------------*/
.form-section {
    width: 100%;
}

.form-sections {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.form-section-contact-delivery {
    /*flex: 1;*/
    background-color: white;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: var(--spacing-xl) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: 24px;
}


.form-content {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
}
/*------------------------------------------
		Instructions Column 
-------------------------------------------*/
.instructions-column {
    width: 360px;
}
.instructions-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.instructions-title {
    font-size: var(--font-size-xl) /* 20px */;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-black);
    line-height: 1.5;
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--brand-light-gray);
}
.instructions-list {
    list-style-position: outside;
    margin-left: var(--spacing-xl);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: 1.5;
}
.instructions-list li {
    margin-bottom: var(--spacing-md);
}
.instructions-list li:last-child {
    margin-bottom: 0;
}
/*---------------------------------------------
		Form Column 
---------------------------------------------*/
.form-column {
    flex: 1;
}
.form-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-12);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}
.form-card-contact-delivery-info {
    background-color: var(--color-background);
    /*border: 1px solid var(--color-border);*/
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}    
/*------------------------------------------ 
		Form Groups 
-------------------------------------------*/
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.form-label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 20px;
}

.form-label-reminder-date {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 20px;    
    padding-bottom:10px;
}

.form-field-contact-delivery label {    
    font-family: 'Montserrat', sans-serif;    
    font-weight: 600;    
    font-size: 14px;    
    line-height: 20px;    
    color: var(--content-primary, #09090b);    
    white-space: nowrap;
}





/*------------------------------------------
       Select Wrapper 
-------------------------------------------*/
.select-wrapper {
    position: relative;
    width: 100%;
}
.form-select {
    width: 100%;
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: 24px;
    box-shadow: var(--shadow-sm);
    appearance: none;
    cursor: pointer;
    padding-right: 40px;
    transition: all var(--transition-base);
    font-family: var(--font-family);
}
/*.form-select:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-color: var(--brand-primary);
}*/
.select-icon {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}
/*------------------------------------------
		Date Range 
--------------------------------------------*/
.date-range-inputs {
    display: flex;
    gap: var(--spacing-3xl);
}
.date-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.date-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: 20px;
}
.date-input-wrapper {
    position: relative;
    width: 100%;
}
.date-input {
    width: 100%;
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: 24px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    font-family: var(--font-family);
    padding-right: 40px;
}
.date-input:focus {
    outline: none !important /*2px solid var(--brand-primary);*/;
    /*outline-offset: 2px;
    border-color: var(--brand-primary);*/
}
.calendar-icon {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}


/* Checkbox Field */
.checkbox-field {
    display: flex;
    gap: 12px;
    padding-top: var(--spacing-md);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #09090b;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background-color: #18181b;
    border: 1px solid #27272a;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.checkbox-label input[type="checkbox"]:not(:checked) + .checkbox-custom {
    background-color: white;
}

.checkbox-label input[type="checkbox"]:not(:checked) + .checkbox-custom .checkmark {
    display: none;
}

.checkmark {
    width: 24px;
    height: 24px;
}


.input-wrapper,
.select-wrapper {
    position: relative;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    padding: var(--spacing-md);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 24px;
    color: #09090b;
    background-color: white;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-std) /* 8px */;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/*input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
    outline: 2px solid #982F6A;
    outline-offset: 2px;
}*/

.input-wrapper.disabled input,
.select-wrapper.disabled select {
    background-color: #f4f4f5;
    cursor: not-allowed;
}

.select {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.select-wrapper.disabled select {
    cursor: not-allowed;
}



.help-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: var(--font-size-xs);
    line-height: 20px;
    color: #71717a;
    /*margin-top: var(--spacing-md);*/
}

.info-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}



.button-row {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    margin-left: 50%;
    margin-bottom: 24px;
    flex-direction: row;
    padding-left: 20px;
}


.button-row-contact-delivery {    
     display: flex;    
     justify-content: flex-end;    
     width: 50%;    
     margin-left: 50%;    
     margin-bottom: 24px;    
     flex-direction: row;    
     padding-left: 20px;
}


.button-group {
    display: flex;
    gap: 24px;
    flex: 1;
    justify-content: flex-end;
}
.button-group-contact-delivery {     
     display: flex;    
     gap: 24px;    
     flex: 1;
     justify-content:flex-end;
}


.btn-outline-contact-delivery {    
    background-color: var(--background-white);    
    color: var(--brand-primary);    
    border-color: var(--brand-primary);
}

.btn-contact-delivery {    
    flex: 1;    
    padding: var(--spacing-md) 24px;    
    font-weight: 600;    
    font-size: var(--font-size-base) /* 16px */;    
    line-height: 20px;    
    border-radius: var(--radius-std);    
    border: 2px solid;    
    cursor: pointer;    
    transition: all 0.2s;    
    white-space: nowrap;
    width:50%;
}

.btn-primary-contact-delivery {    
     background-color: var(--brand-primary);    
     color: white;    
     border-color: var(--brand-primary);
     width:50%;
}



/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.btn {
    font-family: var(--font-family);
    font-size: var(--font-size-base) /* 16px */;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    padding: var(--spacing-2) var(--spacing-6);
    border-radius: var(--border-radius-xl);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    transition: all var(--transition-base);
    text-decoration: none;
}
.btn-generate {
    background-color: var(--brand-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    width: 100%;
}
.btn-generate:hover {
    background-color: var(--brand-primary-hover);
    box-shadow: var(--shadow-lg);
}
/*.btn-generate:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}*/
/* Help Text */
	/*.help-text {
		text-align: center;
		font-size: 12px;
		font-weight: var(--font-weight-medium);
		color: var(--color-text-secondary);
		line-height: 1.5;
	}
	.help-text p {
		margin: 0;
	}
	.help-text strong {
		font-weight: var(--font-weight-bold);
	}
	*/



.form-card-report {
    background-color: var(--color-background-light-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* Google Translate Globe Icon Styling */
#google_translate_element {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hide the default Google Translate text and branding but keep the select */
#google_translate_element .goog-te-gadget {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0;
}

#google_translate_element .goog-te-gadget > span:not(.goog-te-combo) {
  display: none !important;
}

#google_translate_element .goog-te-gadget-simple {
  background-color: transparent !important;
  border: none !important;
}

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span {
  display: none !important;
}

#google_translate_element .goog-te-gadget-simple img {
  display: none !important;
}

/* Initially hide the select dropdown */
#google_translate_element .goog-te-combo {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  padding: 8px var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: #fff !important;
  box-shadow: var(--shadow-md);
  font-size: 14px;
  cursor: pointer;
  z-index: 1000;
  min-width: 200px;
  transition: opacity 0.2s ease;
}

/* Show dropdown with multiple options when size attribute is set */
#google_translate_element .goog-te-combo[size] {
  display: block !important;
  position: absolute !important;
  max-height: 500px;
  overflow-y: auto;
  opacity: 1 !important;
  pointer-events: auto !important;
  min-height:400px;
}

/* Show dropdown when active */
#google_translate_element.translate-active .goog-te-combo {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Globe icon button */
.translate-globe-icon {
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1001;
  transition: transform 0.15s ease;
  background-color: var(--brand-secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.translate-globe-icon:hover {
  background-color: var(--brand-primary-hover);
  transform: scale(1.1);
}

.translate-globe-icon::before {
  content: "";
}

/* Hide Google Translate banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.VIpgJd-ZVi9od-ORHb {
  display: none !important;
}

body {
  top: 0 !important;
}


/*#ctl00_navMenu_RptrMain_ctl04_pnlGoogleTranslate {
    z-index: 1005 !important;
}
.google_translate_element {
    z-index:1077;
}



.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
.VIpgJd-ZVi9od-ORHb {
    display:none !important;
}
*/

.VIpgJd-ZVi9od-ORHb-OEVmcd {
    left: 0;
    top: 0;
    height: 39px;
    width: 100%;
    z-index: 10000001;
    /* position: fixed; */
    border: none;
    margin: 0px 0px 40px 0px a!important;
    box-shadow: 0 0 8px 1px #999;
}
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
  display: none !important;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
}

.eCard-desc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.contact-delivery-body {
    width: 100%;
    max-width: 1440px;
    margin: var(--spacing-lg) auto;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    /* margin-top: var(--spacing-xl); */
    border: 1px solid var(--faqs-gray-light);
    /* height: calc(100dvh - 100px); */
    height: auto;
    background-color: var(--color-white);
    border: 1px solid var(--faqs-gray-light);
    padding: var(--spacing-2xl);
}
.txt2 {
    max-width: fit-content;
}

/*---------------------------------------------
		Responsive Design 
----------------------------------------------*/
@media (max-width: 1024px) {
    .form-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl2);
    }
    .instructions-column {
        width: 100%;
    }
    .form-sections {
        display: flex;
        gap: 24px;
        margin-bottom: 24px;
        flex-direction: column;
    }
    .main-content-contact-delivery {
        flex: 1;
        padding: var(--spacing-lg);
        max-width: auto;
        margin: 24px auto 24px auto;
        background-color: var(--color-background-light-gray);
    }    
    .catalog-outer {
        margin-left: 8px;
        margin-right: 8px;
    }
}
@media (max-width: 768px) {
    
    .main-content-contact-delivery {
        flex: 1;
        padding: var(--spacing-lg) var(--spacing-sm);
        max-width: auto;
        margin: 0px auto;
        background-color: var(--color-background-light-gray);
    }
    .date-range-inputs {
        flex-direction: column;
        gap: var(--spacing-xl);
    }
    .report-form-body {
        padding-top: 90px;
    }
    .contact-delivery-body {
        width: 100%;
        max-width: 786px;
        margin: 0px auto;
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        border-radius: var(--radius-xl);
        /* margin-top: var(--spacing-xl); */
        border: 1px solid var(--faqs-gray-light);
        /* height: calc(100dvh - 100px); */
        height: auto;
        background-color: var(--color-white);
        border: 1px solid var(--faqs-gray-light);
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    .form-section-contact-delivery {
        /* flex: 1; */
        background-color: white;
        border: 1px solid #e4e4e7;
        border-radius: 16px;
        padding: var(--spacing-md) var(--spacing-md);
        display: flex;
        flex-direction: column;
        /*gap: 24px;*/
        gap: 2px;
    }
    .button-row-contact-delivery {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 24px;
        flex-direction: row;
        margin-left: 0px;
        padding-left: 0px;
        width: 100%;
    }
    .button-group-contact-delivery {
        flex-direction: column;
    }
    .btn-contact-delivery {
        flex: 1;
        padding: var(--spacing-md) 24px;
        font-weight: 600;
        font-size: var(--font-size-base) /* 16px */;
        line-height: 20px;
        border-radius: var(--radius-std);
        border: 2px solid;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        width: 100%;
    }    
    .form-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-width: 0;
        padding-top: var(--spacing-md);
    }    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
        width: 100%;
        padding: var(--spacing-md);
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: var(--font-size-base) /* 16px */;
        line-height: 24px;
        color: #09090b;
        background-color: white;
        border: 1px solid #e4e4e7;
        border-radius: var(--radius-std) /* 8px */;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    }   
    .catalog-outer {
        margin-left: 0px;
        margin-right: 0px;
    }    
    .btn-primary-eCard-success {    
        background-color: var(--btn-primary-bg);    
        color: var(--btn-primary-text);    
        border-color: var(--btn-primary-border);    
        margin: 10px 0px;    
        padding: var(--spacing-md);
    }
    .arrow-icon-float-right {
        float: right;
    }
    .success-section {    
        display: flex;    
        flex-direction: column;    
        gap: var(--spacing-md);    
        align-items: center;    
        padding-top: var(--spacing-2xl);    
        padding-bottom: var(--spacing-2xl);
    }
    .noshowmobile {
        display:none !important;
    }
    .sub-menu a {
        font-size: var(--font-size-lg) /* 18px */;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-gray-gray);
        text-decoration: none;
        padding: 8px 8px;
        display: block;
        border-radius: 6px;
        transition: all 0.15s ease;
      }
    .mobile-menu-toggle.open {       
        position: fixed !important;       
        top: var(--spacing-md) !important;
        /* left: var(--spacing-md) !important; */
        /*right: auto !important; */        
        z-index: 103 !important;        
        /*right: var(--spacing-md);*/
        float: right !important;        
        right: var(--spacing-lg);
    }
}

@media (max-width: 480px) {

    .report-form-body {
        padding: var(--spacing-lg);
    }
    .report-form-card {
        padding: var(--spacing-lg);
        gap: var(--spacing-xl);
    }
    .form-card {
        padding: var(--spacing-xl);
    }
    .noshowmobile {
        display:none !important;
    }
    .catalog-product-image {
        flex: 1;
        padding: var(--catalog-spacing-md);
        display: flex;
        /* align-items: center; */
        justify-content: center;
        overflow: hidden;
    }
    .nav-item {
        font-size: var(--font-size-lg) /* 18px */;
        padding: 8px;
        border-bottom: none;
    }
    .mobile-menu-toggle.open {        
        position: fixed !important;        
        top: var(--spacing-md) !important;
        /*left: var(--spacing-md) !important; */
        /* right: auto !important; */        
        z-index: 103 !important;
        /* right: var(--spacing-md); */
        /* float: right !important; */        
        right: var(--spacing-md);
    }
}

#ctl00_AppBody_txtSendDt_ImgBntCalc{
    height: 20px !important;    
    width: 20px !important;    
    vertical-align: middle  !important;;    
    margin-top: -35px !important;;    
    z-index: 999999 !important;;    
    margin-left: 85% !important;;
}
#ctl00_AppBody_txtReminderDt_ImgBntCalc {
    height: 20px !important;    
    width: 20px !important;    
    vertical-align: middle  !important;;    
    margin-top: -35px !important;;    
    z-index: 999999 !important;;    
    margin-left: 85% !important;;
}

#ctl00_AppBody_divReminder {
    line-height:20px;
}

#ctl00_AppBody_reminderDateContainer {
    padding-top: var(--spacing-xl);
}



/*-------------------------------------------------------

    Edit Account CSS

--------------------------------------------------------*/

.partGlobalFlexFW_EmailGrp {
	background: var(--color-background); 
	border: 1px solid var(--color-gray-light); 
	border-radius: var(--radius-lg); 
	padding: var(--spacing-2xl); 
	margin-bottom: var(--spacing-xl);
}
.partGlobalFlexFWgrid {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
	gap: var(--spacing-2xl);
}
.partGlobalFlexFWWkEmailCol {
	display: flex; 
	flex-direction: column; 
	gap: var(--spacing-sm); 
	font-size: var(--font-size-sm); 
	font-weight: var(--font-weight-semibold); 
	color: var(---color-text-primary);
}
.partGlobalFlexFWWkEmailPrimary {
	font-size: var(--font-size-base) /* 16px */; 
	font-weight: var(--font-weight-normal); 
    padding: var(--spacing-md); 
	border-radius: var(--radius-md); 
	border: 1px solid var(--color-gray-light); 
	background: var(--color-background); 
	color: var(--color-text-gray); 
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.partGlobalFlexFW_AddressGrp {
	background: var(--color-background); 
	border: 1px solid var(--color-gray-light); 
	border-radius: var(--radius-lg); 
	padding: var(--spacing-2xl); 
	display: flex; 
	flex-direction: column; 
	gap: var(--spacing-xl);
}
.partGlobalFlexFWFieldLabel {
	display: flex; 
	flex-direction: column; 
	gap: var(--spacing-sm); 
	font-size: var(--font-size-sm); 
	font-weight: var(--font-weight-semibold); 
	color: var(--color-text-primary);
  }
.partGlobalFlexFWFieldInput {
	font-size: var(--font-size-base); 
	font-weight: var(--font-weight-normal); 
	padding: var(--spacing-md); 
	border-radius: var(--radius-md); 
	border: 1px solid var(--color-gray-light); 
	background: var(--color-background); 
	color: var(--color-text-gray); 
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}








/*------------------------------------------------------------


    defaultFlexFW.aspx Page


---------------------------------------------------------------*/


/* ==================== Main Content ==================== */
       /* .outer_page_background {
            width: 100%;
            display: block;
        }*/
        
        .reports-main {
            /*flex: 1;
            background-color: var(--color-background);
            padding-top: var(--spacing-xl);*/
            flex: 1;
            padding-top:  var(--spacing-xl) /* var(--spacing-6)*/;
            padding-bottom:  var(--spacing-xl) /* var(--spacing-6)*/;
            margin-left: var(--spacing-xl) !important;
            margin-right: var(--spacing-xl) !important;
            max-width: none !important;
            width: auto !important;            
        }

        .reports-body {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding: 0px  var(--spacing-xl);
        }

        .reports-container {
            background: var(--color-background);
            border-radius: var(--radius-std);
            padding-top: var(--spacing-xl) /* var(--spacing-6)*/;
            padding-right: var(--spacing-2xl);
            padding-left: var(--spacing-2xl);
            padding-bottom: var(--spacing-2xl);
            border: 1px solid var(--color-gray-light);
            box-shadow: var(--shadow-lg) /* 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1) */;
            max-width: 1440px;
        }

        /* Page Header */
       /* .page-header {
            border-bottom: 2px solid var(--brand-primary);
            padding-bottom: var(--spacing-md);
            margin-bottom: var(--spacing-2xl);
        }

        .page-title {
            font-size: var(--font-size-4xl); 
            font-weight: var(--font-weight-regular);
            color: var(--color-text-input);
            letter-spacing: -0.6px;
            line-height: 1.5;
        }*/

        /* Search Section */
        .search-section {
            width: 100%;
        }

        .search-card {
            background-color: var(--color-background);
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-lg);
            padding:  var(--spacing-xl) /* var(--spacing-6)*/;;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xl) /* var(--spacing-6)*/;
        }

        .search-title {
            font-size: var(--font-size-lg) /*18px*/;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-input);
            letter-spacing: -0.45px;
            line-height: 1.5;
        }

        .search-form {
            display: flex;
            gap:  var(--spacing-xl) /* var(--spacing-6)*/;
            align-items: flex-start;
        }

        .search-inputs {
            display: flex;
            gap:  var(--spacing-xl) /* var(--spacing-6)*/;
            flex: 1;
        }

        .input-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .search-input {
            width: 100%;
            background-color: var(--color-background);
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            padding: var(--spacing-xs1) /* 6px */ var(--spacing-md);
            font-family: var(--font-family);
            font-size: var(--font-size-base) /* 16px */;
            font-weight: var(--font-weight-regular);
            color: var(--color-text-input);
            line-height: 24px;
            box-shadow: var(--shadow);
            transition: border-color 0.2s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--brand-primary);
        }

        .search-input::placeholder {
            color: var(--color-text-input);
            opacity: 0.6;
        }

        .search-buttons {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
        }

        /* Buttons */
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-md);
            padding: var(--spacing-sm) var(--spacing-xl);
            font-family: var(--font-family-secondary);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            line-height: 20px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: var(--shadow);
            white-space: nowrap;
            /*background-color: var(--brand-primary);
            color: var(--color-white);*/
        }

        .btn-clear {
            background-color: var(--color-background);
            color: var(--brand-primary);
            border: 2px solid var(--brand-primary);
        }

        .btn-clear:hover {
            background-color: #fef2f2;
        }

        .btn-search {
            background-color: var(--brand-primary);
            color: var(--color-text-light);
            border: 2px solid var(--brand-primary);
        }

        .btn-search:hover {
            background-color: var(--brand-primary-hover);
        }

        .btn-icon {
            width: 20px;
            height: 20px;
        }

        /* Reports Section */
        .reports-section {
            width: 100%;
        }

        .reports-section-card {
            background-color: var(--color-background);
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-lg);
            padding:  var(--spacing-xl) /* var(--spacing-6)*/;
            display: flex;
            flex-direction: column;
            gap:  var(--spacing-xl) /* var(--spacing-6)*/;
            margin-bottom: var(--spacing-2xl);
        }

        .section-title {
            font-size: var(--font-size-lg) /* 18px */;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-input);
            letter-spacing: -0.45px;
            line-height: 1.5;
        }

        /* Report Cards Grid */
        .report-cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-2xl);
        }

        .report-card {
            background-color: var(--color-background);
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-lg);
            padding:  var(--spacing-xl) /* var(--spacing-6)*/;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap:  var(--spacing-xl) /* var(--spacing-6)*/;
            box-shadow: var(--shadow-md);
            min-height: 228px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .report-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .report-card-content {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .report-card-header {
            border-bottom: 1px solid var(--color-gray-light);
            padding-bottom: var(--spacing-md);
        }

        .report-card-title {
            font-size: var(--font-size-xl) /* 20px */;
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-input);
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .report-card-description {
            font-size: var(--font-size-base) /* 16px */;
            font-weight: var(--font-weight-regular);
            color: var(--color-text-gray);
            line-height: 1.5;
        }

        .report-card-action {
            display: flex;
            align-items: center;
            gap:  var(--spacing-xl) /* var(--spacing-6)*/;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            transition: gap 0.2s ease;
        }

        .report-card-action:hover {
            gap: var(--spacing-xl2);
        }

        .action-text {
            font-family: var(--font-family);
            font-size: var(--font-size-base) /* 16px */;
            font-weight: var(--font-weight-semibold);
            color: var(--brand-primary);
            line-height: 1.5;
            white-space: nowrap;
        }

        .action-icon {
            width: 20px;
            height: 20px;
        }

/* ==================== Responsive Styles ==================== */
        @media (max-width: 1300px) {
            .report-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 1200px) {
            .report-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .reports-main {
                margin-left: 12px !important;
                margin-right: 12px !important;
            }
        }
        @media (max-width: 840px) {
            .report-cards-grid {
                grid-template-columns: repeat(1, 1fr);
            }
        }        

        @media (max-width: 768px) {

            .reports-main {
                margin-left: 4px !important;
                margin-right: 4px !important;
            }

            .reports-body {
                padding-left: var(--spacing-sm);
                padding-right: var(--spacing-sm);
            }
            
            .reports-container {
                padding: var(--spacing-4);
            }

            .search-form {
                flex-direction: column;
            }

            .search-inputs {
                flex-direction: column;
            }

            .search-buttons {
                width: 100%;
            }

            .btn {
                flex: 1;
            }

            .report-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
          /*  .header-content {
                padding: var(--spacing-4);
            }
*/
            .reports-body {
                padding-left: var(--spacing-sm);
                padding-right: var(--spacing-sm);
            }
            
            .reports-container {
                padding: var(--spacing-md);
            }

            .search-card {
                padding: var(--spacing-4);
            }

            .reports-section-card {
                padding: var(--spacing-4);
                gap: var(--spacing-4);
            }
            
            .report-cards-grid {
                gap: var(--spacing-4);
            }
            
            .report-card {
                padding: var(--spacing-4);
                gap: var(--spacing-4);
                min-height: auto;
            }
            
            .report-card-title {
                font-size: var(--font-size-lg) /* 18px */;
            }
            
            .report-card-description {
                font-size: var(--font-size-sm) /* 14px */;
            }
        }



        /*--------------------------------------------------------


            REPORT CSS MOVED TO COMPANY CSS 


        ----------------------------------------------------------*/
        .report-form-card {
    background-color: var(--color-background);
    border-radius: var(--radius-std);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
    border: 1px solid var(--color-gray-light);
}
.report-form-body {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-xl);
}
.report-form-card {
    background-color: var(--color-background);
    border-radius: var(--radius-std);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
    border: 1px solid var(--color-gray-light);
}
.form-card-report {
    background-color: var(--color-background-light-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

#ctl00_AppBody_calStartDt_ImgBntCalc {
    height: 20px !important;
    width: 20px !important;
    vertical-align: middle !important;
    margin-top: -35px !important;
    z-index: 999999 !important;
    margin-left: 85% !important;
}
#ctl00_AppBody_calEndDt_ImgBntCalc {
    height: 20px !important;
    width: 20px !important;
    vertical-align: middle !important;
    margin-top: -35px !important;
    z-index: 999999 !important;
    margin-left: 85% !important;
}
#ctl00_AppBody_ddlFormat {
	background-color: var(--color-background);
	border-radius: var(--radius-md);
}

.form-select {
    width: 100%;
    background-color: var(--color-background) /* #FFF */;
    border: 1px solid var(--color-gray-light) /* var(--color-border)  #e4e4e7 */;
    border-radius: 		var(--radius-md) /* var(--border-radius-lg)  8px */;
    padding: 			var(--spacing-md)/*var(--spacing-3)  12px */;
    font-size: 			var(--font-size-base) /* 16px */;
    font-weight: 		var(--font-weight-normal) /* var(--font-weight-regular)  400 */;
    color: 				var(--color-text-gray) /* var(--color-text-secondary)  #71717a */;
    line-height: 		var(--line-height-normal) /* 24px */;
    box-shadow: 		var(--shadow-sm) /* var(--shadow-sm) --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); */ ;
    appearance: none;
    cursor: pointer;
    padding-right: 40px;
    transition: all 	var(--transition-normal) /* var(--transition-base) .3s ease */;
    font-family: 		var(--font-family-secondary) /* var(--font-family) 'Montserrat', sans-serif */ ;
}
.form-select:active {
    border: 1px solid var(--brand-primary) !important;
    box-shadow: none;
}
.form-select:hover {
    border: 1px solid var(--brand-primary) !important;
    box-shadow: none;
}
.form-select:focus {
    border: 1px solid var(--brand-primary) !important;
    box-shadow: none;
    outline: none !important;
}
.form-select:focus-within {
    border: 1px solid var(--brand-primary) !important;
    box-shadow: none;
    outline: none !important;   
}
.form-select:focus-visable{
    border: 1px solid var(--brand-primary) !important;
    box-shadow: none;
    outline: none !important; 
}
.select-icon {
    position: absolute !important;
    right: var(--spacing-md) !important /*var(--spacing-3)*/;
	top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.clear-button {
    background-color: var(--background-primary) /* white */;
    border: 2px solid  var(--brand-primary) /* #a6093d */;
    border-radius:  var(--radius-std) /* 12px */;
    padding: var(--spacing-sm) var(--spacing-xl) /* 8px 24px */;
    font-family: var(--font-family-secondary) /* 'Montserrat', sans-serif */;
    font-weight: var(--font-weight-semibold) /* 600 */;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 20px;
    color: var(--content-primary, #09090b);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow) /* 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1) */;
  }
.clear-button:hover {
    /*background-color: rgba(166, 9, 61, 0.05);*/
    /* Destructures the hex color to apply a new alpha */
    background-color: rgb(from var(--clear-button-transparent) r g b / 0.1);
  }  
.error-button {
    /*background-color: var(--background-primary)*/ /* white *//*;*/
    background-color: rgb(from var(--clear-button-transparent) r g b / 0.1);
    border: 2px solid  var(--brand-primary) /* #a6093d */;
    border-radius:  var(--radius-std) /* 12px */;
    padding: var(--spacing-sm) var(--spacing-xl) /* 8px 24px */;
    font-family: var(--font-family-secondary) /* 'Montserrat', sans-serif */;
    font-weight: var(--font-weight-semibold) /* 600 */;
    font-size: var(--font-size-base) /* 16px */;
    line-height: 20px;
    color: var(--content-primary, #09090b);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow) /* 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1) */;
  }
.taxnotetext {
	font-weight: var(--font-weight-normal) !important;
	font-style: italic;
	color: red !important;
}




/*-----------------------------

    INTEGRATED NAVIGATION 

------------------------------*/

@media (min-width: 1024px) {
    .header-content .main-nav, .header-content .utility-nav {        
        display: flex !important;
        /* flex-wrap: nowrap; */        
        align-content: center;
        /* margin-left: 10px; */        
        width: 100%;        
        justify-content: flex-end;        
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .utility-nav {        
        /* display: flex !important; */        
        /* flex-direction: row !important; */
        /* align-items: center !important; */
        /* justify-content: flex-end; */        
        margin-left: auto;        
        margin-right: 20px;        
        margin-top: 0px !important;        
        margin-bottom: 0px !important;        
        flex-shrink: 0;        
        width: auto !important;        
        max-width: none !important;        
        position: relative !important;        
        top: auto !important;        
        order: 3;
        /* z-index: 100; */
    }
}

@media (min-width: 1024px) {
    .header-content .main-nav, .header-content .utility-nav {        
        display: flex !important;
        /* 
        flex-wrap: nowrap; */        
        align-content: center;
        /* margin-left: 10px; */        
        width: 100%;        
        justify-content: flex-end;        
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .main-nav {        
        display: flex !important;        
        flex-direction: row !important;        
        flex-wrap: nowrap !important;        
        align-items: center;        
        gap: 8px;        
        position: static !important;        
        top: auto !important;        
        left: auto !important;        
        width: auto !important;        
        max-width: none !important;        
        height: auto !important;        
        background-color: transparent !important;        
        padding: 0 !important;        
        margin: 0 !important;        
        box-shadow: none !important;        
        justify-content: flex-start;        
        overflow-y: visible;        
        flex-shrink: 0;        
        z-index: auto;        
        order: 2;
    }
}


a:focus, a:hover {    
    color: var(--brand-primary-hover) /* #23527c */;    
    text-decoration: underline;
}
a {    
    color: var(--brand-primary) /* #337ab7 */;    
    text-decoration: none;
}




#go_to_top:hover, #menu_button, #shopping_button:hover>a .count, .banner:hover [class*=button_type_].bg_dark_color, .bg_scheme_color, .button_type_3.active .count.type_2, .button_type_3:hover .count.type_2, .camera_wrap .camera_next:hover, .camera_wrap .camera_pag .camera_pag_ul .cameracurrent, .camera_wrap .camera_prev:hover, .count, .first_letter_2>.fl, .flex-control-nav .flex-active, .flex-direction-nav a:hover, .info_block_type_2:hover [class*=icon_wrap], .main_menu>.current_click>a, .main_menu>li.current>a, .main_menu>li:hover>a, .sw_button.googlemap, .tp-bullets.simplebullets.navbar .bullet.selected, .tp-bullets.simplebullets.navbar .bullet:hover, .tp-bullets.simplebullets.round .bullet.selected, .tp-bullets.simplebullets.round .bullet:hover, .ui-slider:after, .vertical_list_type_2 li:before, .vertical_list_type_4 li:before, .vertical_list_type_8 li:before, [class*=button_type_].bg_cs_hover:hover, [class*=button_type_].bg_dark_color:hover {    
    background: var(--brand-primary) /* #195072 */;
}

.count {    
    position: absolute;    
    width: 18px;    
    height: 18px;    
    line-height: 18px;    
    color: #fff;
    font-size: .8em;    
    right: 4px;    
    top: 14px;
}
.circle, .tw_buttons li:before, .vertical_list_type_2 li:before, .vertical_list_type_3 li:before {    
    -webkit-border-radius: 50%;    
    -moz-border-radius: 50%;    
    border-radius: 50%;
}

.fa, .fas {    
    font-family: 'Font Awesome 5 Free';    
    font-weight: 900;
}

.fa, .fas, .far, .fal, .fad, .fab {    
    -moz-osx-font-smoothing: grayscale;    
    -webkit-font-smoothing: antialiased;    
    display: inline-block;   
    font-style: normal;    
    font-variant: normal;    
    text-rendering: auto;    
    line-height: 1;
}



.fa-shopping-cart:before {
    content: "\f07a"
}
.fa-shopping-cart {
    color: var(--brand-primary);
}
.wish_count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: .8em;
	right: 254px;
    top: -9px;
    padding-left: 5px;
    background-color: var(--color-black);
}
.goal_count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: .8em;
    right: 220px;
    top: -9px;
    padding-left: 5px;
    background-color: var(--color-black);    
}
.cart_count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: .8em;
    right: 181px;
    top: -9px;
    z-index: 2;
    padding-left: 5px;
    background-color: var(--color-black);
}

#ctl00_navMenu_linkWishlist {
        margin: 0 5px;
}
#ctl00_navMenu_linkGoalProduct {
    margin: 0 5px;
}
#ctl00_navMenu_linkCart {
    margin: 0 5px;
}
.points_color {
	color: var(--color-white);
}
.fa-shopping-cart {
    color: var(--color-white);
    padding-right: 10px;
}




#go_to_top {
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--brand-primary);
    position: fixed;
    left: 50%;
    margin: -20px 0 0 720px;
    top: 50%;
    font-size: 1.65em;
    border: solid 3px var(--brand-primary-hover);
    border-radius: var(--radius-md);
}
#go_to_top:hover {
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--brand-primary-hover);
    position: fixed;
    left: 50%;
    margin: -20px 0 0 720px;
    top: 50%;
    font-size: 1.65em;
    border: solid 3px var(--brand-primary);
    border-radius: var(--radius-md);
}


.wish_count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: .8em;
    right: 303px;
    top: 0px;
    padding-left: 5px;
    background-color: var(--color-black);
}

.cart_count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: .8em;
    right: 227px;
    top: 0px;
    z-index: 2;
    padding-left: 5px;
    background-color: var(--color-black);
}
.goal_count {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: .8em;
    right: 270px;
    top: 0px;
    padding-left: 5px;
    background-color: var(--color-black);
}

/*--------------------------------------------------------

    INTEGRATED - MY ACCOUNT - REACT BADGES SECTION

--------------------------------------------------------*/

.myaccountbadgecontainer {
	font-size: var(--font-size-5xl) /* 3rem = 48px */;
	line-height: 1;
	text-align: center;
	background-color: var(--background-color) /* rgb(255 255 255 / var(--tw-bg-opacity)) */;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 160px;
	height: 160px;
	margin-top: var(--spacing-md) /* 10px */;
	margin-bottom: var(--spacing-md) /* 10px */;
	margin-left: 5px;
	margin-right: 5px;
	position: relative;
}
.myaccountbadgebox {
    /* padding: var(--spacing-lg); */
    /* background-color: #e1e1e1 var(--color-white); */
    margin: 0px;
    /* border: 1px solid var(--color-gray-light); */
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) 0px;
}
.myaccountinnerbadgebox {
    padding: 10px;
	background-color: var(--background-color) /* rgb(255 255 255 / var(--tw-bg-opacity)) */;
    border-radius: 4px;
    min-height: 250px;
}
.myaccountinnerbadgeboxlabel {
	font-weight: var(--font-weight-semibold) /* 600 */;
	/*font-size: var(--font-size-lg)  18px */;
	font-size: var(--font-size-sm) /* 14px */;
 	margin-top: var(--spacing-md) /* 10px */;	
    padding: var(--spacing-sm) 0px;
    text-align: left;
    color: var(--text-primary);
}
.myaccountbadgeparentcontainer {
	display: flex;
	flex-wrap: wrap;
	vertical-align: baseline;
	padding: 0.25rem;
	justify-content: center;
	padding: 0.25rem;
	margin: 0.25rem;
	margin-left: 8px /* 0.5rem */;
}
#ctl00_AppBody_pnlBadges {
    background: var(--color-background);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-lg);
    padding: 0px var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}