/* =======================================================
   1. FONTS IMPORT (From your source)
   ======================================================= */
@font-face { font-family: 'Altone Semi Bold'; src: url('https://freesitecrew.com/wp-content/uploads/2025/12/Altone-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Altone Regular'; src: url('https://freesitecrew.com/wp-content/uploads/2025/12/Altone-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Altone Medium'; src: url('https://freesitecrew.com/wp-content/uploads/2025/12/Altone-Medium-1.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Altone Light'; src: url('https://freesitecrew.com/wp-content/uploads/2025/12/Altone-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Altone Bold'; src: url('https://freesitecrew.com/wp-content/uploads/2025/12/Altone-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }

/* =======================================================
   2. GLOBAL THEME & MAIN BACKGROUND
   ======================================================= */
:root {
    --brand-purple: #7406C6;
    --brand-blue: #3B82F6;
    --text-dark: #1f2937; /* Dark color for text on white */
}

body, 
.app-main, 
.main-body, 
.lagom-layout-top {
    font-family: "Altone Regular", sans-serif !important;
    background-image: linear-gradient(180deg, #7406C6 0%, #000000 80%) !important;
    background-attachment: fixed !important;
    background-color: #000000 !important;
    /* Global text is white for the main background area */
    color: #ffffff !important;
}

/* Global Headings (outside panels) */
h1, h2, h3, h4, h5, h6,
.main-header-title,
.section-title {
    font-family: "Altone Bold", sans-serif !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Global Text Reset (outside panels) */
p, span, li, .text-muted, .breadcrumb li a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.menu.menu-primary {
    display: none !important;
}

@media only screen and (max-width: 600px) {

.cart-item-title-main {

    color: white !important;
}

}








/* =======================================================
   3. NAVIGATION (Transparent)
   ======================================================= */
.app-nav, 
.app-nav-header, 
.main-header,
#main-menu {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-menu span{
    color: black !important;

    /* background-color: var(--brand-purple) !important; */

}

.dropdown-menu-item.active > a {
  /* background-color: #5D337C !important; */

}

.menu-primary > li > a,
.top-nav > li > a,
.navbar-brand,
.app-nav-toggle {
    color: #ffffff !important;
    
    font-family: "Altone Semi Bold", sans-serif !important;
}

.menu-primary .btn.btn-primary {

background-color: var(--brand-purple) !important;

}

/* Mobile Toggle */
.navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* =======================================================
   4. PANELS & CARDS (WHITE BACKGROUND, DARK TEXT)
   ======================================================= */
/* Changed to solid white background */
.panel, 
.section .panel, 
.tile, 
.order-summary, 
.modal-content,
.main-sidebar {
    /* background: #ffffff !important; White */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Subtle dark border */
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    color: var(--text-dark) !important; /* Base dark text color for inside panels */
}

/* Clear internal backgrounds */
.panel-heading, .panel-body, .panel-footer {
    background: transparent !important;
}

/* ---- Force Dark Text Inside Panels ---- */
/* Overriding global white text rules specifically inside containers */

/* Headers inside panels */
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
.panel .panel-title, 
.modal-content h4, .modal-content h5,
.cart-heading .row div {
    color: #000000 !important;
}

/* Body text inside panels */
@media (min-width: 600px) {
.panel p,
.panel span:not(.summary-actions span),
.panel li,
.modal-content p,
.modal-content span:not(.summary-actions span) {
    color: var(--text-dark) !important;
    opacity: 1 !important;
}



}




@media (max-width: 600px) {
  .panel p:not(.cart-item-title-main),
  .panel span:not(.cart-item-title-main),
  .panel li:not(.cart-item-title-main),
  .modal-content p:not(.cart-item-title-main),
  .modal-content:not(.cart-item-title-main) {
      color: var(--text-dark) !important;
      opacity: 1 !important;
  }
}


/* Fix labels inside panels to be dark gray */
.panel .control-label, 
.panel label,
.field-label {
    color: #4b5563 !important; /* Dark gray for labels */
    font-family: "Altone Semi Bold", sans-serif !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 1 !important;
    margin-bottom: 6px !important;
    text-shadow: none !important;
}

/* =======================================================
   5. FORMS & INPUTS
   ======================================================= */
.form-control,
select.form-control {
    background-color: #f3f4f6 !important; /* Light gray bg */
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important; /* Dark text */
    border-radius: 8px !important;

    font-family: "Altone Medium", sans-serif !important;
}

.form-control:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(116, 6, 198, 0.2) !important; /* Purple Glow */
    border-color: var(--brand-purple) !important;
}

/* =======================================================
   6. BUTTONS (White Button, Purple Text)
   ======================================================= */
/* Primary Actions */
.btn-primary, 
#btnCompleteOrder, 
.btn-checkout,
#checkout {
    background-color: #ffffff !important;
    color: var(--brand-purple) !important;
    font-family: "Altone Bold", sans-serif !important;
    border: 1px solid var(--brand-purple) !important; /* Purple border for definition on white bg */
    border-radius: 8px !important;
    padding: 12px 24px !important;
    transition: all 0.3s !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.btn-primary:hover,
#btnCompleteOrder:hover,
#checkout:hover {
    background-color: var(--brand-purple) !important; /* Invert on hover */
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(116, 6, 198, 0.3) !important;
}

/* Secondary Buttons */
.btn-default, .btn-outline {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: var(--text-dark) !important;
}


.btn-default, .btn-outline span {
    
    color: var(--text-dark) !important;
}

/* =======================================================
   7. SELECTION BOXES (Feature Cards style)
   ======================================================= */
.panel-check {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    color: var(--text-dark) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.panel-check:hover {
    border-color: var(--brand-purple) !important;
    transform: translateY(-2px) !important;
}

/* Active State */
.panel-check.checked {
    background: #f9f5ff !important; /* Very light purple tint */
    color: var(--brand-purple) !important;
    border-color: var(--brand-purple) !important;
    box-shadow: 0 4px 10px rgba(116, 6, 198, 0.15) !important;
}

.panel-check.checked .check-content,
.panel-check.checked .check-content span {
    color: var(--brand-purple) !important;
    font-weight: 700 !important;
}

/* =======================================================
   8. ORDER SUMMARY SPECIFICS (Dark Text adjustments)
   ======================================================= */
.order-summary .item-name {
    color: #6b7280 !important; /* Gray text */
}
.order-summary .item-value {
    color: var(--brand-purple) !important; /* Purple value text */
    font-family: "Altone Bold", sans-serif !important;
    font-weight: 700 !important;
}
.order-summary .price-total,
#totalDueToday {
    color: #000000 !important; /* Black total price */
    text-shadow: none !important;
}

.main-footer {
    background: #210238 !important;
}


.alert-danger:not(.alert-primary) {
    background-color: #8A3EC9 !important;
    border-color: #FF9B00 !important;
    color: white !important;
}

.banner-primary, .search-box-primary {
    background: #fff !important;
}


/* =======================================================
   9. MOBILE STICKY FOOTER FIX
   ======================================================= */

/* Target the mobile sticky summary container */
.order-summary-mob {
    background: #ffffff !important; /* Ensure the bar itself is white */
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1) !important;
}

/* Force the button inside the mobile footer to be Purple */
.order-summary-mob .btn,
.order-summary-mob .btn-checkout,
.order-summary-mob #checkout {
    background-color: #7406C6 !important; /* Purple Background */
    color: #ffffff !important;           /* White Text */
    border: 1px solid #7406C6 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* Active/Hover State for Mobile Button */
.order-summary-mob .btn:hover,
.order-summary-mob .btn:active,
.order-summary-mob .btn:focus {
    background-color: #5a0499 !important; /* Darker Purple */
    color: #ffffff !important;
    border-color: #5a0499 !important;
}

.summary-actions .btn-checkout span,
.summary-actions .btn-checkout span i {
    color: #000 !important;
}

/* Hover */
.summary-actions .btn-checkout:hover span,
.summary-actions .btn-checkout:hover span i {
    color: #fff !important;
}

.fas.fa-test.lm.lm-basket {
    color: white !important;
}

.fas.fa-test.lm.lm-basket:hover {
    color: #bc91dc !important;
}

.badge-primary-faded {
  background-color: #0000004a !important;

}

.price-note {
    font-weight: 600;
    padding: 5px 0px;
}