/* ========================================
   HARDHAT TRADIE - MAIN CSS
   ======================================== */

/* ========================================
   CSS VARIABLES - GLOBAL STYLE CONFIGURATION
   ======================================== */
   :root {
    /* HEADER COLORS - GLOBAL ACROSS ALL MAIN HTML FILES */
    --Header_Background_Colour: #ffffff;                    /* Main header background */
    --Logo_Text_Colour: #352c35;                           /* Logo text color */
    --Header_Button_BG_Colour: #faad18;                    /* Header Button background color */
    --Header_Button_Text_Colour: #352c35;                  /* Header Button text color */
    
    /* BODY COLORS */
    --Body_Background_Colour: #ffffff;                     /* Main page background */
    --Body_Text_Colour: #352c35;                           /* Main text color */
    
    /* FOOTER COLORS */
    --Footer_Background_Colour: #e6e6cf;                   /* Footer background */
    --Footer_Text_Colour: #352c35;                         /* Footer text color */
    
    /* SEARCH HERO COLORS */
    --Search_Hero_Background_Colour: #e6e6cf;              /* Search section background */
    --Search_Hero_Text_Colour: #352c35;                    /* Search section text */
    --Search_Hero_Pill_BG_Colour: #ffffff;                 /* Search form background */
    --Search_Hero_Pill_Text_Colour: #e29100;               /* Search form text */
    --Search_Hero_Button_BG_Colour: #faad18;               /* Search button background */
    --Search_Hero_Button_Text_Colour: #ffffff;             /* Search button text */
    
    /* SUBBIE RESULTS (SR) COLORS */
    --SR_Header_Text_Colour: #32404e;                      /* Subbie results header text colour */
    --SR_Header_BG_Colour: #32404e;                        /* Subbie results header background colour */
    --SR_Subbie_Name_Colour: #32404e;                      /* Subbie name colour */
    --SR_Col_Colour: #352c35;                              /* Rates, areas and trades colour */
    
    /* CARD COLORS */
    --Card_Background_Colour: #f5f5ed;                     /* Card background */
    --Card_Header_Text_Colour: #352c35;                    /* Card header text */
    --Card_Icon_Colour: #352c35;   						   /* Card icon Colour */
    --Card_Text_Colour: #352c35;                           /* Card text color */
    --Card_Button_Colour: #faad18;                         /* Card button color */
    --Card_Button_Text_Colour: #352c35;                    /* Card button text color */
    --Card_Border_Colour: #faad18;                        /* Card border color - Orange */
    --Card_Header_Colour: #352c35;                        /* Card header text color */
    
    /* CARD STYLING VARIABLES */
    --Card_Shadow: rgba(0, 0, 0, 0.2);                    /* Medium black shadow for cards */
    --Card_Border: rgba(255,175,0,0.8);                     /* Black border for cards */
    --Card_Hover_Lift: 5px;                                /* How much cards lift up on hover */
    --Card_Hover_Scale: 1.02;                               /* How much cards scale up on hover */
    
    /* REVEAL BUTTON COLORS */
    --Reveal_Button_BG_Colour: #faad18;                    /* Reveal button background */
    --Reveal_Button_Text_Colour: #352c35;                  /* Reveal button text */
    
    /* SHADOW AND OVERLAY VARIABLES */
    --Shadow_Light: rgba(0, 0, 0, 0.1);                   /* Light shadow for cards and elements */
    --Shadow_Medium: rgba(0, 0, 0, 0.2);                  /* Medium shadow for hover effects */
    --Shadow_Heavy: rgba(0, 0, 0, 0.3);                   /* Heavy shadow for modals and overlays */
    --Overlay_Light: rgba(0, 0, 0, 0.5);                  /* Light overlay for modals */
    --Overlay_Heavy: rgba(0, 0, 0, 0.8);                  /* Heavy overlay for full-screen modals */
    --Focus_Glow: rgba(0, 0, 0, 0.1);                 /* Orange focus glow color */
    
    /* ERROR AND SUCCESS COLORS */
    --Error_Colour: #d68089;                               /* Error/danger color for delete buttons */
    --Success_Colour: #34bc53;                             /* Success color for success messages */
    --Warning_Colour: #d9d902;                             /* Warning color for warning messages */
    
    /* HAMBURGER MENU COLORS - MOBILE NAVIGATION */
    --Hamburger_BG_Colour: #32404e;                       /* Hamburger menu background color */
    --Hamburger_Text_Colour: #faad18;                     /* Hamburger menu text color */
}

/* ========================================
   HEADER STYLES - GLOBAL ACROSS ALL MAIN HTML FILES
   ======================================== */

/* ========================================
   HEADER CONTAINER - FIXED POSITION
   ======================================== */
.page-header {
    position: fixed;                                        /* Fixed at top of page */
    top: 0;                                                /* Position at top */
    width: 100%;                                           /* Full width */
    z-index: 1000;                                        /* Above other content */
    background: var(--Header_Background_Colour);           /* Header background color */
    border-bottom: none; /* No border */
}

/* ========================================
   HEADER DIRECT LAYOUT 
   ======================================== */
.page-header {
    display: flex;                                         /* Flexbox layout */
    justify-content: space-between;                        /* Space between logo group and button group */
    align-items: center;                                   /* Vertical center */
    height: 50px;                                        /* Reduced height to compensate for padding */
    padding: 15px 0;                                      /* Top/bottom 15px, no horizontal padding */
}

.header-container {
    max-width: 1200px;                                    /* Same max-width as main container */
    margin: 0 auto;                                        /* Center the header content */
    padding: 0 0 0 120px;                                  /* 100px left padding only */
    display: flex;                                         /* Flexbox for header content */
    justify-content: space-between;                        /* Space between logo and nav */
    align-items: center;                                   /* Vertical center */
    width: 100%;                                           /* Full width */
}

/* Logo group - left side */
.nav-logo {
    display: flex;                                         /* Flexbox for logo and text */
    align-items: center;                                   /* Vertical center */
    gap: 25px;                                            /* Same spacing as buttons */
    flex-shrink: 0;                                       /* Don't shrink */
}

/* ========================================
   LOGO AND LOGO TEXT - DIRECT ON HEADER
   ======================================== */
.logo {
    height: 50px;                                          /* Logo height */
    width: auto;                                           /* Maintain aspect ratio */
}

.logo-text {
    font-size: 2.2rem;                                    /* Logo text size */
    font-weight: 900;                                      /* Extra bold */
    color: var(--Logo_Text_Colour) !important;            /* Logo text color - force override */
    letter-spacing: 1px;                                   /* Letter spacing */
    text-align: left;                                      /* Left align logo text */
}

/* Override general heading styles for logo text specifically */
span.logo-text,
.nav-logo .logo-text,
#logo-text-bli,
#logo-text-li {
    color: var(--Logo_Text_Colour) !important;            /* Force logo text color - most specific */
}

/* ========================================
   NAVIGATION MENU - TOP RIGHT
   ======================================== */
.nav-menu {
    display: flex !important;                              /* Flexbox layout - force override */
    align-items: center !important;                        /* Vertical center - force override */
    gap: 25px !important;                                 /* Space between menu items - force override */
    flex-shrink: 0 !important;                            /* Don't shrink - force override */
    padding-right: 0 !important;                          /* Remove right padding - force override */
    position: static !important;                           /* Static positioning to align with container */
    top: auto !important;                                  /* Remove top positioning */
    right: auto !important;                                /* Remove right positioning */
}

/* ========================================
   NAVIGATION LINKS - BUTTON STYLE
   ======================================== */
.nav-link {
    color: var(--Header_Button_Text_Colour);               /* Button text color */
    text-decoration: none;                                 /* No underline */
    padding: 12px 16px;                                    /* Reduced by 20% from 15px 20px */
    border-radius: 10px;                                   /* Reduced by 20% from 12.5px */
    font-weight: 600;                                      /* Semi-bold text */
    font-size: 0.88rem;                                    /* Reduced by 20% from 1.1rem */
    backdrop-filter: blur(10px);                          /* Blur effect */
    width: 144px;                                          /* Reduced by 20% from 180px */
    height: 44px;                                          /* Reduced by 20% from 55px */
    display: inline-flex;                                  /* Flexbox for perfect centering */
    align-items: center;                                   /* Vertical center */
    justify-content: center;                               /* Center content in button */
    box-sizing: border-box;                                /* Include padding in width calculation */
    line-height: 1.2;                                      /* Tighter line height for 2 lines */
    white-space: nowrap;                                   /* Prevent text from wrapping */
}

/* ========================================
   LOGIN BUTTON STYLES
   ======================================== */
.btn-login {
    background: var(--Header_Button_BG_Colour);            /* Button background color */
    color: var(--Header_Button_Text_Colour);               /* Button text color */
    border: 2px solid transparent;                         /* Transparent border */
}



/* ========================================
   ADMIN BUTTON STYLES
   ======================================== */
.btn-admin {
    background: var(--Header_Button_BG_Colour) !important; /* Same background as other header buttons - force override */
    color: var(--Header_Button_Text_Colour) !important;    /* Same text color as other header buttons - force override */
    border: 2px solid transparent !important;              /* Transparent border - force override */
    width: 180px !important;                               /* Increased width for all buttons - force override */
    height: 55px !important;                               /* Reduced height by 15px to fit in header - force override */
    display: inline-flex !important;                       /* Flexbox for perfect centering - force override */
    align-items: center !important;                        /* Vertical center - force override */
    justify-content: center !important;                    /* Center content in button - force override */
    box-sizing: border-box !important;                     /* Include padding in width calculation - force override */
    line-height: 1.2 !important;                           /* Tighter line height for 2 lines - force override */
    white-space: nowrap !important;                        /* Prevent text from wrapping - force override */
}



/* ========================================
   HEADER MANAGEMENT SYSTEM - BLI vs AL
   ======================================== */
/* BLI = Before Login Interface */
.header-bli {
    display: block;                                        /* Visible by default */
}

/* AL = After Login Interface */
.header-li {
    display: none;                                         /* Hidden by default */
}

/* Show headers when needed */
.header-bli.show {
    display: block;                                        /* Show BLI header */
}

.header-li.show {
    display: block;                                        /* Show AL header */
}

/* Hide headers when needed */
.header-bli.hide {
    display: none;                                         /* Hide BLI header */
}

.header-li.hide {
    display: none;                                         /* Hide AL header */
}

/* ========================================
   USER MENU - AFTER LOGIN
   ======================================== */
.user-menu {
    display: flex;                                         /* Flexbox layout */
    align-items: center;                                   /* Vertical center */
    gap: 20px;                                            /* Space between items */
}

/* ========================================
   LOGOUT BUTTON STYLES
   ======================================== */
.logout-btn {
    background: var(--Header_Button_BG_Colour);            /* Same background as other header buttons */
    color: var(--Header_Button_Text_Colour);               /* Same text color as other header buttons */
    padding: 12px 16px;                                    /* Reduced by 20% from 15px 20px */
    border: none;                                          /* No border */
    border-radius: 10px;                                   /* Reduced by 20% from 12.5px */
    cursor: pointer;                                       /* Hand cursor */
    font-size: 0.88rem;                                    /* Reduced by 20% from 1.1rem */
    font-weight: 600;                                      /* Semi-bold text */
    transition: all 0.3s ease;                            /* Smooth transitions */

    width: 144px;                                          /* Reduced by 20% from 180px */
    height: 44px;                                          /* Reduced by 20% from 55px */
    display: inline-flex;                                  /* Flexbox for perfect centering */
    align-items: center;                                   /* Vertical center */
    justify-content: center;                               /* Center content in button */
    box-sizing: border-box;                                /* Include padding in width calculation */
    line-height: 1.2;                                      /* Tighter line height for 2 lines */
    white-space: nowrap;                                   /* Prevent text from wrapping */
}


/* ========================================
   BODY STYLES - PAGE STRUCTURE AND LAYOUT
   ========================================
   
   This section controls the overall page structure, including the body element,
   page wrapper, and main content area. It sets up the foundation for all content
   and ensures proper spacing from the fixed header.
   ======================================== */
body {
    background: var(--Body_Background_Colour);              /* Use CSS variable for page background */
    margin: 0;                                              /* Remove default browser margins */
    padding: 0;                                             /* Remove default browser padding */
    font-family: 'Inter', sans-serif;                       /* Modern, readable font family */
    line-height: 1.6;                                       /* Comfortable line spacing for readability */
    color: var(--Body_Text_Colour);                         /* Use CSS variable for text color */
    min-height: 100vh;                                      /* Ensure body takes full viewport height */
}

.page-wrapper {
    min-height: 100vh;                                      /* Ensure wrapper takes full viewport height */
    display: flex;                                           /* Use flexbox for vertical layout */
    flex-direction: column;                                  /* Stack children vertically */
    background: var(--Body_Background_Colour);               /* Apply background color to wrapper */
}

.page-body {
    flex: 1;                                                 /* Take up remaining space after header */
    padding-top: 105px;                                      /* Space for fixed header (50px + 15px + 15px) + 25px extra */
    padding-bottom: 0;                                       /* No bottom padding needed */
    position: relative;                                      /* Establish positioning context for children */
    min-height: calc(100vh - 200px);                        /* Ensure minimum height accounting for header */
}

.container {
    max-width: 1200px;                                      /* Maximum width for content on large screens */
    margin: 0 auto;                                          /* Center content horizontally */
    padding: 0 20px;                                        /* Add horizontal padding for mobile spacing */
}

/* Remove all padding from container when inside hero-search-container on index page */
.index-page .hero-search-container .container {
    padding: 0 !important;
}

/* Floating Elements Container */
.floating-content {
    width: 100%;                                             /* Take full width of parent */
    height: 100%;                                            /* Take full height of parent */
    position: relative;                                      /* Establish positioning context for floating children */
    background: transparent;                                 /* No background - content shows through */
}

/* ========================================
   SEARCH HERO SECTION - MAIN SEARCH INTERFACE
   ========================================
   
   The search hero is the primary interface element on the homepage. It contains
   the main search form and is designed to be visually prominent and user-friendly.
   This section includes the hero text, search form, and integrated search results.
   ======================================== */
.search-hero-text {
    background: transparent;                                 /* No background - shows page background */
    padding: 15px 0;                                         /* Vertical padding only - reduced for closer header spacing */
    margin-bottom: 40px;                                     /* Space below hero text before search form */
    border-radius: 20px;                                     /* Rounded corners for modern appearance */
    transition: all 0.4s ease;                               /* Smooth transitions for all property changes */
    position: relative;                                      /* Establish positioning context for absolute child */
    z-index: 1;                                              /* Ensure proper layering above background */
    text-align: center;                                      /* Center all text content */
}

/* Hero layout container inside search-hero-text */
.search-hero-text .hero-layout {
    display: flex !important;
    align-items: center;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    flex-direction: row;
    background: rgba(0, 255, 0, 0.1);
    padding: 20px;
}

.search-hero-title {
    color: var(--Body_Text_Colour) !important;               /* Use body text color */
    font-size: 3.5rem;                                       /* Large, prominent title size */
    font-weight: 800;                                       /* Extra bold weight for emphasis */
    margin-bottom: 1.5rem;                                  /* Space below title before subtitle */
    text-align: center;                                      /* Center the title text */
    /* Removed text shadow for cleaner appearance */
}

.search-hero-subtitle {
    color: var(--Body_Text_Colour);                          /* Use body text color */
    font-size: 1.5rem;                                       /* Medium size for supporting text */
    text-align: center;                                       /* Center the subtitle text */
    opacity: 0.9;                                             /* Slightly transparent for visual hierarchy */
    font-weight: 400;                                         /* Normal weight for readable description */
}

/* ========================================
   APP STORE IMAGE - ABSOLUTE POSITIONING
   ======================================== */

/* Hero search container - relative positioning for absolute child */
.hero-search-container {
    position: relative;
    margin-bottom: 20px;
    display: block;                         /* remove flex so hero centers to page */
}

.store-images-column {
    position: absolute;                     /* take out of normal flow */
    top: 0;
    left: 95px;                             /* move closer to the centered hero */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* Ensure the search hero takes the remaining horizontal space */
/* no flex child anymore; container not needed for layout */

.hero-search-form { width: 100%; }

/* Target ONLY the search hero container */
.index-page .hero-form-container {
    /* container removed from DOM; rule kept empty intentionally */
}

/* Force remove outer padding from hero-search-form on index page - KEEP inner padding */
.index-page .hero-search-form {
    padding: 0 !important;
    flex: 0 0 auto;                 /* prevent stretching */
    max-width: 760px;               /* shrink horizontally */
    width: 100%;
    margin: 0 auto;                 /* center horizontally */
}

/* Inner padding container */
.hero-search-form-inner {
    padding: 50px 50px 20px 50px;
}

/* App store image - absolute positioning outside container */
.app-store-image-absolute {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: auto;
    padding: 0;
    width: auto;
    max-width: none;
    margin: 0 auto 10px;
    text-align: center;
}

/* IOSPLAY container: reduce bottom padding to 5px */
.iosplay-container { padding-bottom: 0; }

/* IA image - positioned below IOSPLAY */
.ia-image-below {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    padding: 0;
    width: auto;
    max-width: none;
    margin: 10px auto 10px;
    clear: both;
}

/* Minimal store card: no border, background, or shadow */
.store-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
    display: inline-block;
}

.store-card img {
    display: block;
    margin: 0 auto;
}

/* Round corners for IOSPLAY only */
.iosplay-container .store-image {
    border-radius: 12px;
}

.ia-image-below .store-image {
    height: 112px;
    width: auto;
    display: block;
}

/* Store image styling */
.store-image {
    height: 450px;
    width: auto;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    display: block;
}

.store-image:hover {
    transform: none;
    box-shadow: none;
}

/* Tablet and smaller desktop responsiveness for app store image */
@media screen and (max-width: 1400px) {
    .app-store-image-absolute {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        margin: 20px auto;
        text-align: center;
    }
    
    .ia-image-below {
        top: auto;
        margin-top: 10px;
    }
    
    .store-image {
        height: 350px;
    }
    
    .hero-search-form {
        padding: 40px 30px 20px 30px;
    }
}

/* ========================================
   SEARCH FORM WITH BADGES - LAYOUT
   ======================================== */

/* Container for search form with side badges */
.search-form-with-badges {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    background: rgba(255, 0, 0, 0.1);
    padding: 20px;
}

/* Left side badges */
.badge-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    flex-shrink: 0;
    background: rgba(0, 255, 0, 0.1);
    padding: 10px;
}

/* Right side badges */
.badge-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
    flex-shrink: 0;
    background: rgba(0, 0, 255, 0.1);
    padding: 10px;
}

/* Search form takes remaining space */
.hero-search-form {
    flex: 1;
    background: var(--Search_Hero_Background_Colour);        /* Use search hero background color */
    padding: 50px 50px 20px 50px;                           /* Top, Right, Bottom, Left - reduced bottom for results integration */
    border-radius: 20px;                                     /* Rounded corners for modern appearance */
    box-shadow: 0 8px 32px var(--Shadow_Medium);             /* Subtle shadow for depth */
    transition: all 0.4s ease;                               /* Smooth transitions for all property changes */
    position: relative;                                      /* Establish positioning context */
    z-index: 2;                                              /* Ensure proper layering above background */
    backdrop-filter: blur(10px);                            /* Blur effect for modern glass appearance */
    border: 1px solid rgba(255, 255, 255, 0.2);             /* Subtle border for definition */
    max-width: calc(100% - 300px);                           /* Shrink by 300px to make room for image */
    margin: 0 auto;                                          /* Center the form */
}

/* Individual app badge */
.app-badge {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
}

.app-badge:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Badge image styling */
.badge-image {
    height: 80px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
    display: block;
    max-width: 100%;
    object-fit: contain;
    background: #f0f0f0;
    border: 2px solid #ddd;
}

.badge-image:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.hero-search-container {
    margin-bottom: 20px;                                     /* Reduced spacing since search results are now integrated */
}

.hero-search-form {
    background: var(--Search_Hero_Background_Colour);        /* Use search hero background color */
    padding: 50px 50px 20px 50px;                           /* Top, Right, Bottom, Left - reduced bottom for results integration */
    border-radius: 25px;                                     /* Large rounded corners for pill appearance */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);      /* Smooth, professional transition animation */
    position: relative;                                       /* Establish positioning context for children */
    z-index: 1;                                               /* Ensure form appears above background content */
}

/* Advanced Search Button */
.advanced-search-btn {
    background: var(--Header_Button_BG_Colour);               /* Orange background matching header buttons */
    color: var(--Header_Button_Text_Colour);                  /* Light cream text for contrast */
    border: none;                                             /* No border initially */
    border-radius: 15px !important;                           /* Rounded corners matching other search buttons */
    padding: 18px 35px !important;                            /* Same padding as other search buttons for consistency */
    font-size: 1.1rem !important;                             /* Same font size as other search buttons */
    font-weight: 700 !important;                               /* Same font weight as other search buttons */
    cursor: pointer;                                           /* Hand cursor on hover */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition matching other buttons */
    display: inline-flex;                                      /* Flexbox for icon and text alignment */
    align-items: center;                                       /* Center items vertically */
    gap: 8px;                                                  /* Space between icon and text */
    margin: 0 15px !important;                                 /* Same margin as other search buttons */
}

.advanced-search-btn:hover {
    background: transparent !important;                       /* Remove background on hover for outline effect */
    border: 2px solid var(--Header_Button_BG_Colour) !important; /* Add orange border on hover */
    color: var(--Header_Button_BG_Colour) !important;        /* Change text to orange on hover */
    transform: translateY(-3px) !important;                  /* Lift button up slightly on hover */
}

.advanced-search-section {
    text-align: center;                                       /* Center the advanced search section */
    margin-top: 20px;                                         /* Space above from main search form */
}

.hero-search-form:hover {
    transform: translateY(-8px);                              /* Lift entire search form up on hover for depth */
}

/* Search form text colors - Consistent theming for all form elements */
.hero-search-form label {
    color: var(--Search_Hero_Text_Colour);                    /* Use search hero text color */
    font-weight: 600;                                         /* Semi-bold weight for readability */
    font-size: 1.1rem;                                        /* Consistent font size with other elements */
    margin-bottom: 8px;                                       /* Space below label before input */
    display: block;                                            /* Block display for proper spacing */
}

.hero-search-form input,
.hero-search-form select {
    color: var(--Search_Hero_Text_Colour);                    /* Use search hero text color */
}

.hero-search-form input::placeholder {
    color: var(--Search_Hero_Text_Colour);                    /* Use search hero text color */
    opacity: 0.7;                                             /* Slightly transparent for visual hierarchy */
}

/* Search form input styling - Unified appearance for all form inputs */
.search-main-input,
.filter-select,
.filter-input,
.rate-input {
    background: var(--Search_Hero_Pill_BG_Colour) !important; /* White background for all inputs */
    color: var(--Search_Hero_Text_Colour) !important;         /* Use search hero text color */
    border-radius: 12px !important;                           /* Rounded corners for modern appearance */
    padding: 16px 20px !important;                            /* Generous padding for comfortable input */
    font-size: 1.1rem !important;                             /* Readable font size */
    width: 100% !important;                                   /* Full width within container */
    box-sizing: border-box !important;                        /* Include padding in width calculation */
    transition: all 0.3s ease !important;                     /* Smooth transitions for all changes */
}

.search-main-input:focus,
.filter-select:focus,
.filter-input:focus,
.rate-input:focus {
    outline: none !important;                                 /* Remove default browser focus outline */
    /* Removed border-color to eliminate orange highlight */
    transform: translateY(-2px);                              /* Lift input slightly when focused */
}

/* Search form buttons container - center and space from pill */
.filter-actions {
    text-align: center;                                       /* Center all buttons horizontally */
    margin-top: 25px;                                         /* Space above from form inputs (increased from 20px) */
    margin-bottom: 30px;                                      /* Space below for search results integration */
}

/* Search form buttons - Primary action buttons for search functionality */
.search-main-btn,
.clear-btn {
    background: var(--Search_Hero_Button_BG_Colour) !important;    /* Use search hero button background color */
    color: var(--Search_Hero_Button_Text_Colour) !important;       /* Use search hero button text color */
    border: none !important;                                  /* No border initially */
    border-radius: 15px !important;                           /* Rounded corners for modern appearance */
    padding: 18px 35px !important;                            /* Generous padding for comfortable clicking */
    font-size: 1.1rem !important;                             /* Readable font size */
    font-weight: 700 !important;                              /* Bold weight for emphasis */
    cursor: pointer !important;                                /* Hand cursor on hover */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth, professional transition */
    margin: 0 15px !important;                                /* Horizontal spacing between buttons */

    position: relative;                                        /* Establish positioning context for pseudo-elements */
    overflow: hidden;                                          /* Hide pseudo-element overflow for animation */
}

.search-main-btn::before,
.clear-btn::before {
    content: '';                                               /* Create pseudo-element for animation */
    position: absolute;                                        /* Position relative to button */
    top: 0;                                                    /* Start from top of button */
    left: -100%;                                               /* Start from left edge (hidden) */
    width: 100%;                                               /* Full button width */
    height: 100%;                                              /* Full button height */

    transition: left 0.5s;                                     /* Smooth left movement animation */
}

.search-main-btn:hover::before,
.clear-btn:hover::before {
    left: 100%;                                                /* Move to right edge on hover (revealed) */
}

.search-main-btn:hover,
.clear-btn:hover {
    background: var(--Search_Hero_Button_BG_Colour) !important;     /* Maintain search hero button background on hover */
    opacity: 0.9 !important;                                   /* Slightly transparent for visual feedback */
    transform: translateY(-4px) !important;                    /* Lift button up on hover for depth */
}

/* ========================================
   CARD STYLES - CONTENT CARDS AND COMPONENTS
   ========================================
   
   This section defines the styling for all card components including service cards,
   about cards, and other content containers. Cards provide visual separation and
   organization for different types of content throughout the site.
   ======================================== */
.about-card,
.service-card {
    background: var(--Card_Background_Colour);                 /* White background for all cards */
    padding: 40px;                                             /* Generous padding for content breathing room */
    border-radius: 25px;                                       /* Large rounded corners for modern appearance */
    text-align: center;                                         /* Center all text content within cards */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);        /* Smooth, professional transition animation */
    position: relative;                                         /* Establish positioning context for children */
    z-index: 1;                                                 /* Ensure cards appear above background */
    border: 2px solid var(--Card_Border_Colour);              /* Orange border for all cards */
    width: 220px;                                               /* Fixed width to fit 4 cards on one line */
    height: 320px;                                              /* Fixed height to accommodate all content */
    flex-shrink: 0;                                             /* Prevent cards from shrinking in flex containers */
    /* overflow: hidden; moved to pricing-page specific rule above */
}

/* Service Card specific properties - Individual service card layout and positioning */
/* 
   FIXED: Made overflow hidden specific to pricing page only
   Previously this was hiding login buttons on other pages
*/
.pricing-page .service-card {
    position: relative;                                        /* Establish positioning context for absolute children */
    min-width: 220px;                                         /* Minimum width to maintain card proportions */
    max-width: 220px;                                         /* Maximum width to prevent cards from expanding */
    overflow: hidden;                                          /* Ensure content stays within card boundaries - PRICING PAGE ONLY */
}

/* General service card properties for other pages */
.service-card {
    position: relative;                                        /* Establish positioning context for absolute children */
    min-width: 220px;                                         /* Minimum width to maintain card proportions */
    max-width: 220px;                                         /* Maximum width to prevent cards from expanding */
}



/* Service Cards Container - Horizontal Layout for 4 service cards */
.service-cards-container {
    display: flex;                                             /* Use flexbox for horizontal card arrangement */
    justify-content: center;                                   /* Center the cards container */
    align-items: stretch;                                      /* Make all cards same height regardless of content */
    gap: 20px;                                                /* Consistent spacing between all service cards */
    margin: 40px 0;                                           /* Vertical spacing above and below card container */
    flex-wrap: nowrap;                                         /* Prevent cards from wrapping to next line */
}



/* About Cards Container - Horizontal Layout for 3 about cards */
.about-grid {
    display: flex;                                             /* Use flexbox for horizontal card arrangement */
    justify-content: center;                                   /* Center the three cards */
    align-items: flex-start;                                   /* Align cards to top (no height stretching) */
    gap: 30px;                                                 /* Larger gap between 3 cards for better spacing */
    margin: 10px 0;                                            /* Reduced vertical margins for closer text positioning */
    flex-wrap: nowrap;                                         /* Prevent cards from wrapping to next line */
    max-width: 800px;                                          /* Smaller container width optimized for 3 cards */
    margin-left: auto;                                         /* Center container horizontally */
    margin-right: auto;                                        /* Center container horizontally */
}

/* About text section - Proper spacing from search form above */
.about-text {
    margin-top: 20px;                                          /* Standard spacing from search form for visual separation */
}

/* ========================================
   SEARCH RESULTS STYLES - Integrated with Search Hero
   ========================================
   
   This section styles the search results that appear below the search form.
   The results are now truly integrated within the search hero section,
   creating a seamless user experience without visual gaps.
   ======================================== */
.search-results {
    margin: 0;                                                  /* Remove all margins for direct attachment to search hero */
    max-width: 1200px;                                         /* Maximum width to match page container */
    margin-left: auto;                                          /* Center results horizontally */
    margin-right: auto;                                         /* Center results horizontally */
    margin-top: 0;                                              /* No top gap - truly integrated with search form */
}

.results-header {
    text-align: center;                                         /* Center the results count text */
    margin-bottom: 15px;                                        /* Space below header before results table */
    padding: 15px 20px;                                         /* Internal spacing for header content */
    background: transparent;                                    /* No background - shows through to search hero */
    border: none;                                               /* No border - seamless integration */
    border-radius: 0;                                           /* No rounded corners - flat appearance */
    color: var(--Search_Hero_Text_Colour);                      /* Use search hero text color for consistency */
}

.results-header h3 {
    color: var(--Search_Hero_Text_Colour);                      /* Consistent text color with header */
    margin-bottom: 5px;                                         /* Minimal space below heading */
    font-weight: 600;                                           /* Semi-bold weight for emphasis */
}

.results-container {
    display: flex;                                              /* Use flexbox for vertical result stacking */
    flex-direction: column;                                     /* Stack results vertically */
    gap: 2px;                                                   /* Minimal gap between individual result rows */
    background: transparent;                                    /* No background - shows through to search hero */
    border: none;                                               /* No border - seamless integration */
    border-radius: 0;                                           /* No rounded corners - flat appearance */
    overflow: hidden;                                           /* Hide any content that exceeds container */
    padding-bottom: 20px;                                       /* Bottom padding for pagination buttons */
}

.no-results {
    text-align: center;                                         /* Center the no results message */
    padding: 60px 20px;                                        /* Generous padding for empty state visibility */
    color: var(--Search_Hero_Text_Colour);                      /* Use search hero text color for consistency */
}

.no-results i {
    font-size: 3rem;                                            /* Large icon size for visual impact */
    margin-bottom: 20px;                                        /* Space below icon before heading */
    opacity: 0.5;                                               /* Semi-transparent for subtle appearance */
    color: var(--Search_Hero_Button_BG_Colour);                 /* Orange color matching search button */
}

.no-results h3 {
    margin-bottom: 10px;                                        /* Space below heading before description */
    color: var(--Search_Hero_Text_Colour);                      /* Consistent text color with search hero */
}

/* Subbie row styling - Individual result rows in search results table */
.subbie-row {
    display: grid;                                              /* Use CSS Grid for precise column layout */
    grid-template-columns: 2fr 1.5fr 2fr 1.5fr auto;          /* Column widths: Name, Trade, Areas, Rates, Actions */
    gap: 20px;                                                  /* Consistent spacing between all columns */
    padding: 15px 20px;                                         /* Internal spacing for row content */
            border-bottom: 1px solid var(--Card_Icon_Colour);           /* Subtle orange border between rows */
    transition: all 0.2s ease;                                  /* Smooth transitions for hover effects */
    cursor: pointer;                                             /* Hand cursor to indicate clickable rows */
    align-items: center;                                         /* Vertically center all column content */
    background: transparent;                                     /* No background - shows through to search hero */
    border-radius: 0;                                            /* No rounded corners - flat appearance */
    margin: 0;                                                   /* No margins for seamless integration */
    color: var(--SR_Col_Colour);                                /* Green text color for rates, areas, and trades */
}

.subbie-row:last-child {
    border-bottom: none;                                        /* Remove bottom border from last row */
}

.subbie-row:hover {
            background-color: rgba(226, 145, 0, 0.1);                 /* Very light orange background on hover */
    border-left: 4px solid var(--Search_Hero_Button_BG_Colour); /* Orange left border for visual feedback */
    transform: translateY(-1px);                                /* Slight upward movement for depth */
            box-shadow: 0 4px 12px rgba(226, 145, 0, 0.2);           /* Subtle orange shadow for elevation */
}

.subbie-row.inactive {
    opacity: 0.7;                                               /* Reduce opacity for inactive subbies */
}

.subbie-name-col {
    display: flex;                                              /* Use flexbox for vertical name and status layout */
    flex-direction: column;                                     /* Stack name above status vertically */
    gap: 5px;                                                   /* Small gap between name and status */
}

.subbie-name {
    font-weight: 700;                                           /* Bold weight for prominent name display */
    color: var(--SR_Subbie_Name_Colour) !important;             /* Green color for subbie names with high specificity */
    font-size: 1.1rem;                                         /* Readable font size for names */
}

.subbie-status {
    font-size: 0.8rem;                                         /* Smaller font size for status badges */
    padding: 4px 8px;                                           /* Compact padding for badge appearance */
    border-radius: 12px;                                        /* Rounded corners for modern badge look */
    font-weight: 600;                                           /* Semi-bold weight for status text */
    width: fit-content;                                         /* Width adjusts to content size */
}

/* Desktop status badge colors (mobile overrides live in Mobile/mobile.css) */
.subbie-status.status-active {
    background: var(--Success_Colour);
    color: var(--Header_Button_Text_Colour);
}

.subbie-status.status-inactive {
    background: var(--Error_Colour);
    color: var(--Header_Button_Text_Colour);
}

/* Status styling moved to mobile.css for mobile-specific styling */

/* Header row styling - Column headers for search results table */
.subbie-header-row {
    display: grid;                                              /* Use CSS Grid to match data row layout */
    grid-template-columns: 2fr 1.5fr 2fr 1.5fr auto;          /* Same column widths as data rows for alignment */
    gap: 20px;                                                  /* Consistent spacing between header columns */
    padding: 15px 20px;                                         /* Same padding as data rows for alignment */
    background: var(--SR_Header_BG_Colour);                     /* White background for header distinction */
    color: var(--Body_Text_Colour);                             /* Use same color as "How it works" section */
    font-weight: 700;                                           /* Bold weight for header emphasis */
    border-radius: 15px 15px 0 0;                               /* Rounded top corners to match search hero pill */
    border-bottom: 2px solid var(--SR_Header_Text_Colour);      /* Green bottom border for visual separation */
}

.header-col {
    font-weight: 700;                                           /* Bold weight for header column text */
    text-transform: uppercase;                                   /* All caps for header labels */
    letter-spacing: 0.5px;                                      /* Slightly spaced letters for readability */
    color: var(--Body_Text_Colour);                             /* Use same color as "How it works" section */
}

/* Loading spinner - Displayed while search results are loading */
.loading-spinner {
    text-align: center;                                         /* Center the spinner and text */
    padding: 40px;                                              /* Generous padding for visual prominence */
    grid-column: 1 / -1;                                        /* Span all grid columns */
}

.loading-spinner i {
    font-size: 2rem;                                            /* Large icon size for loading animation */
    color: var(--Search_Hero_Button_BG_Colour);                 /* Orange color matching search button */
}

.loading-spinner p {
    margin-top: 10px;                                           /* Space above loading text */
    color: var(--Search_Hero_Text_Colour);                      /* Consistent text color with search hero */
}

/* Pagination container - Navigation controls for search results */
.results-pagination {
    text-align: center;                                         /* Center all pagination controls */
    margin-top: 20px;                                           /* Space above from results table */
    padding: 20px;                                              /* Internal spacing for pagination elements */
    background: transparent;                                    /* No background - shows through to search hero */
    border-top: none;                                           /* No top border - seamless integration */
}

/* Pagination buttons - Navigation controls matching search button styling */
.btn {
    background: var(--Header_Button_BG_Colour);                  /* Orange background matching header buttons */
    color: var(--Header_Button_Text_Colour);                     /* Light cream text for contrast */
    border: none;                                                /* No border for clean appearance */
    border-radius: 15px;                                         /* Rounded corners for modern look */
    padding: 18px 35px;                                          /* Generous padding for comfortable clicking */
    font-size: 1.1rem;                                           /* Readable font size */
    font-weight: 700;                                            /* Bold weight for emphasis */
    cursor: pointer;                                             /* Hand cursor on hover */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);         /* Smooth, professional transition */
    margin: 0 15px;                                              /* Horizontal spacing between buttons */
}

.btn-white {
    background: var(--Header_Button_BG_Colour);                  /* Same orange background for consistency */
    color: var(--Header_Button_Text_Colour);                     /* Same light cream text for consistency */
}

/* About content section - Remove top margin to bring cards closer to text */
.about-content {
    margin-top: 0;                                               /* No top margin for tighter card positioning */
}

/* ========================================
   INDEX PAGE CARD STYLING - Shadow and Border
   ========================================
   
   This section applies the new card shadow and border variables
   specifically to the index page cards for enhanced visual appeal.
   ======================================== */

/* Index page about cards - Apply shadow and border */
.index-page .about-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border_Colour);                /* Orange border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.index-page .about-card:hover {
    transform: translateY(-5px) scale(1.02) !important; /* Use hardcoded values for performance */
}

/* Index page service cards - Apply shadow and border */
.index-page .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border_Colour);                /* Orange border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.index-page .service-card:hover {
    transform: translateY(-5px) scale(1.02) !important; /* Use hardcoded values for performance */
}

/* Index page search pill - Apply shadow and border to main search container */
.index-page .hero-search-form {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.index-page .hero-search-form:hover {
    transform: translateY(-5px) scale(1.02) !important; /* Use hardcoded values for performance */
}

/* Index page inner form pills - Apply shadow and border to individual form elements */
.index-page .search-main-input,
.index-page .filter-select,
.index-page .filter-input,
.index-page .rate-input {
    box-shadow: 0 2px 10px var(--Card_Shadow);                 /* Lighter shadow for inner elements */
    border: 1px solid var(--Card_Border);                       /* Thinner border for inner elements */
}

/* ========================================
   SUBBIE SIGNUP PAGE CARD STYLING - Shadow and Border
   ========================================
   
   This section applies the new card shadow and border variables
   specifically to the subbie signup page cards for enhanced visual appeal.
   ======================================== */

/* Subbie signup page main form card - Apply shadow and border */
.subbie-signup-page .about-content .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.subbie-signup-page .about-content .service-card:hover {
    /* Hover effects disabled */
    transform: none !important;
}

/* Subbie signup page pricing card - Apply shadow and border */
.subbie-signup-page .about-content + .about-content .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.subbie-signup-page .about-content + .about-content .service-card:hover {
    /* Hover effects disabled */
    transform: none !important;
}

/* Subbie signup page form inputs - Apply lighter shadow and border */
.subbie-signup-page .form-input {
    box-shadow: 0 2px 10px var(--Card_Shadow);                 /* Lighter shadow for form inputs */
    border: 1px solid var(--Card_Border);                       /* Thinner border for form inputs */
}

/* Subbie signup page card spacing - Add space between the two cards */
.subbie-signup-page .about-content + .about-content {
    margin-top: 25px;                                            /* 25px space between the two cards */
}

/* ========================================
   TRADIE SIGNUP PAGE CARD STYLING - Shadow and Border
   ========================================
   
   This section applies the new card shadow and border variables
   specifically to the tradie signup page cards for enhanced visual appeal.
   ======================================== */

/* Tradie signup page main form card - Apply shadow and border */
.tradie-signup-page .about-content .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.tradie-signup-page .about-content .service-card:hover {
    /* Hover effects disabled */
    transform: none !important;
}

/* Tradie signup page form inputs - Apply lighter shadow and border */
.tradie-signup-page .form-input {
    box-shadow: 0 2px 10px var(--Card_Shadow);                 /* Lighter shadow for form inputs */
    border: 1px solid var(--Card_Border);                       /* Thinner border for form inputs */
}

/* Tradie signup page spacing between cards */
.tradie-signup-page .about-content + .about-content {
    margin-top: 50px !important;                                /* 50px spacing between the two cards */
}

/* ========================================
   PRICING PAGE CARD STYLING - Shadow and Border
   ========================================
   
   This section applies the new card shadow and border variables
   specifically to the pricing page cards for enhanced visual appeal.
   ======================================== */

/* Pricing page main plan card - Apply shadow and border */
.pricing-page .main-plan-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.pricing-page .main-plan-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Pricing page service cards - Apply shadow and border */
.pricing-page .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.pricing-page .service-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Pricing page FAQ items - Apply shadow and border */
.pricing-page .faq-item {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.pricing-page .faq-item:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Pricing page specific styling - Badge and checkmarks */
.pricing-page .plan-badge {
    background: var(--Card_Icon_Colour);                         /* Dark green background for badge */
    color: white;                                                /* White text for contrast */
}

.pricing-page .plan-features i {
    color: var(--Card_Icon_Colour);                              /* Dark green color for checkmark icons */
}

/* Pricing page specific styling - Badge and checkmarks */
.pricing-page .plan-badge {
    background: var(--Card_Icon_Colour);                         /* Dark green background for badge */
    color: white;                                                /* White text for contrast */
}

.pricing-page .plan-features i {
    color: var(--Card_Icon_Colour);                              /* Dark green color for checkmark icons */
}

/* ========================================
   PRICING PAGE SPECIFIC STYLES
   ========================================
   
   This section contains all the styling specific to the pricing page.
   It includes the main subscription plan card, service cards, and FAQ styling.
   These styles are designed to work with the pricing.html page specifically.
   ======================================== */

/* Main plan card styling - Featured monthly subscription plan */
.main-plan-container {
    display: flex;                                               /* Use flexbox for centering */
    justify-content: center;                                     /* Center the main plan card horizontally */
    margin-bottom: 40px;                                         /* Space below the main plan card */
}

/* Pricing cards container - Three cards in a row */
.pricing-cards-container {
    display: flex;                                               /* Use flexbox for horizontal layout */
    justify-content: center;                                     /* Center the cards horizontally */
    gap: 20px;                                                   /* Space between cards */
    margin-bottom: 40px;                                         /* Space below the cards */
    flex-wrap: wrap;                                             /* Allow wrapping on smaller screens */
}

.main-plan-card {
    background: var(--Card_Background_Colour);                   /* White background for card visibility */
    padding: 30px;                                               /* Generous padding for content breathing room */
    border-radius: 25px;                                         /* Large rounded corners for modern appearance */
    text-align: center;                                          /* Center all text content within the card */
    max-width: 500px;                                            /* Maximum width for optimal readability */
    width: 100%;                                                 /* Full width up to max-width */
    position: relative;                                          /* Establish positioning context for badge */
    flex: 1;                                                     /* Allow cards to grow and shrink equally */
    min-width: 300px;                                            /* Minimum width to prevent cards from being too narrow */
}

.plan-badge {
    position: absolute;                                           /* Position relative to main plan card */
    top: -15px;                                                  /* Extend above the card for visual prominence */
    left: 50%;                                                   /* Center horizontally on the card */
    transform: translateX(-50%);                                  /* Perfect horizontal centering */
    background: var(--Search_Hero_Button_BG_Colour);             /* Orange background for attention */
    color: var(--Search_Hero_Button_Text_Colour);                /* White text for contrast */
    padding: 8px 20px;                                           /* Compact padding for badge appearance */
    border-radius: 20px;                                         /* Rounded corners for modern look */
    font-size: 0.9rem;                                           /* Smaller font size for badge text */
    font-weight: 600;                                            /* Semi-bold weight for emphasis */
}

.plan-header {
    margin-bottom: 30px;                                         /* Space below header before features list */
}

.plan-name {
    color: var(--Card_Header_Text_Colour);                       /* Dark purple color for plan title */
    font-size: 2rem;                                             /* Large font size for prominence */
    margin-bottom: 15px;                                         /* Space below title before price */
}

.plan-price {
    margin-bottom: 20px;                                         /* Space below price before features */
}

.price-amount {
    color: var(--Search_Hero_Button_BG_Colour);                  /* Orange color for price emphasis */
    font-size: 3rem;                                             /* Very large font for price visibility */
    font-weight: 800;                                            /* Extra bold weight for price emphasis */
}

.price-period {
    color: var(--Card_Text_Colour);                              /* Purple color for period text */
    font-size: 1.2rem;                                           /* Medium font size for period */
    margin-left: 5px;                                            /* Small space after price amount */
}

.plan-features {
    margin-bottom: 30px;                                         /* Space below features before action button */
    text-align: left;                                            /* Left-align feature list for readability */
}

.plan-features h4 {
    color: var(--Card_Header_Text_Colour);                       /* Dark purple color for features heading */
    font-size: 1.3rem;                                           /* Medium font size for subheading */
    margin-bottom: 15px;                                         /* Space below heading before feature list */
    text-align: center;                                          /* Center the features heading */
}

.plan-features ul {
    list-style: none;                                            /* Remove default bullet points */
    padding: 0;                                                   /* Remove default list padding */
}

.plan-features li {
    color: var(--Card_Text_Colour);                              /* Purple color for feature text */
    padding: 8px 0;                                              /* Vertical spacing between features */
    display: flex;                                                /* Use flexbox for icon and text alignment */
    align-items: center;                                          /* Center items vertically */
    gap: 10px;                                                    /* Space between icon and feature text */
}

.plan-features i {
    color: var(--Search_Hero_Button_BG_Colour);                  /* Orange color for checkmark icons */
    font-size: 1.1rem;                                           /* Icon size matching text */
}

.plan-action {
    margin-top: 30px;                                            /* Space above action button from features */
}

.btn-primary {
    background: var(--Search_Hero_Button_BG_Colour);             /* Orange background for primary action */
    color: var(--Search_Hero_Button_Text_Colour);                /* White text for contrast */
    padding: 15px 30px;                                          /* Generous padding for comfortable clicking */
    border: none;                                                 /* No border for clean appearance */
    border-radius: 25px;                                         /* Rounded corners for modern look */
    font-size: 1.1rem;                                           /* Readable font size */
    font-weight: 600;                                             /* Semi-bold weight for emphasis */
    text-decoration: none;                                        /* Remove default link underline */
    display: inline-block;                                        /* Block display for proper button sizing */
    transition: all 0.3s ease;                                    /* Smooth transition for all changes */
}


/* Service price styling - Price display for additional service cards */
.service-price {
    position: absolute;                                           /* Position relative to service card */
    bottom: 15px;                                                /* 15px from bottom of card as requested */
    left: 0;                                                     /* Extend to left edge of card */
    right: 0;                                                    /* Extend to right edge of card */
    padding: 15px;                                               /* Internal spacing for price content */
    border-radius: 15px;                                         /* Rounded corners for modern appearance */
    text-align: center;                                          /* Center price text horizontally */
    z-index: 1;                                                  /* Ensure price appears above other content */
}

.service-price .price-amount {
    font-size: 1.5rem;                                           /* Large font size for price emphasis */
    font-weight: 700;                                            /* Bold weight for price visibility */
    color: var(--Card_Icon_Colour) !important;                   /* Dark green color for service prices - force override */
}

/* Ensure pricing page service prices use dark green */
.pricing-page .service-price .price-amount {
    color: var(--Card_Icon_Colour) !important;                   /* Dark green color for pricing page service prices */
}

/* Make main Monthly Subscription £5 price also dark green */
.pricing-page .price-amount {
    color: var(--Card_Icon_Colour) !important;                   /* Dark green color for main price amount */
}

/* ========================================
   LOGIN PAGE CARD STYLING - Shadow and Border
   ========================================
   
   This section applies the new card shadow and border variables
   specifically to the login page cards for enhanced visual appeal.
   ======================================== */

/* Login page main form card - Apply shadow and border */
.login-page .about-content .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.login-page .about-content .service-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Login page form inputs - Apply lighter shadow and border */
.login-page .form-input {
    box-shadow: 0 2px 10px var(--Card_Shadow);                 /* Lighter shadow for form inputs */
    border: 1px solid var(--Card_Border);                       /* Thinner border for form inputs */
}

/* Fix login card to contain all content - override general service card rules */
.login-page .about-content .service-card {
    min-height: 750px !important;
    max-width: 520px !important;
    width: 520px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
}

/* ========================================
   ADMIN LOGIN PAGE CARD STYLING - Shadow and Border
   ========================================
   
   This section applies the new card shadow and border variables
   specifically to the admin login page cards for enhanced visual appeal.
   ======================================== */

/* Admin login page main form card - Apply shadow and border */
.admin-login-page .about-content .service-card {
    box-shadow: 0 4px 20px var(--Card_Shadow);                 /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                       /* Black border using CSS variable */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.admin-login-page .about-content .service-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Admin login page form inputs - Apply lighter shadow and border */
.admin-login-page .form-input {
    box-shadow: 0 2px 10px var(--Card_Shadow);                 /* Lighter shadow for form inputs */
    border: 1px solid var(--Card_Border);                       /* Thinner border for form inputs */
}

/* Fix admin login card to contain all content - override general service card rules */
.admin-login-page .about-content .service-card {
    min-height: 750px !important;
    max-width: 520px !important;
    width: 520px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
}

.login-page .about-content .service-card form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.login-page .about-content .service-card .form-footer {
    margin-top: auto;
    padding-top: 20px;
}

.service-price .price-period {
    font-size: 0.9rem;                                           /* Smaller font size for period text */
    opacity: 0.8;                                                /* Slightly transparent for visual hierarchy */
}

/* FAQ grid styling - Frequently asked questions layout */
.faq-grid {
    display: grid;                                                /* Use CSS Grid for responsive FAQ layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Auto-fit columns with minimum 300px width */
    gap: 30px;                                                    /* Consistent spacing between FAQ items */
    margin-top: 30px;                                             /* Space above from previous section */
}

.faq-item {
    background: var(--Card_Background_Colour);                   /* White background for FAQ cards */
    padding: 25px;                                               /* Generous padding for content */
    border-radius: 15px;                                         /* Rounded corners for modern appearance */
    transition: all 0.3s ease;                                   /* Smooth transitions for hover effects */
}

.faq-item:hover {
    transform: translateY(-5px);                                  /* Lift card up slightly on hover */
}

.faq-item h3 {
    color: var(--Card_Header_Text_Colour);                       /* Dark purple color for question text */
    margin-bottom: 15px;                                         /* Space below question before answer */
}

.faq-item p {
    color: var(--Card_Text_Colour);                              /* Purple color for answer text */
    line-height: 1.6;                                            /* Comfortable line spacing for readability */
}

/* Services subtitle styling - Supporting text below services heading */
.services-subtitle {
    text-align: center;                                           /* Center the subtitle text */
    color: var(--Body_Text_Colour);                              /* Red color matching body text */
    font-size: 1.1rem;                                           /* Medium font size for subtitle */
    margin-bottom: 30px;                                          /* Space below subtitle before service cards */
    opacity: 0.9;                                                 /* Slightly transparent for visual hierarchy */
}

/* Individual About Card - Individual about card sizing and layout */
.about-card {
    flex: 1;                                                      /* Take up equal space in flex container */
    min-width: 200px;                                             /* Minimum width to maintain proportions */
    max-width: 220px;                                             /* Maximum width to prevent expansion */
    width: 220px;                                                 /* Fixed width for consistent sizing */
}

.about-card:hover,
.service-card:hover {
    transform: translateY(-10px) scale(1.02);                     /* Lift card up and scale slightly on hover */
    z-index: 2;                                                   /* Ensure hovered card appears above others */
}

/* Card Text Hierarchy - APPLIES TO ALL CARDS */
.card-title {
    color: var(--Card_Header_Text_Colour) !important;             /* Dark purple color for all card titles */
    font-size: 1.8rem;                                           /* Large font size for title prominence */
    font-weight: 700;                                            /* Bold weight for title emphasis */
    margin-bottom: 20px;                                         /* Generous space below title before content */
    margin-top: 0;                                                /* No top margin for clean alignment */
}

/* General headings - use body color for all heading elements */
h1, h2, h3, h4, h5, h6 {
    color: var(--Body_Text_Colour) !important;                   /* Red color for all general headings */
    font-size: 1.8rem;                                           /* Large font size for heading prominence */
    font-weight: 700;                                            /* Bold weight for heading emphasis */
    margin-bottom: 20px;                                         /* Generous space below headings */
    margin-top: 0;                                                /* No top margin for clean alignment */
}

.card-description {
    color: var(--Card_Text_Colour);                              /* Purple color for card description text */
    font-size: 1.1rem;                                           /* Medium font size for readable content */
    line-height: 1.7;                                            /* Comfortable line spacing for readability */
    margin: 0;                                                    /* No margins for clean text flow */
    font-weight: 400;                                            /* Normal weight for description text */
}

/* Service Icon - Icon styling for service cards */
.service-icon {
    margin-bottom: 25px;                                         /* Space below icon before title */
}

.service-icon i {
    font-size: 3rem;                                             /* Large icon size for visual impact */
    color: var(--Card_Icon_Colour);                              /* Orange color for all service icons */
    margin-bottom: 20px;                                         /* Space below icon before title */
    display: block;                                               /* Block display for proper spacing */
}

/* About Card Icons - Match service card icons exactly for consistency */
.about-card i {
    font-size: 3rem;                                             /* Same size as service icons for consistency */
    color: var(--Card_Icon_Colour);                              /* Same orange color as service icons */
    margin-bottom: 20px;                                         /* Same spacing as service icons */
    display: block;                                               /* Same block display as service icons */
}

/* ========================================
   SECTION STYLES - Page section headings and titles
   ========================================
   
   This section defines the styling for all major section headings
   throughout the site, ensuring consistent typography and spacing.
   ======================================== */
.section-title {
    color: var(--Body_Text_Colour) !important;                   /* Red color for all section titles */
    font-size: 3rem;                                             /* Very large font size for prominence */
    font-weight: 800;                                            /* Extra bold weight for emphasis */
    margin-bottom: 30px;                                         /* Generous space below section titles */
    text-align: center;                                          /* Center all section titles */
    /* Removed text shadow for cleaner appearance */
}

h4.rate-title {
    color: var(--Search_Hero_Pill_Text_Colour) !important;       /* Green color for rate titles with high specificity */
    font-size: 1.4rem;                                           /* Medium font size for rate headings */
    font-weight: 700;                                            /* Bold weight for rate title emphasis */
    margin-bottom: 20px;                                         /* Space below rate title before content */
    text-align: center;                                          /* Center rate titles */
}

/* ========================================
   FOOTER STYLES - Page footer layout and styling
   ========================================
   
   This section controls the footer appearance and layout,
   including the footer content grid and link styling.
   ======================================== */
.footer {
    background: var(--Footer_Background_Colour);                  /* Dark background matching header */
    color: var(--Footer_Text_Colour);                            /* White text for contrast */
    padding: 20px 0 0;                                           /* Remove bottom padding for orange bar */
    margin-top: 80px;                                            /* Space above footer from main content */
    border-top: 4px solid var(--Footer_Background_Colour);       /* Dark top border for separation */
    margin-left: 0;                                             /* Ensure no left margin */
    margin-right: 0;                                            /* Ensure no right margin */
    width: 100%;                                                /* Full width */
}

.footer-content {
    display: grid;                                                /* Use CSS Grid for better control */
    grid-template-columns: 1fr 1fr 1fr;                         /* Equal width for 3 sections */
    gap: 60px;                                                    /* Increased space between sections */
    align-items: start;                                           /* Align items to top */
    margin-bottom: 15px;                                          /* COMPRESSED: Reduced space below footer content */
    text-align: left;                                             /* Left align the main content */
    max-width: 100%;                                             /* Ensure full width */
}

.footer-section h3 {
    font-size: 1.4rem;                                           /* COMPRESSED: Smaller font size for footer section titles */
    font-weight: 600;                                            /* COMPRESSED: Reduced weight for title emphasis */
    margin-bottom: 8px;                                          /* COMPRESSED: Reduced space below title before content */
    color: var(--Footer_Text_Colour) !important;                 /* White color overriding general heading styles */
}

.footer-section h4 {
    font-size: 1.4rem;                                           /* Medium font size for footer subsection titles */
    font-weight: 700;                                            /* Bold weight for emphasis */
    margin-bottom: 15px;                                         /* Space below subtitle before content */
    color: var(--Footer_Text_Colour) !important;                 /* White color overriding general heading styles */
}

.footer-section p {
    font-size: 1.0rem;                                           /* COMPRESSED: Smaller font size for footer text */
    line-height: 1.4;                                            /* COMPRESSED: Tighter line spacing for compact appearance */
    opacity: 0.9;                                                 /* Slightly transparent for visual hierarchy */
    margin: 0;                                                    /* COMPRESSED: Remove default margins for tighter spacing */
}

.footer-section ul {
    list-style: none;                                             /* Remove default bullet points */
    padding: 0;                                                   /* Remove default list padding */
    display: flex;                                                /* Display list items horizontally */
    gap: 30px;                                                    /* Space between quick link items */
    flex-wrap: wrap;                                              /* Allow wrapping on smaller screens */
}

.footer-section ul li {
    margin-bottom: 0;                                             /* No bottom margin for horizontal layout */
}

.footer-section ul li a {
    color: var(--Footer_Text_Colour);                             /* White color for footer links */
    text-decoration: none;                                        /* Remove default link underlines */
    font-size: 1.1rem;                                           /* Medium font size for link text */
    transition: color 0.3s ease;                                  /* Smooth color transition on hover */
    padding: 8px 0;                                               /* Vertical padding for clickable area */
    display: block;                                               /* Block display for full-width clickable area */
    border-radius: 8px;                                           /* Rounded corners for modern appearance */
    padding-left: 15px;                                           /* Left padding for text indentation */
}

.footer-section ul li a:hover {
    color: var(--Footer_Text_Colour);                             /* Maintain white color on hover */
    transform: translateX(5px);                                   /* Slide link right on hover for feedback */
}

/* Footer logo section - left side */
.footer-logo-section {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

/* Quick links section */
.footer-quick-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-quick-links ul li {
    margin-bottom: 0;
}

.footer-quick-links ul li a {
    color: var(--Footer_Text_Colour);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
    padding: 4px 0;
    display: block;
}

.footer-quick-links ul li a:hover {
    color: var(--Footer_Text_Colour);
    transform: translateX(5px);
}

/* Company info section */
.footer-company-info p {
    margin-bottom: 15px;
    line-height: 1.5;
}

.sign-in-link {
    color: var(--Footer_Text_Colour);
    text-decoration: none;
    font-weight: 400;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.sign-in-link:hover {
    opacity: 0.8;
}

/* Support section */
.footer-support ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-support ul li {
    margin-bottom: 0;
}

.footer-support ul li a {
    color: var(--Footer_Text_Colour);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
    padding: 4px 0;
    display: block;
}

.footer-support ul li a:hover {
    color: var(--Footer_Text_Colour);
    transform: translateX(5px);
}

/* Footer logo */
.footer-logo {
    height: 60px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* Social media container */
.social-media {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Social media links */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

/* Facebook link */
.facebook-link {
    background-color: #1877f2;
    color: white;
}

.facebook-link:hover {
    background-color: #166fe5;
    transform: translateY(-2px);
}

/* Instagram link */
.instagram-link {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.instagram-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
    text-align: center;                                           /* Center the copyright text */
    padding: 2px 20px;                                            /* Very minimal vertical padding, keep horizontal */
    font-size: 0.9rem;                                           /* COMPRESSED: Smaller font size for copyright text */
    background-color: var(--Header_Button_BG_Colour);             /* Orange background bar */
    color: var(--Header_Button_Text_Colour);                      /* Text color for contrast */
    margin-top: 20px;                                             /* Space above the bar */
    border-radius: 8px;                                           /* Rounded corners for the bar */
}





/* ========================================
   PASSWORD RESET FORM STYLES
   ========================================
   
   This section contains styles for the password reset form,
   ensuring consistent styling with the rest of the site.
   ======================================== */

/* Form input styling - Password reset and form input fields */
.form-input {
    width: 100%;                                                   /* Full width to fill container */
    padding: 12px 16px;                                           /* Comfortable padding for text input */
    border: 1px solid var(--Card_Text_Colour);                    /* Purple border matching card text color */
    border-radius: 8px;                                           /* Rounded corners for modern appearance */
    font-size: 1rem;                                              /* Standard font size for readability */
    transition: all 0.3s ease;                                    /* Smooth transitions for all property changes */
    background: var(--Card_Background_Colour);                    /* White background for contrast */
    color: var(--Card_Text_Colour);                               /* Purple text color for input content */
    box-sizing: border-box;                                       /* Include padding and border in width calculation */
}

.form-input:focus {
    outline: none;                                                 /* Remove default browser focus outline */
    border-color: var(--Card_Icon_Colour);                        /* Orange border on focus for emphasis */
    box-shadow: 0 0 0 3px var(--Card_Icon_Colour);               /* Orange glow effect on focus */
}

.form-input::placeholder {
    color: var(--Card_Text_Colour);                               /* Purple placeholder text color */
    opacity: 0.7;                                                 /* Reduced opacity for visual hierarchy */
}

/* Password input with automatic eye icon - Add padding for eye icon space */
input[type="password"] {
    padding-right: 45px !important;                               /* Extra padding on right for eye icon space */
    position: relative;                                            /* Relative positioning for pseudo-element */
}

/* Password visibility toggle button - Eye icon for showing/hiding password */
.password-toggle-btn {
    position: absolute;                                            /* Absolute positioning within wrapper */
    right: 12px;                                                  /* Position from right edge */
    top: 50%;                                                     /* Center vertically */
    transform: translateY(-50%);                                  /* Perfect vertical centering */
    background: none;                                             /* No background */
    border: none;                                                 /* No border */
    cursor: pointer;                                              /* Pointer cursor on hover */
    color: var(--Card_Text_Colour);                              /* Use card text color for icon */
    font-size: 1.2rem;                                           /* Slightly larger icon size */
    padding: 4px;                                                 /* Small padding for click area */
    transition: color 0.2s ease;                                  /* Smooth color transition */
    z-index: 20;                                                  /* Ensure icon is above validation message */
    display: none;                                                /* Hidden by default, shown by JavaScript */
}

/* Password toggle button hover effect - Slightly darker on hover */
.password-toggle-btn:hover {
    color: var(--Card_Icon_Colour);                              /* Orange color on hover */
}

/* Password toggle button focus - Remove default focus outline */
.password-toggle-btn:focus {
    outline: none;                                                /* Remove default focus outline */
    color: var(--Card_Icon_Colour);                              /* Orange color when focused */
}

/* Show password toggle button when JavaScript adds it */
.password-toggle-btn.show {
    display: block;                                               /* Show the eye icon */
}

/* Password field validation message - Completely separate from eye icon */
.form-group:has(.password-wrapper) .field-error {
    position: absolute;                                            /* Absolute positioning to separate from eye */
    top: 100%;                                                    /* Position below the input */
    left: 0;                                                      /* Align with input left edge */
    right: 0;                                                     /* Full width below input */
    z-index: 1;                                                   /* Below eye icon */
    margin-top: 4px;                                              /* Small gap from input */
    margin-bottom: 0 !important;                                  /* No bottom margin */
    font-size: 0.75rem !important;                                /* Smaller font size */
    line-height: 1.2 !important;                                  /* Tighter line height */
    background: var(--Card_Background_Colour);                    /* Background to separate from eye area */
    padding: 4px 8px;                                             /* Padding for readability */
    border-radius: 4px;                                           /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);                       /* Subtle shadow for separation */
}

/* Ensure password wrapper maintains its position */
.password-wrapper {
    position: relative;                                            /* Relative positioning for absolute eye icon */
    display: block;                                                /* Block display to maintain form flow */
    width: 100%;                                                   /* Full width to match input */
    margin-bottom: 0;                                              /* No bottom margin */
}

/* Form group with password wrapper - Extra space for validation message */
.form-group:has(.password-wrapper) {
    padding-bottom: 20px;                                          /* Extra space for absolute positioned validation message */
    margin-bottom: 5px !important;                                /* Reduced spacing between password fields (was 20px) */
}

/* Form label styling - Labels above form input fields */
.form-label {
    display: block;                                                /* Block display for full-width labels */
    margin-bottom: 8px;                                            /* Space below label before input field */
    color: var(--Card_Header_Text_Colour);                        /* Dark purple color for label text */
    font-weight: 600;                                              /* Semi-bold weight for emphasis */
    font-size: 1rem;                                              /* Standard font size for readability */
}

/* Form group styling - Container for label and input pairs */
.form-group {
    margin-bottom: 20px;                                           /* Space between form groups for separation */
}

/* Special form group for checkbox and forgot password link - Side by side layout */
.form-group:has(label:has(input[type="checkbox"])) {
    display: flex;                                                  /* Use flexbox for horizontal layout */
    justify-content: space-between;                                 /* Space checkbox and link apart */
    align-items: center;                                            /* Center items vertically */
}

/* Checkbox label styling - Proper spacing and alignment */
.form-group:has(label:has(input[type="checkbox"])) label {
    margin: 0;                                                      /* Remove default margin */
    color: var(--Card_Icon_Colour);                                /* Orange color for checkbox text */
    display: flex;                                                  /* Use flexbox for checkbox alignment */
    align-items: center;                                            /* Center checkbox and text */
    gap: 8px;                                                      /* Space between checkbox and text */
}

/* Forgot password link styling - Proper appearance and spacing */
.form-group:has(label:has(input[type="checkbox"])) a {
    color: var(--Card_Icon_Colour);                                /* Orange color for forgot password link */
    text-decoration: none;                                          /* Remove default link underlines */
    font-size: 0.9rem;                                             /* Slightly smaller font for secondary text */
    font-weight: 500;                                               /* Medium weight for link emphasis */
}

.form-group:has(label:has(input[type="checkbox"])) a:hover {
    text-decoration: underline;                                     /* Show underline on hover for feedback */
}

/* Form footer styling - Links and text below form submit button */
.form-footer {
    text-align: center;                                            /* Center footer content for balance */
    margin-top: 24px;                                              /* Space above from submit button */
    color: var(--Card_Text_Colour);                               /* Purple color for footer text */
}

.form-footer a {
    color: var(--Card_Icon_Colour);                               /* Orange color for footer links */
    text-decoration: none;                                         /* Remove default link underlines */
    font-weight: 500;                                              /* Medium weight for link emphasis */
}

.form-footer a:hover {
    text-decoration: underline;                                    /* Show underline on hover for feedback */
}

/* ========================================
   PASSWORD RESET CARD SPECIFIC STYLES
   ========================================
   
   This section contains styles specifically for the password reset card,
   ensuring it's properly centered and sized for optimal user experience.
   ======================================== */

/* Password reset card container - Centers the card and makes it larger */
/* 
   FIXED: Made this rule specific to password-reset-page only
   Previously this was affecting ALL service cards including login page
   This was causing the login button to be hidden due to card sizing conflicts
*/
.password-reset-page .about-content .service-card {
    max-width: 500px;                                              /* Maximum width for optimal readability */
    width: 100%;                                                   /* Full width up to max-width */
    margin: 0 auto;                                                /* Center the card horizontally */
    padding: 40px;                                                 /* Increased padding for better spacing */
    border-radius: 25px;                                           /* Larger border radius for modern appearance */
    box-shadow: 0 4px 20px var(--Card_Shadow);                    /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                          /* Black border using CSS variable */
    transition: all 0.3s ease;                                     /* Smooth transition for hover effects */
}
.password-reset-page .about-content .service-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Password reset card icon - Larger icon for better visual impact */
.about-content .service-card .service-icon i {
    font-size: 4rem;                                               /* Larger icon size for prominence */
    margin-bottom: 25px;                                           /* More space below icon */
}

/* Password reset card title - Larger title for better hierarchy */
.about-content .service-card .card-title {
    font-size: 2.2rem;                                             /* Larger font size for title */
    margin-bottom: 25px;                                           /* More space below title */
}

/* Password reset card description - Better spacing for description */
.about-content .service-card .card-description {
    font-size: 1.2rem;                                             /* Larger font size for description */
    line-height: 1.8;                                              /* Better line spacing for readability */
    margin-bottom: 30px;                                           /* More space below description */
}

/* Password reset form - Better spacing within the card */
.about-content .service-card form {
    margin-top: 20px;                                              /* Space above form from description */
}

/* Password reset form group - Better spacing between form elements */
.about-content .service-card .form-group {
    margin-bottom: 25px;                                           /* More space between form groups */
}

/* Password reset form input - Larger input for better usability */
.password-reset-page .about-content .service-card .form-input {
    padding: 15px 20px;                                            /* Larger padding for input field */
    font-size: 1.1rem;                                             /* Larger font size for input text */
    box-shadow: 0 2px 10px var(--Card_Shadow);                    /* Lighter shadow for form inputs */
    border: 1px solid var(--Card_Border);                          /* Thinner border for form inputs */
}

/* Password reset form button - Larger button for better interaction */
.about-content .service-card .btn-primary {
    padding: 18px 40px;                                            /* Larger button padding */
    font-size: 1.2rem;                                             /* Larger button text */
    margin-top: 10px;                                              /* Space above button from input */
}

/* Password reset form footer - Better spacing for footer text */
.about-content .service-card .form-footer {
    margin-top: 30px;                                              /* More space above footer */
    font-size: 1.1rem;                                             /* Larger footer text */
}

/* ========================================
   LOGIN CARD SPECIFIC STYLES
   ========================================
   
   This section contains styles specifically for the login card,
   ensuring it's properly sized and doesn't interfere with other cards.
   ======================================== */

/* Login card container - Centers the card and makes it larger for all form elements */
.login-page .about-content .service-card {
    max-width: 500px;                                              /* Maximum width for optimal readability */
    width: 100%;                                                   /* Full width up to max-width */
    margin: 0 auto;                                                /* Center the card horizontally */
    padding: 40px;                                                 /* Increased padding for better spacing */
    border-radius: 25px;                                           /* Larger border radius for modern appearance */
    box-shadow: 0 8px 32px var(--Card_Background_Colour);         /* Subtle shadow for depth */
    min-height: 600px;                                             /* Increased height to ensure all form elements fit - FIXED BUTTON VISIBILITY */
    display: flex;                                                  /* Use flexbox for vertical layout */
    flex-direction: column;                                         /* Stack elements vertically */
    justify-content: flex-start;                                    /* Start from top of card */
}

/* Login card icon - Larger icon for better visual impact */
.login-page .about-content .service-card .service-icon i {
    font-size: 4rem;                                               /* Larger icon size for prominence */
    margin-bottom: 25px;                                           /* More space below icon */
}

/* Login card title - Larger title for better hierarchy */
.login-page .about-content .service-card .card-title {
    font-size: 2.2rem;                                             /* Larger font size for title */
    margin-bottom: 25px;                                           /* More space below title */
}

/* Login card description - Better spacing for description */
.login-page .about-content .service-card .card-description {
    font-size: 1.2rem;                                             /* Larger font size for description */
    line-height: 1.8;                                              /* Better line spacing for readability */
    margin-bottom: 30px;                                           /* More space below description */
}

/* Login form - Better spacing within the card */
/* 
   FIXED: Changed justify-content from space-between to flex-start
   Previously space-between was pushing the button to the bottom and hiding it
   Now form elements stack from the top for better visibility
*/
.login-page .about-content .service-card form {
    margin-top: 20px;                                              /* Space above form from description */
    flex: 1;                                                       /* Take remaining space in card */
    display: flex;                                                  /* Use flexbox for form layout */
    flex-direction: column;                                         /* Stack form elements vertically */
    justify-content: flex-start;                                    /* Stack elements from top - FIXED BUTTON VISIBILITY */
}

/* Login form group - Better spacing between form elements */
.login-page .about-content .service-card .form-group {
    margin-bottom: 25px;                                           /* More space between form groups */
}

/* Login form input - Larger input for better usability */
.login-page .about-content .service-card .form-input {
    padding: 15px 20px;                                            /* Larger padding for input field */
    font-size: 1.1rem;                                             /* Larger font size for input text */
}

/* Login form button - Larger button for better interaction */
/* 
   FIXED: Added debugging styles to ensure button visibility
   Added background color and border to make button clearly visible
   This will help identify if button is hidden or just not styled properly
*/
.login-page .about-content .service-card .btn-primary {
    padding: 18px 40px;                                            /* Larger button padding */
    font-size: 1.2rem;                                             /* Larger button text */
    margin-top: 10px;                                              /* Space above button from input */
}

/* Login form footer - Better spacing for footer text */
.login-page .about-content .service-card .form-footer {
    margin-top: 30px;                                              /* More space above footer */
    font-size: 1.1rem;                                             /* Larger footer text */
}

/* ========================================
   ADMIN LOGIN CARD SPECIFIC STYLES
   ========================================
   
   This section contains styles specifically for the admin login card,
   ensuring it's properly centered and sized for optimal user experience.
   ======================================== */

/* Admin login card container - Centers the card and makes it larger */
.admin-login-page .about-content .service-card {
    max-width: 500px;                                              /* Maximum width for optimal readability */
    width: 100%;                                                   /* Full width up to max-width */
    margin: 0 auto;                                                /* Center the card horizontally */
    padding: 40px;                                                 /* Increased padding for better spacing */
    border-radius: 25px;                                           /* Larger border radius for modern appearance */
    box-shadow: 0 8px 32px var(--Card_Background_Colour);                   /* Subtle shadow for depth */
    min-height: 600px;                                             /* Minimum height to accommodate all form elements */
    display: flex;                                                  /* Use flexbox for vertical layout */
    flex-direction: column;                                         /* Stack elements vertically */
    justify-content: flex-start;                                    /* Start from top of card */
}

/* Admin login card icon - Larger icon for better visual impact */
.admin-login-page .about-content .service-card .service-icon i {
    font-size: 4rem;                                               /* Larger icon size for prominence */
    margin-bottom: 25px;                                           /* More space below icon */
}

/* Admin login card title - Larger title for better hierarchy */
.admin-login-page .about-content .service-card .card-title {
    font-size: 2.2rem;                                             /* Larger font size for title */
    margin-bottom: 25px;                                           /* More space below title */
}

/* Admin login card description - Better spacing for description */
.admin-login-page .about-content .service-card .card-description {
    font-size: 1.2rem;                                             /* Larger font size for description */
    line-height: 1.8;                                              /* Better line spacing for readability */
    margin-bottom: 30px;                                           /* More space below description */
}

/* Admin login form - Better spacing within the card */
.admin-login-page .about-content .service-card form {
    margin-top: 20px;                                              /* Space above form from description */
    flex: 1;                                                       /* Take up remaining space in card */
    display: flex;                                                  /* Use flexbox for form layout */
    flex-direction: column;                                         /* Stack form elements vertically */
    justify-content: space-between;                                 /* Distribute space evenly between elements */
}

/* Admin login form group - Better spacing between form elements */
.admin-login-page .about-content .service-card .form-group {
    margin-bottom: 25px;                                           /* More space between form groups */
}

/* Admin login form input - Larger input for better usability */
.admin-login-page .about-content .service-card .form-input {
    padding: 15px 20px;                                            /* Larger padding for input field */
    font-size: 1.1rem;                                             /* Larger font size for input text */
}

/* Admin login form button - Larger button for better interaction */
.admin-login-page .about-content .service-card .btn-primary {
    padding: 18px 40px;                                            /* Larger button padding */
    font-size: 1.2rem;                                             /* Larger button text */
    margin-top: 10px;                                              /* Space above button from input */
}

/* Admin login form footer - Better spacing for footer text */
.admin-login-page .about-content .service-card .form-footer {
    margin-top: 30px;                                              /* More space above footer */
    font-size: 1.1rem;                                             /* Larger footer text */
}



/* ========================================
   SUBBIE SIGNUP PAGE SPECIFIC STYLES
   ========================================
   
   This section contains styles specifically for the subbie signup page,
   ensuring the signup card is properly sized for the form content.
   ======================================== */



/* ========================================
   SUBBIE ONBOARDING PAGE SPECIFIC STYLES
   ========================================
   
   This section contains styles specifically for the subbie onboarding page,
   ensuring the onboarding card is properly sized for the form content.
   ======================================== */

/* Subbie onboarding card container - Centers the card and makes it wider for form content */
.subbie-onboarding-page .about-content .service-card {
    max-width: 800px;                                          /* Maximum width for optimal onboarding form readability */
    width: 100%;                                               /* Full width up to max-width */
    margin: 0 auto;                                            /* Center the card horizontally */
    padding: 40px;                                             /* Generous padding for form elements */
    border-radius: 25px;                                       /* Large border radius for modern appearance */
    box-shadow: 0 4px 20px var(--Card_Shadow);                /* Medium black shadow using CSS variable */
    border: 2px solid var(--Card_Border);                      /* Black border using CSS variable */
    min-height: auto;                                          /* Allow height to adjust to content */
    height: auto;                                              /* Override fixed height from general service-card */
    text-align: left;                                          /* Left-align form content for better readability */
    transition: all 0.3s ease;                                 /* Smooth transition for hover effects */
}
.subbie-onboarding-page .about-content .service-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Subbie onboarding card icon - Larger icon for better visual impact */
.subbie-onboarding-page .about-content .service-card .service-icon i {
    font-size: 4rem;                                           /* Larger icon size for prominence */
    margin-bottom: 25px;                                       /* More space below icon */
}

/* Subbie onboarding card title - Larger title for better hierarchy */
.subbie-onboarding-page .about-content .service-card .card-title {
    font-size: 2.2rem;                                         /* Larger font size for title */
    margin-bottom: 25px;                                       /* More space below title */
}

/* Subbie onboarding card description - Better spacing for description */
.subbie-onboarding-page .about-content .service-card .card-description {
    font-size: 1.2rem;                                         /* Larger font size for description */
    line-height: 1.8;                                          /* Better line spacing for readability */
    margin-bottom: 30px;                                       /* More space below description */
    text-align: center;                                         /* Center the description text */
}

/* Subbie onboarding form - Better spacing within the card */
.subbie-onboarding-page .about-content .service-card .onboarding-form {
    margin-top: 20px;                                          /* Space above form from description */
    text-align: left;                                          /* Left-align form elements */
}

/* Subbie onboarding form inputs - Larger inputs for better usability */
.subbie-onboarding-page .about-content .service-card .input,
.subbie-onboarding-page .about-content .service-card textarea,
.subbie-onboarding-page .about-content .service-card select {
    padding: 15px 20px;                                        /* Larger padding for input field */
    font-size: 1.1rem;                                         /* Larger font size for input text */
    margin-bottom: 20px;                                       /* Space between form elements */
    background: var(--Search_Hero_Pill_BG_Colour);             /* White background for pill style */
    color: var(--Search_Hero_Pill_Text_Colour);                /* Dark text for pill style */
    border: 1px solid var(--Card_Icon_Colour);                 /* Orange border for pill style */
    border-radius: 8px;                                        /* Rounded corners for pill style */
    width: 100%;                                               /* Full width */
    box-sizing: border-box;                                    /* Include padding in width */
    transition: all 0.3s ease;                                 /* Smooth transitions */
    box-shadow: 0 2px 10px var(--Card_Shadow);                /* Lighter shadow for form inputs */
}

/* Subbie onboarding form inputs focus state - Pill style focus */
.subbie-onboarding-page .about-content .service-card .input:focus,
.subbie-onboarding-page .about-content .service-card textarea:focus,
.subbie-onboarding-page .about-content .service-card select:focus {
    outline: none;                                              /* Remove default outline */
    border-color: var(--Search_Hero_Button_BG_Colour);         /* Orange border on focus */
    box-shadow: 0 0 0 3px var(--Focus_Glow);                  /* Orange glow on focus */
}

/* Pill-style dropdown styling for admin forms */
.pill-dropdown {
    padding: 15px 20px;                                        /* Generous padding for pill appearance */
    font-size: 1rem;                                           /* Appropriate font size */
    background: var(--Search_Hero_Pill_BG_Colour);             /* White background for pill style */
    color: var(--Search_Hero_Pill_Text_Colour);                /* Orange text for pill style */
    border: 1px solid var(--Card_Icon_Colour);                 /* Orange border for pill style */
    border-radius: 25px;                                       /* Large rounded corners for pill appearance */
    width: 100%;                                               /* Full width */
    box-sizing: border-box;                                    /* Include padding in width */
    transition: all 0.3s ease;                                 /* Smooth transitions */
    box-shadow: 0 2px 10px var(--Card_Shadow);                /* Subtle shadow for depth */
    cursor: pointer;                                           /* Pointer cursor for better UX */
    appearance: none;                                          /* Remove default browser styling */
    -webkit-appearance: none;                                  /* Remove default webkit styling */
    -moz-appearance: none;                                     /* Remove default mozilla styling */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e29100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;                              /* Don't repeat the arrow icon */
    background-position: right 15px center;                    /* Position arrow on the right */
    background-size: 16px;                                     /* Size of the arrow icon */
    padding-right: 45px;                                       /* Extra padding on right for arrow */
}

/* Pill dropdown focus state */
.pill-dropdown:focus {
    outline: none;                                              /* Remove default outline */
    border-color: var(--Search_Hero_Button_BG_Colour);         /* Orange border on focus */
    box-shadow: 0 0 0 3px var(--Focus_Glow);                  /* Orange glow on focus */
}

/* Pill dropdown hover state */
.pill-dropdown:hover {
    border-color: var(--Search_Hero_Button_BG_Colour);         /* Darker orange border on hover */
    box-shadow: 0 4px 15px var(--Card_Shadow);                /* Enhanced shadow on hover */
}

/* Subbie onboarding form buttons - Larger buttons for better interaction */
.subbie-onboarding-page .about-content .service-card .btn,
.subbie-onboarding-page .about-content .service-card .btn-primary,
.subbie-onboarding-page .about-content .service-card .btn-secondary {
    padding: 18px 40px !important;                             /* Larger button padding - force override */
    font-size: 1.2rem !important;                              /* Larger button text - force override */
    margin: 10px 10px 10px 0 !important;                      /* Space around buttons - force override */
    width: 120px !important;                                   /* Fixed width for exact same size - force override */
    height: 56px !important;                                   /* Fixed height for exact same size - force override */
    text-align: center !important;                             /* Center text in buttons - force override */
    display: inline-block !important;                          /* Ensure proper button display - force override */
    box-sizing: border-box !important;                         /* Include padding in dimensions - force override */
    line-height: 1.2 !important;                               /* Proper line height for vertical centering - force override */
    border-radius: 8px !important;                             /* Consistent rounded corners for all buttons - force override */
    text-decoration: none !important;                          /* Remove any underlines - force override */
    border: none !important;                                    /* Remove any borders - force override */
    background: var(--Search_Hero_Button_BG_Colour) !important; /* Orange background for all buttons - force override */
    color: var(--Search_Hero_Button_Text_Colour) !important;    /* White text for all buttons - force override */
    font-weight: 500 !important;                               /* Medium weight for all buttons - force override */
    cursor: pointer !important;                                 /* Pointer cursor for all buttons - force override */
    transition: all 0.3s ease !important;                      /* Smooth transitions for all buttons - force override */
    max-width: 120px !important;                               /* Maximum width - force override */
    min-width: 120px !important;                               /* Minimum width - force override */
    overflow: hidden !important;                               /* Prevent content overflow - force override */
}

/* Subbie onboarding step headings - Better styling for step titles */
.subbie-onboarding-page .about-content .service-card .step-heading {
    font-size: 1.6rem;                                         /* Larger font size for step headings */
    font-weight: 600;                                          /* Semi-bold weight for emphasis */
    margin-bottom: 16px;                                       /* Space below step headings */
    color: var(--Card_Header_Text_Colour);                     /* Use CSS variable for color */
}

/* Subbie onboarding step descriptions - Better styling for step descriptions */
.subbie-onboarding-page .about-content .service-card .step-description {
    font-weight: 500;                                          /* Medium weight for readability */
    font-size: 1rem;                                           /* Larger font size for descriptions */
    margin-bottom: 20px;                                       /* Space below step descriptions */
    color: var(--Card_Text_Colour);                            /* Use CSS variable for color */
    line-height: 1.6;                                          /* Better line spacing */
}

/* Onboarding description text - Center alignment and proper styling */
.subbie-onboarding-page .onboarding-description {
    text-align: center;                                         /* Center the description text */
    color: var(--Body_Text_Colour);                            /* Use CSS variable for body text color (blue) */
    margin-bottom: 30px;                                       /* Space below description */
    line-height: 1.6;                                          /* Better line spacing */
    font-size: 1.1rem;                                         /* Appropriate font size */
}

/* Subbie signup card container - Centers the card and makes it wider for form content */
.subbie-signup-page .about-content .service-card {
    max-width: 600px;                                          /* Maximum width for optimal form readability */
    width: 100%;                                               /* Full width up to max-width */
    margin: 0 auto;                                            /* Center the card horizontally */
    padding: 40px;                                             /* Generous padding for form elements */
    border-radius: 25px;                                       /* Large border radius for modern appearance */
    box-shadow: 0 8px 32px var(--Card_Background_Colour);     /* Subtle shadow for depth */
    min-height: auto;                                          /* Allow height to adjust to content */
    height: auto;                                              /* Override fixed height from general service-card */
    text-align: left;                                          /* Left-align form content for better readability */
}

/* Subbie signup card icon - Larger icon for better visual impact */
.subbie-signup-page .about-content .service-card .service-icon i {
    font-size: 4rem;                                           /* Larger icon size for prominence */
    margin-bottom: 25px;                                       /* More space below icon */
}

/* Subbie signup card title - Larger title for better hierarchy */
.subbie-signup-page .about-content .service-card .card-title {
    font-size: 2.2rem;                                         /* Larger font size for title */
    margin-bottom: 25px;                                       /* More space below title */
}

/* Subbie signup card description - Better spacing for description */
.subbie-signup-page .about-content .service-card .card-description {
    font-size: 1.2rem;                                         /* Larger font size for description */
    line-height: 1.8;                                          /* Better line spacing for readability */
    margin-bottom: 30px;                                       /* More space below description */
}

/* Subbie signup form - Better spacing within the card */
.subbie-signup-page .about-content .service-card form {
    margin-top: 20px;                                          /* Space above form from description */
    text-align: left;                                          /* Left-align form elements */
}

/* Subbie signup form group - Better spacing between form elements */
.subbie-signup-page .about-content .service-card .form-group {
    margin-bottom: 25px;                                       /* More space between form groups */
}

/* Subbie signup form input - Larger input for better usability */
.subbie-signup-page .about-content .service-card .form-input {
    padding: 15px 20px;                                        /* Larger padding for input field */
    font-size: 1.1rem;                                         /* Larger font size for input text */
}

/* Subbie signup form button - Larger button for better interaction */
.subbie-signup-page .about-content .service-card .btn-primary {
    padding: 18px 40px;                                        /* Larger button padding */
    font-size: 1.2rem;                                         /* Larger button text */
    margin-top: 10px;                                          /* Space above button from input */
}

/* Subbie signup form footer - Better spacing for footer text */
.subbie-signup-page .about-content .service-card .form-footer {
    margin-top: 30px;                                          /* More space above footer */
    font-size: 1.1rem;                                         /* Larger footer text */
}

/* ========================================
   BADGE STYLES - Following Card Color Scheme
   ========================================
   
   This section contains styles for all badges throughout the site,
   ensuring they follow the card color scheme for consistency.
   ======================================== */

/* General badge styling - Base appearance for all badges */
.badge {
    display: inline-flex;                                       /* Use flexbox for icon and text alignment */
    align-items: center;                                        /* Center icon and text vertically */
    gap: 8px;                                                   /* Space between icon and text */
    padding: 8px 16px;                                          /* Internal spacing for badge content */
    border-radius: 20px;                                        /* Rounded pill shape for modern appearance */
    font-size: 0.9rem;                                          /* Appropriate font size for badges */
    font-weight: 500;                                           /* Medium weight for readability */
    text-decoration: none;                                       /* Remove any link underlines */
    transition: all 0.3s ease;                                  /* Smooth transitions for interactions */
    border: 2px solid transparent;                              /* Transparent border for hover effects */
}

/* Badge header text - Uses card header text color */
.badge .badge-title,
.badge h4,
.badge strong {
    color: var(--Card_Header_Text_Colour);                      /* Dark purple for badge titles/headers */
    margin: 0;                                                   /* Remove default margins */
    font-weight: 600;                                           /* Semi-bold for emphasis */
}

/* Badge icon colors - Uses card icon color */
.badge i,
.badge .badge-icon {
    color: var(--Card_Icon_Colour);                             /* Orange color for badge icons */
    font-size: 1.2rem;                                          /* Icon size relative to text */
}

/* Badge icon container - Proper sizing and layout */
.badge-icon-container {
    width: 44px;                                                 /* Fixed width for icon container */
    height: 44px;                                                /* Fixed height for icon container */
    display: flex;                                               /* Use flexbox for centering */
    align-items: center;                                         /* Center icon vertically */
    justify-content: center;                                     /* Center icon horizontally */
    background: var(--Search_Hero_Pill_BG_Colour);              /* Use CSS variable for background */
    border-radius: 50%;                                          /* Circular icon container */
    border: 1px solid var(--Card_Icon_Colour);                  /* Use CSS variable for border */
    flex-shrink: 0;                                              /* Prevent icon container from shrinking */
}

/* Badge content - Text layout */
.badge-content {
    display: flex;                                               /* Use flexbox for text layout */
    flex-direction: column;                                      /* Stack title and description vertically */
    flex: 1;                                                     /* Take remaining space */
}

/* Badge text content - Uses card text color */
.badge .badge-text,
.badge p,
.badge span:not(.badge-title):not(.badge-icon) {
    color: var(--Card_Text_Colour);                             /* Purple for badge description text */
    margin: 0;                                                   /* Remove default margins */
    line-height: 1.4;                                           /* Comfortable line spacing */
}

/* Badge hover effects - Subtle interaction feedback */
.badge:hover {
    border-color: var(--Card_Icon_Colour);                      /* Orange border on hover */
    transform: translateY(-1px);                                 /* Slight lift effect */
    box-shadow: 0 2px 8px var(--Card_Icon_Colour);             /* Orange shadow on hover using CSS variable */
}

/* Specific badge types - Verified badge styling */
.badge.verified {
    background: var(--Card_Icon_Colour);                        /* Orange background using CSS variable */
    opacity: 0.1;                                               /* Light opacity for subtle background */
    border-color: var(--Card_Icon_Colour);                      /* Orange border */
}

/* Trade badge styling */
.badge.trade {
    background: var(--Card_Text_Colour);                        /* Purple background using CSS variable */
    opacity: 0.1;                                               /* Light opacity for subtle background */
    border-color: var(--Card_Text_Colour);                      /* Purple border */
}

/* Postcode badge styling */
.badge.postcode {
    background: var(--Card_Icon_Colour);                        /* Orange background using CSS variable */
    opacity: 0.05;                                              /* Very light opacity for subtle background */
    border-color: var(--Card_Icon_Colour);                      /* Orange border */
}

/* ========================================
   TRADIE SIGNUP PAGE SPECIFIC STYLES
   ========================================
   
   This section contains styles specifically for the tradie signup page,
   ensuring the signup card is properly sized for the form content.
   ======================================== */

/* Tradie signup card container - Centers the card and makes it wider for form content */
.tradie-signup-page .about-content .service-card {
    max-width: 600px;                                          /* Maximum width for optimal form readability */
    width: 100%;                                               /* Full width up to max-width */
    margin: 0 auto;                                            /* Center the card horizontally */
    padding: 40px;                                             /* Generous padding for form elements */
    border-radius: 25px;                                       /* Large border radius for modern appearance */
    box-shadow: 0 8px 32px var(--Card_Background_Colour);     /* Subtle shadow for depth */
    min-height: auto;                                          /* Allow height to adjust to content */
    height: auto;                                              /* Override fixed height from general service-card */
    text-align: left;                                          /* Left-align form content for better readability */
}

/* Tradie signup card icon - Larger icon for better visual impact */
.tradie-signup-page .about-content .service-card .service-icon i {
    font-size: 4rem;                                           /* Larger icon size for prominence */
    margin-bottom: 25px;                                       /* More space below icon */
}

/* Tradie signup card title - Larger title for better hierarchy */
.tradie-signup-page .about-content .service-card .card-title {
    font-size: 2.2rem;                                         /* Larger font size for title */
    margin-bottom: 25px;                                       /* More space below title */
}

/* Tradie signup card description - Better spacing for description */
.tradie-signup-page .about-content .service-card .card-description {
    font-size: 1.2rem;                                         /* Larger font size for description */
    line-height: 1.8;                                          /* Better line spacing for readability */
    margin-bottom: 30px;                                       /* More space below description */
}

/* Tradie signup form - Better spacing within the card */
.tradie-signup-page .about-content .service-card form {
    margin-top: 20px;                                          /* Space above form from description */
    text-align: left;                                          /* Left-align form elements */
}

/* Tradie signup form group - Better spacing between form elements */
.tradie-signup-page .about-content .service-card .form-group {
    margin-bottom: 25px;                                       /* More space between form groups */
}

/* Tradie signup form input - Larger input for better usability */
.tradie-signup-page .about-content .service-card .form-input {
    padding: 15px 20px;                                        /* Larger padding for input field */
    font-size: 1.1rem;                                         /* Larger font size for input text */
}

/* Tradie signup form button - Larger button for better interaction */
.tradie-signup-page .about-content .service-card .btn-primary {
    padding: 18px 40px;                                        /* Larger button padding */
    font-size: 1.2rem;                                         /* Larger button text */
    margin-top: 10px;                                          /* Space above button from input */
}

/* Tradie signup form footer - Better spacing for footer text */
.tradie-signup-page .about-content .service-card .form-footer {
    margin-top: 30px;                                          /* More space above footer */
    font-size: 1.1rem;                                         /* Larger footer text */
}

/* Tradie signup pricing card - Separate styling from the form card */
.tradie-signup-page .about-content + .about-content .service-card {
    max-width: 600px !important;                               /* Same width as main form card */
    width: 100% !important;                                    /* Full width up to max-width */
    margin: 0 auto !important;                                 /* Center the card horizontally */
    padding: 40px !important;                                  /* Generous padding for content */
    border-radius: 25px !important;                            /* Large border radius for modern appearance */
    box-shadow: 0 8px 32px var(--Card_Background_Colour) !important; /* Subtle shadow for depth */
    min-height: auto !important;                               /* Allow height to adjust to content */
    height: auto !important;                                   /* Override fixed height from general service-card */
    text-align: center !important;                             /* Center-align pricing content */
    transition: all 0.3s ease !important;                      /* Smooth transition for hover effects */
}
.tradie-signup-page .about-content + .about-content .service-card:hover {
    /* Hover effects disabled */
    transform: none !important;
}

/* Postcode suggestions styling for tradie signup */
.postcode-suggestion {
    padding: 16px;                                              /* Increased padding for two-line content */
    border-bottom: 1px solid #f0f0f0;                          /* Light border between suggestions */
    cursor: pointer;                                            /* Pointer cursor for clickable items */
    transition: background-color 0.2s ease;                     /* Smooth background transition */
    background: white;                                          /* White background for suggestions */
    line-height: 1.4;                                           /* Better line spacing for readability */
}

.postcode-suggestion:hover {
    background-color: #f8f9fa;                                  /* Light gray background on hover */
}

.postcode-suggestion:last-child {
    border-bottom: none;                                        /* Remove border from last suggestion */
}

/* Postcode suggestion postcode text */
.postcode-suggestion > div:first-child {
    font-weight: 600;                                           /* Bold postcode text */
    margin-bottom: 4px;                                         /* Space between postcode and address */
    color: var(--Card_Header_Text_Colour);                      /* Use CSS variable for postcode color */
}

/* Postcode suggestion address text */
.postcode-suggestion > div:last-child {
    font-size: 0.9rem;                                          /* Smaller font for address details */
    color: var(--Card_Text_Colour);                             /* Use CSS variable for address color */
}

/* ========================================
   RESPONSIVE DESIGN - Mobile and tablet adaptations
   ========================================
   
   This section contains all the responsive design rules that adapt
   the layout for smaller screens, ensuring the site works well
   on mobile devices and tablets.
   ======================================== */
@media (max-width: 768px) {
    .page-body {
        padding-top: 90px;                                        /* Increased top padding for mobile header */
        padding-bottom: 70px;                                     /* Increased bottom padding for mobile */
    }
    
    .nav-container {
        height: 70px;                                              /* Reduced header height for mobile */
        padding: 0 15px;                                          /* Reduced horizontal padding for mobile */
    }
    
    .logo {
        height: 40px;                                              /* Smaller logo size for mobile */
    }
    
    .logo-text {
        font-size: 1.8rem;                                        /* Smaller logo text for mobile */
    }
    
    .nav-menu {
        gap: 15px;                                                 /* Reduced gap between nav items for mobile */
    }
    
    .nav-link {
        padding: 12px 20px;                                       /* Reduced button padding for mobile */
        font-size: 1rem;                                          /* Smaller font size for mobile buttons */
    }
    
    /* App store badges mobile styles */
    .search-form-with-badges {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .badge-left, .badge-right {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        align-items: center;
    }
    
    .hero-search-form {
        flex: none;
        width: 100%;
    }
    
    .badge-image {
        height: 60px;
    }
    
    .search-hero-title {
        font-size: 2.5rem;                                        /* Smaller hero title for mobile */
    }
    
    .search-hero-subtitle {
        font-size: 1.2rem;                                        /* Smaller hero subtitle for mobile */
    }
    
    /* App store image mobile styles */
    .app-store-image-absolute {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        text-align: center;
        margin: 20px auto;
        max-width: 300px;
    }
    
    .store-image {
        height: 200px;
    }
    
    .hero-search-form {
        padding: 30px;                                             /* Reduced form padding for mobile */
        border-radius: 20px;                                       /* Smaller border radius for mobile */
    }
    
    .section-title {
        font-size: 2.2rem;                                        /* Smaller section titles for mobile */
    }
    
    .about-card,
    .service-card {
        padding: 30px;                                             /* Reduced card padding for mobile */
        border-radius: 20px;                                       /* Smaller border radius for mobile */
    }
    
    .card-title {
        font-size: 1.5rem;                                        /* Smaller card titles for mobile */
    }
    
    .user-menu {
        gap: 10px;                                                 /* Reduced gap in user menu for mobile */
    }
    
    .logout-btn {
        padding: 12px 25px;                                       /* Reduced logout button padding for mobile */
        font-size: 1rem;                                          /* Smaller logout button font for mobile */
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 10px;                                           /* Minimal horizontal padding for small mobile */
    }
    
    .nav-menu {
        gap: 10px;                                                  /* Minimal gap between nav items for small mobile */
    }
    
    .nav-link {
        padding: 10px 15px;                                        /* Minimal button padding for small mobile */
        font-size: 0.9rem;                                         /* Smallest font size for small mobile */
    }
    
    .search-hero-title {
        font-size: 2rem;                                           /* Smallest hero title for small mobile */
    }
    
    .hero-search-form {
        padding: 20px;                                              /* Minimal form padding for small mobile */
    }
    
    .about-card,
    .service-card {
        padding: 25px;                                              /* Minimal card padding for small mobile */
    }
    
    /* Footer mobile styles */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .footer-logo-section {
        align-items: center;
        text-align: center;
    }
    
    .footer-logo {
        height: 50px;
    }
    
    .social-media {
        justify-content: center;
    }
    
    .footer-quick-links,
    .footer-company-info,
    .footer-support {
        text-align: center;
    }
    
    .footer-quick-links ul,
    .footer-support ul {
        align-items: center;
    }
}

/* ========================================
   DASHBOARD PAGE SPECIFIC STYLES
   ======================================== */

/* Dashboard form input styling - Apply new card styling to form inputs */
.admin-dashboard-page .search-main-input,
.admin-dashboard-page .filter-select,
.admin-dashboard-page .filter-input,
.admin-dashboard-page .rate-input,
.tradie-dashboard-page .search-main-input,
.tradie-dashboard-page .filter-select,
.tradie-dashboard-page .filter-input,
.tradie-dashboard-page .rate-input,
.subbie-dashboard-page .search-main-input,
.subbie-dashboard-page .filter-select,
.subbie-dashboard-page .filter-input,
.subbie-dashboard-page .rate-input {
    box-shadow: 0 2px 10px var(--Card_Shadow) !important;    /* Lighter shadow for form inputs */
    border: 1px solid var(--Card_Border) !important;          /* Thinner border for form inputs */
}

/* Admin Dashboard Page */
.admin-dashboard-page .dashboard-card {
    background: var(--Card_Background_Colour) !important;
    border: 2px solid var(--Card_Border) !important;                    /* Use new Card_Border variable */
    border-radius: 12px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px var(--Card_Shadow) !important;              /* Use new Card_Shadow variable */
    display: block !important;
    position: relative !important;
    transition: all 0.3s ease !important;                               /* Smooth transition for hover effects */
}
.admin-dashboard-page .dashboard-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Tradie Dashboard Page */
.tradie-dashboard-page .dashboard-card {
    background: var(--Card_Background_Colour);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 20px var(--Card_Shadow);                         /* Use new Card_Shadow variable */
    border: 2px solid var(--Card_Border);                               /* Use new Card_Border variable */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.tradie-dashboard-page .dashboard-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)); /* Use hover variables */
    box-shadow: 0 8px 30px var(--Card_Shadow);                         /* Enhanced shadow on hover */
    z-index: 2;
}

/* Disable hover lift for My Favourites cards - must override general .dashboard-card:hover rule */
.tradie-dashboard-page .dashboard-card.favourites-card:hover {
    transform: none !important; /* No lift or scale effect - use !important to override */
    box-shadow: 0 4px 20px var(--Card_Shadow) !important; /* Keep original shadow */
    z-index: 1 !important; /* Keep original z-index */
    transition: none !important; /* Disable transition to prevent animation */
}

/* Subbie Dashboard Page */
.subbie-dashboard-page .dashboard-card {
    background: var(--Card_Background_Colour);                           /* White background using CSS variable */
    padding: 30px;                                                      /* Generous padding for content spacing */
    border-radius: 15px;                                                /* Rounded corners for modern appearance */
    text-align: center;                                                 /* Center-align text content */
    box-shadow: 0 4px 20px var(--Card_Shadow);                         /* Use new Card_Shadow variable */
    border: 2px solid var(--Card_Border);                               /* Use new Card_Border variable */
    transition: all 0.3s ease;                                          /* Smooth transition for hover effects */
    position: relative;                                                  /* Enable z-index positioning */
    z-index: 1;                                                         /* Base z-index layer */
}
.subbie-dashboard-page .dashboard-card:hover {
    transform: translateY(-5px) scale(1.02);                             /* Lift up and scale on hover for performance */
    box-shadow: 0 8px 30px var(--Card_Shadow);                         /* Enhanced shadow on hover */
    z-index: 2;                                                          /* Higher z-index on hover for layering */
}

/* Profile Summary Grid - Individual cards within the main profile summary card */
.subbie-dashboard-page .profile-summary-grid .summary-item {
    background: var(--Card_Background_Colour);                           /* White background using CSS variable */
    border: 2px solid var(--Card_Border);                               /* Black border using CSS variable */
    border-radius: 12px;                                                /* Rounded corners for modern appearance */
    padding: 20px;                                                      /* Internal spacing for content */
    box-shadow: 0 2px 10px var(--Card_Shadow);                         /* Subtle shadow for depth */
    transition: all 0.3s ease;                                          /* Smooth transition for hover effects */
    position: relative;                                                  /* Enable z-index positioning */
    z-index: 1;                                                         /* Base z-index layer */
}

.subbie-dashboard-page .profile-summary-grid .summary-item:hover {
    transform: translateY(-5px) scale(1.02);                             /* Lift up and scale on hover for performance */
    box-shadow: 0 4px 20px var(--Card_Shadow);                         /* Enhanced shadow on hover */
    z-index: 2;                                                          /* Higher z-index on hover for layering */
}

.subbie-dashboard-page .profile-summary-grid .summary-item h4 {
    color: var(--Card_Header_Text_Colour);                               /* Dark purple color for headings */
    font-size: 1.1rem;                                                   /* Appropriate font size for subheadings */
    font-weight: 600;                                                     /* Semi-bold weight for emphasis */
    margin: 0 0 15px 0;                                                  /* Space below heading, no top/left/right margins */
    display: flex;                                                        /* Use flexbox for icon and text alignment */
    align-items: center;                                                  /* Center items vertically */
    gap: 10px;                                                            /* Space between icon and text */
}

.subbie-dashboard-page .profile-summary-grid .summary-item h4 i {
    color: var(--Card_Icon_Colour);                                       /* Orange color for icons */
    font-size: 1rem;                                                      /* Icon size relative to heading text */
}

.subbie-dashboard-page .profile-summary-grid .summary-item p {
    color: var(--Card_Text_Colour);                                       /* Purple color for description text */
    margin: 0;                                                             /* Remove default paragraph margins */
    font-size: 0.9rem;                                                    /* Smaller font size for descriptions */
    line-height: 1.4;                                                     /* Comfortable line spacing for readability */
}

/* Profile Summary Grid Layout */
.subbie-dashboard-page .profile-summary-grid {
    display: grid;                                                         /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));          /* Responsive columns with minimum 250px width */
    gap: 25px;                                                             /* Space between grid items */
    margin-top: 20px;                                                      /* Space above the grid from previous content */
}

/* Ensure summary items have consistent sizing */
.subbie-dashboard-page .profile-summary-grid .summary-item {
    min-height: 120px;                                                     /* Minimum height for consistent card appearance */
    display: flex;                                                          /* Use flexbox for vertical layout */
    flex-direction: column;                                                 /* Stack content vertically */
    justify-content: flex-start;                                            /* Start content from top of card */
}

/* Dashboard Header Styles */
.subbie-dashboard-page .dashboard-title {
    color: var(--Body_Text_Colour) !important;                             /* Blue color for main dashboard title */
    font-size: 2.5rem;                                                     /* Large font size for main heading */
    font-weight: 700;                                                      /* Bold weight for emphasis */
    margin: 0 0 10px 0;                                                    /* Space below title, no other margins */
}

.subbie-dashboard-page .dashboard-subtitle {
    color: var(--Body_Text_Colour) !important;                             /* Blue color for subtitle text */
    font-size: 1.1rem;                                                     /* Medium font size for subtitle */
    margin: 0;                                                              /* Remove default margins */
    opacity: 0.9;                                                           /* Slightly transparent for visual hierarchy */
}

/* Active Slider Styles */
.active-slider-container {
    display: flex;                                                          /* Use flexbox for horizontal layout */
    align-items: center;                                                    /* Center items vertically */
    gap: 10px;                                                              /* Space between slider and label */
}

.active-slider {
    width: 100px;                                                          /* Fixed width for consistent slider size */
    height: 48px;                                                           /* Fixed height for consistent slider size */
    background: #ff4444;                                                    /* Red background for inactive state */
    border-radius: 24px;                                                    /* Rounded corners for pill shape */
    cursor: pointer;                                                        /* Pointer cursor for clickable element */
    position: relative;                                                     /* Enable absolute positioning for thumb */
    transition: background 0.3s ease;                                       /* Smooth background color transition */
}

.active-slider.active {
    background: #4CAF50;                                                    /* Green background for active state */
}

.active-slider-thumb {
    width: 40px;                                                             /* Fixed width for circular thumb */
    height: 40px;                                                             /* Fixed height for circular thumb */
    background: white;                                                        /* White background for thumb */
    border-radius: 50%;                                                       /* Circular shape for thumb */
    position: absolute;                                                       /* Position relative to slider container */
    top: 4px;                                                                 /* 4px from top for centering */
    left: 4px;                                                                /* 4px from left for initial position */
    transition: transform 0.3s ease;                                          /* Smooth movement transition */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);                              /* Subtle shadow for depth */
}

.active-slider.active .active-slider-thumb {
    transform: translateX(52px);                                             /* Move thumb to right for active state */
}

.active-slider.disabled {
    background: #ccc !important;                                             /* Gray background for disabled state */
    cursor: not-allowed !important;                                          /* Not-allowed cursor for disabled state */
    opacity: 0.6;                                                            /* Reduced opacity for disabled appearance */
}

.active-slider.disabled .active-slider-thumb {
    background: #999 !important;                                             /* Darker thumb for disabled state */
}

/* ========================================
   FORCE ADMIN DASHBOARD CARDS TO DISPLAY
   ======================================== */

/* Force dashboard cards to be visible using CSS variables */
.dashboard-card {
    background: var(--Card_Background_Colour) !important;                /* White background using CSS variable */
    border: 2px solid var(--Card_Border) !important;                    /* Use new Card_Border variable */
    border-radius: 12px !important;                                      /* Rounded corners for modern appearance */
    padding: 25px !important;                                            /* Generous padding for content spacing */
    margin-bottom: 20px !important;                                      /* Space below each card */
    box-shadow: 0 4px 20px var(--Card_Shadow) !important;              /* Use new Card_Shadow variable */
    display: block !important;                                           /* Force display as block element */
    position: relative !important;                                       /* Enable z-index positioning */
    transition: all 0.3s ease !important;                               /* Smooth transition for hover effects */
}
.dashboard-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Override hover effect for My Favourites cards - must be after general rule */
.dashboard-card.favourites-card:hover {
    transform: none !important;                                            /* No lift or scale effect for favourites */
    box-shadow: 0 4px 20px var(--Card_Shadow) !important;                /* Keep original shadow */
    z-index: 1 !important;                                                /* Keep original z-index */
    transition: none !important;                                           /* Disable transition to prevent animation */
}

.dashboard-grid {
    display: grid !important;                                              /* Use CSS Grid for responsive layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; /* Responsive columns with minimum 300px width */
    gap: 25px !important;                                                  /* Space between grid items */
    margin-bottom: 30px !important;                                        /* Space below the grid */
}

.dashboard {
    padding: 20px !important;                                              /* Internal spacing for dashboard */
    max-width: 1400px !important;                                          /* Maximum width for large screens */
    margin: 0 auto !important;                                             /* Center dashboard horizontally */
}

.dashboard-container {
    background: var(--Body_Background_Colour) !important;                   /* Blue background using CSS variable */
    border-radius: 12px !important;                                        /* Rounded corners for modern appearance */
    padding: 30px !important;                                              /* Generous padding for content spacing */
}

.dashboard-header {
    text-align: center !important;                                          /* Center-align header content */
    margin-bottom: 40px !important;                                         /* Space below header section */
}

.dashboard-title {
    font-size: 2.5rem !important;                                           /* Large font size for main dashboard title */
    font-weight: 700 !important;                                            /* Bold weight for emphasis */
    color: var(--Card_Header_Text_Colour) !important;                       /* Dark purple color for title */
    margin: 0 0 10px 0 !important;                                         /* Space below title, no other margins */
}

.dashboard-subtitle {
    font-size: 1.1rem !important;                                           /* Medium font size for subtitle */
    color: var(--Card_Text_Colour) !important;                              /* Purple color for subtitle text */
    margin: 0 !important;                                                    /* Remove default margins */
}

.dashboard-card h3 {
    color: var(--Card_Header_Text_Colour) !important;                       /* Dark purple color for card headings */
    font-size: 1.2rem !important;                                           /* Medium font size for subheadings */
    font-weight: 600 !important;                                             /* Semi-bold weight for emphasis */
    margin: 0 0 15px 0 !important;                                          /* Space below heading, no other margins */
    display: flex !important;                                                /* Use flexbox for icon and text alignment */
    align-items: center !important;                                          /* Center items vertically */
    gap: 10px !important;                                                    /* Space between icon and text */
}

.dashboard-card h3 i {
    color: var(--Card_Icon_Colour) !important;                               /* Orange color for heading icons */
    font-size: 1.1rem !important;                                           /* Icon size relative to heading text */
}

.dashboard-card h2 {
    color: var(--Card_Header_Colour) !important;                             /* Dark purple color for main headings */
    font-size: 2rem !important;                                              /* Large font size for main headings */
    font-weight: 700 !important;                                             /* Bold weight for emphasis */
    margin: 0 !important;                                                     /* Remove default margins */
}

.dashboard-card p {
    color: var(--Card_Text_Colour) !important;                               /* Purple color for paragraph text */
    margin: 5px 0 !important;                                                /* Vertical spacing between paragraphs */
    font-size: 0.9rem !important;                                           /* Smaller font size for body text */
}

.stats-content {
    display: flex !important;                                                /* Use flexbox for horizontal layout */
    justify-content: space-between !important;                               /* Distribute space between left and right */
    align-items: center !important;                                          /* Center items vertically */
}

.stats-left {
    flex: 1 !important;                                                      /* Take remaining space on the left */
}

.stats-right {
    text-align: right !important;                                            /* Right-align text content */
}

.card-description {
    color: var(--Card_Text_Colour) !important;                               /* Purple color for description text */
    margin-bottom: 20px !important;                                          /* Space below description */
    font-size: 0.95rem !important;                                           /* Medium font size for descriptions */
    line-height: 1.4 !important;                                             /* Comfortable line spacing for readability */
}

.user-tools-buttons {
    display: flex !important;                                                 /* Use flexbox for horizontal button layout */
    gap: 8px !important;                                                     /* Space between buttons */
    flex-wrap: wrap !important;                                              /* Allow buttons to wrap to next line */
}

.user-tools-buttons .btn,
.user-tools-buttons .btn-primary {
    flex: 1 !important;                                                      /* Make all buttons equal width */
    min-width: 120px !important;                                             /* Minimum width for readability */
    height: 40px !important;                                                 /* Consistent height for all buttons */
    white-space: nowrap !important;                                          /* Prevent text wrapping */
    text-align: center !important;                                           /* Center text in buttons */
    font-size: 0.9rem !important;                                            /* Consistent font size */
    padding: 8px 12px !important;                                            /* Consistent padding */
    margin: 0 !important;                                                    /* Remove any margins */
    width: auto !important;                                                  /* Let flex handle width */
    display: flex !important;                                                /* Use flex for centering */
    align-items: center !important;                                          /* Center content vertically */
    justify-content: center !important;                                      /* Center content horizontally */
    box-sizing: border-box !important;                                       /* Include padding in dimensions */
}

.loading-text {
    text-align: center !important;                                            /* Center-align loading message */
    color: var(--Card_Text_Colour) !important;                               /* Purple color for loading text */
    padding: 20px !important;                                                 /* Internal spacing for loading message */
}

.btn {
    display: inline-block !important;                                        /* Display as inline-block for proper sizing */
    padding: 10px 20px !important;                                          /* Internal spacing for button content */
    border: none !important;                                                 /* Remove default button border */
    border-radius: 6px !important;                                          /* Rounded corners for modern appearance */
    font-size: 0.9rem !important;                                           /* Appropriate font size for buttons */
    font-weight: 500 !important;                                             /* Medium weight for readability */
    text-decoration: none !important;                                        /* Remove any link underlines */
    cursor: pointer !important;                                               /* Pointer cursor for clickable element */
    transition: all 0.3s ease !important;                                    /* Smooth transition for hover effects */
    text-align: center !important;                                           /* Center-align button text */
}

.btn-primary {
    background: var(--Reveal_Button_BG_Colour) !important;                   /* Orange background using CSS variable */
    color: var(--Reveal_Button_Text_Colour) !important;                      /* White text using CSS variable */
}

.btn-primary:hover {
    background: var(--Header_Button_BG_Colour) !important;                    /* Darker orange background on hover */
    transform: translateY(-1px) !important;                                   /* Slight lift effect on hover */
}

.btn-secondary {
    background: var(--Card_Button_Colour) !important;                         /* Orange background using CSS variable */
    color: var(--Reveal_Button_Text_Colour) !important;                       /* White text using CSS variable */
    border: 1px solid var(--Card_Button_Colour) !important;                   /* Orange border for consistency */
}

.btn-secondary:hover {
    background: var(--Header_Button_BG_Colour) !important;                    /* Darker orange background on hover */
    color: var(--Header_Button_Text_Colour) !important;                       /* White text on hover */
    transform: translateY(-1px) !important;                                   /* Slight lift effect on hover */
}

/* Force page wrapper to show using CSS variables */
.admin-dashboard {
    background: var(--Body_Background_Colour) !important;                    /* Blue background using CSS variable */
    min-height: 100vh !important;                                           /* Minimum height of viewport */
}

/* ========================================
   MARKETING CARDS MANAGEMENT STYLES
   ======================================== */

/* Marketing cards filter buttons - Active state styling */
.filter-btn.active {
    background: var(--Header_Button_BG_Colour) !important;                   /* Orange background for active filter */
    color: var(--Header_Button_Text_Colour) !important;                      /* White text for contrast */
}

/* Marketing card status badges - Using CSS variables for consistency */
.badge-success { 
    background: var(--Success_Colour);                                       /* Green background for success status */
    color: var(--Header_Button_Text_Colour);                                 /* White text for contrast */
    padding: 4px 8px;                                                        /* Comfortable padding */
    border-radius: 4px;                                                      /* Rounded corners */
    font-size: 12px;                                                         /* Small font size for badges */
}

.badge-secondary { 
    background: var(--Body_Text_Colour);                                     /* Gray background for secondary status */
    color: var(--Header_Button_Text_Colour);                                 /* White text for contrast */
    padding: 4px 8px;                                                        /* Comfortable padding */
    border-radius: 4px;                                                      /* Rounded corners */
    font-size: 12px;                                                         /* Small font size for badges */
}

.badge-warning { 
    background: var(--Warning_Colour);                                       /* Yellow background for warning status */
    color: var(--Body_Text_Colour);                                          /* Dark text for contrast */
    padding: 4px 8px;                                                        /* Comfortable padding */
    border-radius: 4px;                                                      /* Rounded corners */
    font-size: 12px;                                                         /* Small font size for badges */
}

.badge-danger { 
    background: var(--Error_Colour);                                         /* Red background for danger status */
    color: var(--Header_Button_Text_Colour);                                 /* White text for contrast */
    padding: 4px 8px;                                                        /* Comfortable padding */
    border-radius: 4px;                                                      /* Rounded corners */
    font-size: 12px;                                                         /* Small font size for badges */
}

.badge-dark { 
    background: var(--Header_Background_Colour);                             /* Dark background for dark status */
    color: var(--Header_Button_Text_Colour);                                 /* White text for contrast */
    padding: 4px 8px;                                                        /* Comfortable padding */
    border-radius: 4px;                                                      /* Rounded corners */
    font-size: 12px;                                                         /* Small font size for badges */
}

/* Marketing card items - Using existing card styling variables */
.card-item {
    background: var(--Card_Background_Colour);                               /* Card background using CSS variable */
    border: 1px solid var(--Card_Border_Colour);                             /* Card border using CSS variable */
    border-radius: 8px;                                                      /* Rounded corners for modern look */
    padding: 15px;                                                           /* Comfortable padding */
    margin-bottom: 15px;                                                     /* Space between cards */
    transition: all 0.3s ease;                                               /* Smooth transition for hover effects */
    box-shadow: var(--Shadow_Light);                                         /* Light shadow using CSS variable */
}

.card-item:hover {
    box-shadow: var(--Shadow_Medium);                                        /* Medium shadow on hover using CSS variable */
    transform: translateY(-2px);                                             /* Slight lift effect on hover */
}

/* Marketing card action buttons - Using existing button styling */
.btn-sm {
    padding: 8px 16px;                                                       /* Smaller padding for small buttons */
    font-size: 0.9rem;                                                       /* Smaller font size for small buttons */
    border-radius: 4px;                                                      /* Rounded corners */
    border: none;                                                            /* No border for clean look */
    cursor: pointer;                                                         /* Pointer cursor on hover */
    transition: all 0.3s ease;                                               /* Smooth transition for all changes */
    margin: 0 5px;                                                           /* Small margin between buttons */
}

.btn-warning {
    background: var(--Warning_Colour);                                       /* Yellow background for warning buttons */
    color: var(--Body_Text_Colour);                                          /* Dark text for contrast */
}

.btn-warning:hover {
    background: var(--Header_Button_BG_Colour);                              /* Orange background on hover */
    color: var(--Header_Button_Text_Colour);                                 /* White text on hover */
    transform: translateY(-1px);                                             /* Slight lift effect on hover */
}

.btn-success {
    background: var(--Success_Colour);                                       /* Green background for success buttons */
    color: var(--Header_Button_Text_Colour);                                 /* White text for contrast */
}

.btn-success:hover {
    background: var(--Header_Button_BG_Colour);                              /* Orange background on hover */
    color: var(--Header_Button_Text_Colour);                                 /* White text on hover */
    transform: translateY(-1px);                                             /* Slight lift effect on hover */
}

.btn-info {
    background: var(--Card_Button_Colour);                                   /* Orange background for info buttons */
    color: var(--Header_Button_Text_Colour);                                 /* White text for contrast */
}

.btn-info:hover {
    background: var(--Header_Button_BG_Colour);                              /* Darker orange background on hover */
    transform: translateY(-1px);                                             /* Slight lift effect on hover */
}

/* Marketing card layout - Using flexbox for proper alignment */
.card-header {
    display: flex;                                                            /* Flexbox layout for card header */
    justify-content: space-between;                                           /* Space between content and actions */
    align-items: flex-start;                                                  /* Align items to top */
    margin-bottom: 10px;                                                      /* Space below header */
}

.card-content {
    flex: 1;                                                                  /* Take up remaining space */
}

.card-actions {
    display: flex;                                                            /* Flexbox layout for actions */
    flex-direction: column;                                                   /* Stack actions vertically */
    align-items: flex-end;                                                    /* Align actions to right */
    gap: 10px;                                                                /* Space between action elements */
}

.action-buttons {
    display: flex;                                                            /* Flexbox layout for buttons */
    gap: 5px;                                                                 /* Space between buttons */
}

/* Marketing card text styling - Using CSS variables */
.card-meta {
    margin: 0 0 5px 0;                                                        /* Small margin between meta lines */
    color: var(--Body_Text_Colour);                                           /* Use body text color for meta info */
    font-size: 12px;                                                          /* Smaller font size for meta info */
    opacity: 0.8;                                                             /* Slightly transparent for hierarchy */
}

/* Marketing card time info - Using CSS variables */
.card-time-info {
    color: var(--Body_Text_Colour);                                           /* Use body text color for time info */
    font-size: 12px;                                                          /* Smaller font size for time info */
    opacity: 0.8;                                                             /* Slightly transparent for hierarchy */
}

/* Marketing card modal styling - Using CSS variables */
.modal-title {
    margin-bottom: 20px;                                                      /* Space below title */
    color: var(--Card_Text_Colour);                                           /* Use card text color for title */
    font-size: 1.5rem;                                                        /* Large font size for modal title */
    font-weight: 600;                                                         /* Semi-bold weight for emphasis */
}

.modal-grid {
    display: grid;                                                            /* Grid layout for modal sections */
    grid-template-columns: 1fr 1fr;                                           /* Two equal columns */
    gap: 20px;                                                                /* Space between columns */
    margin-bottom: 20px;                                                      /* Space below grid */
}

.modal-section {
    margin-bottom: 20px;                                                      /* Space below each section */
}

.modal-section-title {
    color: var(--Card_Text_Colour);                                           /* Use card text color for section titles */
    margin-bottom: 10px;                                                      /* Space below section title */
    font-size: 1.1rem;                                                        /* Medium font size for section titles */
    font-weight: 600;                                                         /* Semi-bold weight for emphasis */
}

.targeting-grid {
    display: grid;                                                            /* Grid layout for targeting info */
    grid-template-columns: 1fr 1fr;                                           /* Two equal columns */
    gap: 10px;                                                                /* Space between columns */
}

.activity-list {
    max-height: 200px;                                                        /* Limit height for scrolling */
    overflow-y: auto;                                                         /* Enable vertical scrolling */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
    padding: 10px;                                                            /* Padding inside activity list */
    border-radius: 4px;                                                       /* Rounded corners */
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
}

.activity-item {
    padding: 5px 0;                                                           /* Padding for each activity item */
    border-bottom: 1px solid var(--Shadow_Light);                             /* Light border between items */
    color: var(--Body_Text_Colour);                                           /* Use body text color for activity text */
    font-size: 0.9rem;                                                        /* Smaller font size for activity items */
}

.activity-item:last-child {
    border-bottom: none;                                                      /* Remove border from last item */
}

.modal-footer {
    margin-top: 20px;                                                         /* Space above footer */
    text-align: right;                                                        /* Right-align footer content */
}

/* Marketing cards filter section - Using CSS variables */
.modal-description {
    margin-bottom: 20px;                                                      /* Space below description */
    color: var(--Card_Text_Colour);                                           /* Use card text color for description */
    font-size: 1rem;                                                          /* Normal font size for description */
    line-height: 1.5;                                                         /* Comfortable line height for readability */
}

.filter-section {
    margin-bottom: 20px;                                                      /* Space below filter section */
}

.filter-buttons {
    display: flex;                                                            /* Flexbox layout for filter buttons */
    gap: 10px;                                                                /* Space between buttons */
    margin-bottom: 15px;                                                      /* Space below buttons */
    flex-wrap: wrap;                                                          /* Wrap buttons on smaller screens */
}

.cards-count {
    color: var(--Body_Text_Colour);                                           /* Use body text color for count */
    font-size: 14px;                                                          /* Small font size for count */
    margin-bottom: 10px;                                                      /* Space below count */
    opacity: 0.8;                                                             /* Slightly transparent for hierarchy */
}

.cards-container {
    margin-bottom: 20px;                                                      /* Space below cards container */
}

/* ========================================
   MARKETING CALENDAR STYLES
   ======================================== */

/* Calendar navigation - Using CSS variables */
.calendar-navigation {
    display: flex;                                                            /* Flexbox layout for navigation */
    justify-content: space-between;                                           /* Space between buttons and title */
    align-items: center;                                                      /* Center align items vertically */
    margin-bottom: 20px;                                                      /* Space below navigation */
    padding: 15px;                                                            /* Padding around navigation */
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    border-radius: 8px;                                                       /* Rounded corners */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
}

.calendar-month-title {
    color: var(--Card_Text_Colour);                                           /* Use card text color for title */
    font-size: 1.3rem;                                                        /* Large font size for month title */
    font-weight: 600;                                                         /* Semi-bold weight for emphasis */
    margin: 0;                                                                /* Remove default margins */
}

/* Calendar container - Using CSS variables */
.calendar-container {
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
    border-radius: 12px;                                                      /* Rounded corners */
    padding: 25px;                                                            /* Padding inside container */
    box-shadow: var(--Shadow_Medium);                                         /* Medium shadow using CSS variable */
    margin-top: 20px;                                                         /* Space above calendar */
}

/* Calendar week styling */
.calendar-week {
    display: contents;                                                        /* Use grid layout for weeks */
}

/* Calendar day hover effects */
.calendar-day:hover .day-number {
    color: var(--Header_Button_BG_Colour);                                    /* Highlight day number on hover */
    transform: scale(1.1);                                                    /* Slight scale effect */
}

/* All calendar days have the same styling - no weekend differentiation */

.calendar-loading, .calendar-error {
    text-align: center;                                                       /* Center align loading/error text */
    padding: 40px;                                                            /* Padding around text */
    color: var(--Body_Text_Colour);                                           /* Use body text color */
    font-size: 1.1rem;                                                        /* Medium font size */
}

.calendar-error {
    color: var(--Error_Colour);                                               /* Use error color for error messages */
}

/* Calendar grid - Using CSS variables */
.calendar-grid {
    display: grid;                                                            /* Grid layout for calendar */
    grid-template-columns: repeat(7, 1fr);                                    /* 7 equal columns for days of week */
    gap: 0;                                                                   /* No gap for seamless calendar look */
    background: var(--Card_Border_Colour);                                    /* Background using CSS variable */
    border-radius: 8px;                                                       /* Rounded corners */
    overflow: hidden;                                                         /* Hide overflow for clean edges */
    border: 2px solid var(--Card_Border_Colour);                              /* Border around entire calendar */
    box-shadow: var(--Shadow_Medium);                                         /* Medium shadow for depth */
}

.calendar-header {
    display: contents;                                                        /* Use grid layout for header */
}

.calendar-day-header {
    background: var(--Header_Background_Colour);                              /* Header background using CSS variable */
    color: var(--Header_Button_Text_Colour);                                  /* Header text color using CSS variable */
    padding: 15px 8px;                                                        /* Padding for header cells */
    text-align: center;                                                       /* Center align header text */
    font-weight: 700;                                                         /* Bold weight for headers */
    font-size: 1rem;                                                          /* Normal font size for headers */
    text-transform: uppercase;                                                /* Uppercase day names */
    letter-spacing: 0.5px;                                                    /* Letter spacing for readability */
    border-right: 1px solid var(--Card_Border_Colour);                        /* Right border for separation */
    border-bottom: 2px solid var(--Card_Border_Colour);                       /* Bottom border for separation */
}

.calendar-days {
    display: contents;                                                        /* Use grid layout for days */
}

.calendar-day {
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    min-height: 120px;                                                        /* Minimum height for day cells */
    padding: 12px;                                                            /* Padding inside day cells */
    cursor: pointer;                                                          /* Pointer cursor for clickable days */
    transition: all 0.3s ease;                                                /* Smooth transition for hover effects */
    border-right: 1px solid var(--Card_Border_Colour);                        /* Right border for grid lines */
    border-bottom: 1px solid var(--Card_Border_Colour);                       /* Bottom border for grid lines */
    position: relative;                                                       /* Position relative for absolute elements */
    display: flex;                                                            /* Flexbox layout for day content */
    flex-direction: column;                                                   /* Stack day number and cards vertically */
}

.calendar-day:hover {
    background: var(--Search_Hero_Pill_BG_Colour);                            /* Hover background using CSS variable */
    border-color: var(--Card_Button_Colour);                                  /* Hover border using CSS variable */
    transform: translateY(-1px);                                              /* Slight lift effect on hover */
}

.calendar-day.today {
    background: var(--Card_Button_Colour);                                    /* Today background using CSS variable */
    color: var(--Header_Button_Text_Colour);                                  /* Today text color using CSS variable */
    font-weight: 700;                                                         /* Bold weight for today */
    position: relative;                                                       /* Position relative for pseudo-element */
}

.calendar-day.today::before {
    content: '';                                                              /* Empty content for pseudo-element */
    position: absolute;                                                       /* Absolute positioning */
    top: 0;                                                                   /* Top edge */
    left: 0;                                                                  /* Left edge */
    right: 0;                                                                 /* Right edge */
    bottom: 0;                                                                /* Bottom edge */
    border: 3px solid var(--Header_Button_BG_Colour);                         /* Thick border using CSS variable */
    border-radius: 4px;                                                       /* Rounded corners */
    pointer-events: none;                                                     /* Don't interfere with clicks */
}

.calendar-day.empty {
    background: var(--Body_Background_Colour);                                /* Empty day background using CSS variable */
    cursor: default;                                                          /* Default cursor for empty days */
}

.calendar-day.empty:hover {
    background: var(--Body_Background_Colour);                                /* No hover effect for empty days */
    transform: none;                                                          /* No transform for empty days */
}

.day-number {
    font-weight: 700;                                                         /* Bold weight for day numbers */
    margin-bottom: 8px;                                                       /* Space below day number */
    color: var(--Card_Text_Colour);                                           /* Use card text color for day numbers */
    font-size: 1.1rem;                                                        /* Larger font size for day numbers */
    text-align: left;                                                         /* Left align day numbers */
    line-height: 1;                                                           /* Tight line height */
}

.day-cards {
    display: flex;                                                            /* Flexbox layout for cards */
    flex-direction: column;                                                   /* Stack cards vertically */
    gap: 2px;                                                                 /* Small gap between cards */
}

.calendar-card {
    background: var(--Card_Button_Colour);                                    /* Card background using CSS variable */
    color: var(--Header_Button_Text_Colour);                                  /* Card text color using CSS variable */
    padding: 4px 8px;                                                         /* Padding for cards */
    border-radius: 4px;                                                       /* Rounded corners for cards */
    font-size: 0.8rem;                                                        /* Font size for cards */
    font-weight: 600;                                                         /* Medium weight for cards */
    white-space: nowrap;                                                      /* Prevent text wrapping */
    overflow: hidden;                                                         /* Hide overflow text */
    text-overflow: ellipsis;                                                  /* Show ellipsis for overflow */
    cursor: pointer;                                                          /* Pointer cursor for cards */
    transition: all 0.2s ease;                                                /* Smooth transition for hover effects */
    border: 1px solid rgba(255, 255, 255, 0.2);                              /* Subtle border for cards */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);                                /* Subtle shadow for depth */
    margin-bottom: 2px;                                                       /* Space between cards */
}

.calendar-card:hover {
    background: var(--Header_Button_BG_Colour);                               /* Hover background using CSS variable */
    transform: scale(1.05);                                                   /* Slight scale effect on hover */
}

/* Calendar card status colors - Using CSS variables */
.calendar-card.active {
    background: var(--Success_Colour);                                        /* Green background for active cards */
}

.calendar-card.disabled {
    background: var(--Body_Text_Colour);                                      /* Gray background for disabled cards */
}

.calendar-card.payment_pending {
    background: var(--Warning_Colour);                                        /* Yellow background for pending cards */
    color: var(--Body_Text_Colour);                                           /* Dark text for yellow background */
}

.calendar-card.payment_timeout {
    background: var(--Error_Colour);                                          /* Red background for timeout cards */
}

.calendar-card.expired {
    background: var(--Header_Background_Colour);                              /* Dark background for expired cards */
}

/* Day details modal - Using CSS variables */
.day-cards-list {
    max-height: 400px;                                                        /* Limit height for scrolling */
    overflow-y: auto;                                                         /* Enable vertical scrolling */
}

.day-card-item {
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
    border-radius: 6px;                                                       /* Rounded corners */
    padding: 15px;                                                            /* Padding inside card items */
    margin-bottom: 10px;                                                      /* Space between card items */
    transition: all 0.3s ease;                                                /* Smooth transition for hover effects */
}

.day-card-item:hover {
    box-shadow: var(--Shadow_Medium);                                         /* Medium shadow on hover using CSS variable */
    transform: translateY(-1px);                                              /* Slight lift effect on hover */
}

.day-card-header {
    display: flex;                                                            /* Flexbox layout for header */
    justify-content: space-between;                                           /* Space between title and badge */
    align-items: center;                                                      /* Center align items vertically */
    margin-bottom: 8px;                                                       /* Space below header */
}

.day-card-title {
    color: var(--Card_Text_Colour);                                           /* Use card text color for titles */
    font-size: 1.1rem;                                                        /* Medium font size for titles */
    font-weight: 600;                                                         /* Semi-bold weight for titles */
    margin: 0;                                                                /* Remove default margins */
}

.day-card-content {
    color: var(--Body_Text_Colour);                                           /* Use body text color for content */
    margin: 8px 0;                                                            /* Space above and below content */
    line-height: 1.4;                                                         /* Comfortable line height */
}

.day-card-meta {
    color: var(--Body_Text_Colour);                                           /* Use body text color for meta info */
    font-size: 0.9rem;                                                        /* Small font size for meta info */
    margin: 4px 0;                                                            /* Small space above and below meta */
    opacity: 0.8;                                                             /* Slightly transparent for hierarchy */
}

/* ========================================
   CALENDAR RESPONSIVE DESIGN
   ======================================== */

/* Mobile calendar adjustments */
@media (max-width: 768px) {
    .calendar-container {
        padding: 15px;                                                        /* Reduce padding on mobile */
        margin-top: 15px;                                                     /* Reduce margin on mobile */
    }
    
    .calendar-day {
        min-height: 80px;                                                     /* Reduce height on mobile */
        padding: 8px;                                                         /* Reduce padding on mobile */
    }
    
    .calendar-day-header {
        padding: 10px 4px;                                                    /* Reduce header padding on mobile */
        font-size: 0.8rem;                                                    /* Smaller header text on mobile */
    }
    
    .day-number {
        font-size: 1rem;                                                      /* Smaller day numbers on mobile */
        margin-bottom: 4px;                                                   /* Reduce margin on mobile */
    }
    
    .calendar-card {
        font-size: 0.7rem;                                                    /* Smaller card text on mobile */
        padding: 2px 4px;                                                     /* Reduce card padding on mobile */
    }
    
    .calendar-navigation {
        flex-direction: column;                                               /* Stack navigation on mobile */
        gap: 10px;                                                            /* Add gap between elements */
    }
    
    .calendar-month-title {
        font-size: 1.1rem;                                                    /* Smaller title on mobile */
    }
}

/* Tablet calendar adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .calendar-day {
        min-height: 100px;                                                    /* Medium height on tablet */
    }
    
    .calendar-card {
        font-size: 0.75rem;                                                   /* Medium card text on tablet */
    }
}

/* ========================================
   NO CARD MANAGEMENT STYLES
   ======================================== */

/* No Card loading and error states - Using CSS variables */
.no-card-loading, .no-card-error {
    text-align: center;                                                       /* Center align loading/error text */
    padding: 40px;                                                            /* Padding around text */
    color: var(--Body_Text_Colour);                                           /* Use body text color */
    font-size: 1.1rem;                                                        /* Medium font size */
}

.no-card-error {
    color: var(--Error_Colour);                                               /* Use error color for error messages */
}

/* No Card settings container - Using CSS variables */
.no-card-settings {
    display: grid;                                                            /* Grid layout for settings */
    grid-template-columns: 1fr 1fr;                                           /* Two equal columns */
    gap: 30px;                                                                /* Gap between columns */
    margin-top: 20px;                                                         /* Space above settings */
}

/* No Card preview section - Using CSS variables */
.no-card-preview {
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
    border-radius: 8px;                                                       /* Rounded corners */
    padding: 20px;                                                            /* Padding inside preview */
    box-shadow: var(--Shadow_Light);                                          /* Light shadow using CSS variable */
}

.no-card-preview-title {
    color: var(--Card_Text_Colour);                                           /* Use card text color for title */
    font-size: 1.2rem;                                                        /* Large font size for title */
    font-weight: 600;                                                         /* Semi-bold weight for title */
    margin-bottom: 15px;                                                      /* Space below title */
}

.no-card-preview-content {
    display: flex;                                                            /* Flexbox layout for content */
    flex-direction: column;                                                   /* Stack items vertically */
    gap: 15px;                                                                /* Gap between items */
}

.no-card-image-container {
    text-align: center;                                                       /* Center align image */
    background: var(--Body_Background_Colour);                                /* Background using CSS variable */
    border-radius: 6px;                                                       /* Rounded corners */
    padding: 15px;                                                            /* Padding around image */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
}

.no-card-preview-image {
    max-width: 100%;                                                          /* Responsive image width */
    max-height: 200px;                                                        /* Limit image height */
    border-radius: 4px;                                                       /* Rounded corners for image */
    box-shadow: var(--Shadow_Light);                                          /* Light shadow for image */
}

.no-card-details {
    display: flex;                                                            /* Flexbox layout for details */
    flex-direction: column;                                                   /* Stack details vertically */
    gap: 8px;                                                                 /* Gap between detail items */
}

.no-card-title {
    color: var(--Card_Text_Colour);                                           /* Use card text color for title */
    font-size: 1.1rem;                                                        /* Medium font size for title */
    font-weight: 600;                                                         /* Semi-bold weight for title */
    margin: 0;                                                                /* Remove default margins */
}

.no-card-status {
    color: var(--Body_Text_Colour);                                           /* Use body text color for status */
    font-size: 0.9rem;                                                        /* Small font size for status */
    margin: 0;                                                                /* Remove default margins */
}

.no-card-meta {
    color: var(--Body_Text_Colour);                                           /* Use body text color for meta */
    font-size: 0.8rem;                                                        /* Small font size for meta */
    margin: 0;                                                                /* Remove default margins */
    opacity: 0.8;                                                             /* Slightly transparent for hierarchy */
}

/* No Card form section - Using CSS variables */
.no-card-form {
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
    border-radius: 8px;                                                       /* Rounded corners */
    padding: 20px;                                                            /* Padding inside form */
    box-shadow: var(--Shadow_Light);                                          /* Light shadow using CSS variable */
}

.no-card-form-title {
    color: var(--Card_Text_Colour);                                           /* Use card text color for title */
    font-size: 1.2rem;                                                        /* Large font size for title */
    font-weight: 600;                                                         /* Semi-bold weight for title */
    margin-bottom: 20px;                                                      /* Space below title */
}

/* Form styling - Using CSS variables */
.form-group {
    margin-bottom: 20px;                                                      /* Space below form group */
}

/* File upload styling - Using CSS variables */
.file-upload-container {
    display: flex;                                                            /* Flexbox layout for upload container */
    flex-direction: column;                                                   /* Stack items vertically */
    gap: 10px;                                                                /* Gap between upload elements */
}

.file-input {
    display: none;                                                            /* Hide the actual file input */
}

.file-upload-label {
    display: flex;                                                            /* Flexbox layout for label */
    align-items: center;                                                      /* Center align items vertically */
    justify-content: center;                                                  /* Center align items horizontally */
    gap: 8px;                                                                 /* Gap between icon and text */
    padding: 12px 20px;                                                       /* Padding inside label */
    background: var(--Card_Button_Colour);                                    /* Background using CSS variable */
    color: var(--Header_Button_Text_Colour);                                  /* Text color using CSS variable */
    border: 2px dashed var(--Card_Border_Colour);                             /* Dashed border using CSS variable */
    border-radius: 6px;                                                       /* Rounded corners */
    cursor: pointer;                                                          /* Pointer cursor for clickable area */
    transition: all 0.3s ease;                                                /* Smooth transition for hover effects */
    font-weight: 500;                                                         /* Medium weight for text */
    text-align: center;                                                       /* Center align text */
}

.file-upload-label:hover {
    background: var(--Header_Button_BG_Colour);                               /* Hover background using CSS variable */
    border-color: var(--Card_Button_Colour);                                  /* Hover border using CSS variable */
    transform: translateY(-1px);                                              /* Slight lift effect on hover */
}

.file-upload-label i {
    font-size: 1.1rem;                                                        /* Icon size */
}

.file-upload-text {
    font-size: 0.9rem;                                                        /* Text size */
}

.file-upload-info {
    display: flex;                                                            /* Flexbox layout for info */
    flex-direction: column;                                                   /* Stack items vertically */
    gap: 5px;                                                                 /* Gap between info elements */
}

.form-label {
    display: block;                                                           /* Block display for label */
    color: var(--Card_Text_Colour);                                           /* Use card text color for label */
    font-weight: 500;                                                         /* Medium weight for label */
    margin-bottom: 5px;                                                       /* Space below label */
    font-size: 0.9rem;                                                        /* Small font size for label */
}

.form-input {
    width: 100%;                                                              /* Full width input */
    padding: 10px 12px;                                                       /* Padding inside input */
    border: 1px solid var(--Card_Border_Colour);                              /* Border using CSS variable */
    border-radius: 4px;                                                       /* Rounded corners */
    background: var(--Card_Background_Colour);                                /* Background using CSS variable */
    color: var(--Card_Text_Colour);                                           /* Use card text color for input */
    font-size: 0.9rem;                                                        /* Small font size for input */
    transition: border-color 0.3s ease;                                       /* Smooth transition for border */
}

.form-input:focus {
    outline: none;                                                            /* Remove default outline */
    border-color: var(--Card_Button_Colour);                                  /* Focus border using CSS variable */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);                           /* Focus shadow */
}

.form-help {
    display: block;                                                           /* Block display for help text */
    color: var(--Body_Text_Colour);                                           /* Use body text color for help */
    font-size: 0.8rem;                                                        /* Small font size for help */
    margin-top: 5px;                                                          /* Space above help text */
    opacity: 0.8;                                                             /* Slightly transparent for hierarchy */
}

.form-actions {
    display: flex;                                                            /* Flexbox layout for actions */
    gap: 10px;                                                                /* Gap between buttons */
    margin-top: 25px;                                                         /* Space above actions */
}

/* Responsive design for No Card management */
@media (max-width: 768px) {
    .no-card-settings {
        grid-template-columns: 1fr;                                           /* Single column on mobile */
        gap: 20px;                                                            /* Reduce gap on mobile */
    }
    
    .no-card-preview-content {
        flex-direction: column;                                               /* Stack items vertically on mobile */
    }
    
    .form-actions {
        flex-direction: column;                                               /* Stack buttons vertically on mobile */
    }
}

         .page-body {
             padding-top: 80px !important;                                   /* Top padding to account for fixed header */
         }
         
         .floating-content {
             width: 100% !important;                                         /* Full width for content container */
         }
         
         /* Modal Overlay Styles - Single, clean rule */
         #modal-overlay {
             display: none;                                                   /* Hidden by default */
             position: fixed !important;                                      /* Fixed positioning over entire viewport */
             top: 0 !important;                                               /* Position from top of viewport */
             left: 0 !important;                                              /* Position from left of viewport */
             right: 0 !important;                                             /* Extend to right edge of viewport */
             bottom: 0 !important;                                            /* Extend to bottom edge of viewport */
             background: var(--Overlay_Light) !important;                     /* Semi-transparent overlay background */
             z-index: 10000 !important;                                       /* High z-index to appear above all content */
             align-items: center !important;                                  /* Center content vertically */
             justify-content: center !important;                               /* Center content horizontally */
         }
        
        /* Visible state for modal overlay (no inline styles) */
        #modal-overlay.open { display: flex !important; }
         
         #modal-content {
             background: var(--Card_Background_Colour) !important;             /* White background for modal content */
             border: 2px solid var(--Card_Border_Colour) !important;          /* Black border using CSS variable */
             border-radius: 12px !important;                                  /* Rounded corners for modern appearance */
             padding: 30px !important;                                        /* Generous padding for content spacing */
             max-width: 80% !important;                                       /* Maximum width relative to viewport */
             max-height: 80% !important;                                      /* Maximum height relative to viewport */
             overflow-y: auto !important;                                     /* Vertical scrollbar when content overflows */
             box-shadow: 0 10px 30px var(--Shadow_Heavy) !important;         /* Heavy shadow for modal depth */
         }

.section-margin-large {
    margin-bottom: 15px !important;                                          /* Large bottom margin for section spacing */
}

/* ======================================== */
/* ADMIN PROFILE STYLES - Following Style Guide */
/* ======================================== */

/* Admin Profile Container - Main wrapper for admin profile pages */
.admin-profile-container {
    max-width: 1200px !important;                                            /* Maximum width for large screens */
    margin: 0 auto !important;                                                /* Center container horizontally */
    padding: 20px !important;                                                 /* Internal spacing for container */
}

/* Profile Header - Title and back button section */
.profile-header {
    display: flex !important;                                                 /* Use flexbox for horizontal layout */
    justify-content: space-between !important;                                /* Space title and back button apart */
    align-items: center !important;                                           /* Center items vertically */
    margin-bottom: 30px !important;                                           /* Space below header section */
    padding: 20px !important;                                                 /* Internal spacing for header content */
    background: var(--Card_Background_Colour) !important;                     /* White background using CSS variable */
    border: 2px solid var(--Card_Border_Colour) !important;                  /* Black border using CSS variable */
    border-radius: 12px !important;                                           /* Rounded corners for modern appearance */
    box-shadow: 0 4px 15px var(--Shadow_Light) !important;                   /* Light shadow for depth */
}

.profile-header h1 {
    color: var(--Card_Header_Colour) !important;                              /* Dark purple color for header title */
    margin: 0 !important;                                                     /* Remove default margins */
    font-size: 1.8rem !important;                                            /* Large font size for main heading */
    font-weight: 600 !important;                                              /* Semi-bold weight for emphasis */
}

.profile-header h1 i {
    margin-right: 10px !important;                                            /* Space between icon and title text */
    color: var(--Card_Icon_Colour) !important;                                /* Orange color for header icon */
}

/* Back Button - Navigation back to admin dashboard */
.back-button {
    background: var(--Reveal_Button_BG_Colour) !important;                   /* Orange background using CSS variable */
    color: var(--Reveal_Button_Text_Colour) !important;                      /* White text using CSS variable */
    border: none !important;                                                 /* Remove default button border */
    padding: 12px 24px !important;                                          /* Generous padding for button content */
    border-radius: 8px !important;                                          /* Rounded corners for modern appearance */
    cursor: pointer !important;                                               /* Pointer cursor for clickable element */
    text-decoration: none !important;                                        /* Remove any link underlines */
    display: inline-block !important;                                        /* Display as inline-block for proper sizing */
    font-weight: 500 !important;                                             /* Medium weight for readability */
    transition: all 0.3s ease !important;                                    /* Smooth transition for hover effects */
    box-shadow: 0 2px 8px var(--Shadow_Light) !important;                   /* Light shadow for button depth */
}

.back-button:hover {
    background: var(--Header_Button_BG_Colour) !important;                    /* Darker orange background on hover */
    transform: translateY(-2px) !important;                                   /* Lift up effect on hover */
    box-shadow: 0 4px 15px var(--Shadow_Medium) !important;                  /* Enhanced shadow on hover */
}

/* Profile Grid - Two-column layout for profile information */
.profile-grid {
    display: grid !important;                                                 /* Use CSS Grid for layout */
    grid-template-columns: 1fr 1fr !important;                               /* Two equal-width columns */
    gap: 30px !important;                                                     /* Space between grid columns */
    margin-bottom: 30px !important;                                           /* Space below the grid */
}

/* Profile Card - Individual information sections */
.profile-card {
    background: var(--Card_Background_Colour) !important;                     /* White background using CSS variable */
    border: 2px solid var(--Card_Border_Colour) !important;                  /* Black border using CSS variable */
    border-radius: 12px !important;                                           /* Rounded corners for modern appearance */
    padding: 25px !important;                                                 /* Generous padding for content spacing */
    box-shadow: 0 4px 15px var(--Shadow_Light) !important;                   /* Light shadow for depth */
}

.profile-card h3 {
    color: var(--Card_Header_Colour) !important;                              /* Dark purple color for card headings */
    margin: 0 0 20px 0 !important;                                           /* Space below heading, no other margins */
    font-size: 1.3rem !important;                                            /* Medium font size for subheadings */
    font-weight: 600 !important;                                              /* Semi-bold weight for emphasis */
    border-bottom: 2px solid var(--Card_Border_Colour) !important;            /* Bottom border for visual separation */
    padding-bottom: 10px !important;                                          /* Space below text before border */
}

.profile-card h3 i {
    margin-right: 10px !important;                                            /* Space between icon and heading text */
    color: var(--Card_Icon_Colour) !important;                                /* Orange color for heading icons */
}

/* Profile Info - Individual data rows */
.profile-info {
    display: flex !important;                                                 /* Use flexbox for horizontal layout */
    justify-content: space-between !important;                                /* Space label and value apart */
    align-items: center !important;                                           /* Center items vertically */
    padding: 12px 0 !important;                                               /* Vertical spacing for each row */
    border-bottom: 1px solid var(--Card_Border_Colour) !important;            /* Bottom border for row separation */
}

.profile-info:last-child {
    border-bottom: none !important;                                           /* Remove border from last row */
}

.profile-info strong {
    color: var(--Card_Header_Colour) !important;                              /* Dark purple color for labels */
    font-weight: 600 !important;                                              /* Semi-bold weight for emphasis */
}

.profile-info span {
    color: var(--Card_Text_Colour) !important;                                /* Purple color for values */
    text-align: right !important;                                             /* Right-align values for better readability */
}

/* Status Toggle - User activation/deactivation button */
.status-toggle {
    background: var(--Reveal_Button_BG_Colour) !important;                   /* Orange background using CSS variable */
    color: var(--Reveal_Button_Text_Colour) !important;                      /* White text using CSS variable */
    border: none !important;                                                 /* Remove default button border */
    padding: 8px 16px !important;                                            /* Compact padding for toggle button */
    border-radius: 6px !important;                                           /* Rounded corners for modern appearance */
    cursor: pointer !important;                                               /* Pointer cursor for clickable element */
    font-size: 0.9rem !important;                                            /* Small font size for compact button */
    font-weight: 500 !important;                                              /* Medium weight for readability */
    transition: all 0.3s ease !important;                                    /* Smooth transition for hover effects */
}

.status-toggle:hover {
    background: var(--Header_Button_BG_Colour) !important;                    /* Darker orange background on hover */
    transform: translateY(-1px) !important;                                   /* Slight lift effect on hover */
}

.status-toggle.active {
    background: var(--Success_Colour) !important;                              /* Green background for active state */
}

.status-toggle.inactive {
    background: var(--Error_Colour) !important;                                /* Red background for inactive state */
}

/* Items Section - Badges, trades, postcodes, etc. */
.items-section {
    margin-top: 30px !important;                                              /* Space above items section */
}

.items-grid {
    display: grid !important;                                                  /* Use CSS Grid for responsive layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;  /* Responsive columns with minimum 300px width */
    gap: 20px !important;                                                     /* Space between grid items */
}

/* Item Card - Individual badge/trade/postcode items */
.item-card {
    background: var(--Card_Background_Colour) !important;                     /* White background using CSS variable */
    border: 2px solid var(--Card_Border_Colour) !important;                  /* Black border using CSS variable */
    border-radius: 8px !important;                                            /* Rounded corners for modern appearance */
    padding: 15px !important;                                                 /* Internal spacing for content */
    position: relative !important;                                             /* Enable absolute positioning for remove button */
    box-shadow: 0 2px 10px var(--Shadow_Light) !important;                   /* Light shadow for depth */
}

.item-card h4 {
    color: var(--Card_Header_Colour) !important;                              /* Dark purple color for item titles */
    margin-top: 0 !important;                                                 /* Remove top margin */
    margin-bottom: 10px !important;                                           /* Space below title */
    font-size: 1.1rem !important;                                            /* Medium font size for item headings */
    font-weight: 600 !important;                                              /* Semi-bold weight for emphasis */
}

.item-details {
    color: var(--Card_Text_Colour) !important;                                /* Purple color for item description text */
    font-size: 14px !important;                                              /* Small font size for details */
    margin-bottom: 10px !important;                                           /* Space below details */
}

/* Remove Button - Delete individual items */
.remove-button {
    background: var(--Error_Colour) !important;                               /* Red background for delete action */
    color: white !important;                                                  /* White text for contrast */
    border: none !important;                                                  /* Remove default button border */
    padding: 5px 10px !important;                                            /* Compact padding for small button */
    border-radius: 3px !important;                                            /* Small rounded corners */
    cursor: pointer !important;                                               /* Pointer cursor for clickable element */
    font-size: 12px !important;                                              /* Small font size for compact button */
    position: absolute !important;                                            /* Position relative to item card */
    top: 10px !important;                                                     /* 10px from top of card */
    right: 10px !important;                                                   /* 10px from right of card */
    transition: all 0.3s ease !important;                                     /* Smooth transition for hover effects */
}

.remove-button:hover {
    background: var(--Error_Hover_Colour) !important;                          /* Darker red background on hover */
    transform: scale(1.05) !important;                                         /* Slight scale effect on hover */
}

/* Empty Message - When no items exist */
.empty-message {
    text-align: center !important;                                             /* Center-align empty state message */
    color: var(--Card_Text_Colour) !important;                                /* Purple color for message text */
    font-style: italic !important;                                            /* Italic style for emphasis */
    padding: 20px !important;                                                 /* Internal spacing for message */
    background: var(--Card_Background_Colour) !important;                     /* White background using CSS variable */
    border: 2px solid var(--Card_Border_Colour) !important;                  /* Black border using CSS variable */
    border-radius: 8px !important;                                            /* Rounded corners for modern appearance */
    box-shadow: 0 2px 10px var(--Shadow_Light) !important;                   /* Light shadow for depth */
}

/* Loading States */
.loading {
    text-align: center !important;                                             /* Center-align loading message */
    color: var(--Card_Text_Colour) !important;                                /* Purple color for loading text */
    padding: 20px !important;                                                 /* Internal spacing for loading message */
    background: var(--Card_Background_Colour) !important;                     /* White background using CSS variable */
    border: 2px solid var(--Card_Border_Colour) !important;                  /* Black border using CSS variable */
    border-radius: 8px !important;                                            /* Rounded corners for modern appearance */
    box-shadow: 0 2px 10px var(--Shadow_Light) !important;                   /* Light shadow for depth */
}

/* Error Messages */
.error-message {
    background: var(--Error_Background_Colour) !important;                     /* Red background for error messages */
    color: var(--Error_Text_Colour) !important;                                /* White text for error messages */
    border: 2px solid var(--Error_Border_Colour) !important;                  /* Red border for error messages */
    padding: 15px !important;                                                  /* Internal spacing for error message */
    margin: 15px 0 !important;                                                 /* Vertical margins for error message */
    border-radius: 8px !important;                                             /* Rounded corners for modern appearance */
    box-shadow: 0 2px 10px var(--Shadow_Light) !important;                    /* Light shadow for depth */
}

/* Verification Badge - Status indicators */
.verification-badge {
    display: inline-block !important;                                          /* Display as inline-block for proper sizing */
    padding: 4px 8px !important;                                              /* Compact padding for small badge */
    border-radius: 12px !important;                                            /* Rounded pill shape for badge */
    font-size: 12px !important;                                                /* Small font size for compact badge */
    font-weight: bold !important;                                              /* Bold weight for emphasis */
    margin-left: 10px !important;                                              /* Space to the left of badge */
}

.verification-badge.verified {
    background: var(--Success_Background_Colour) !important;                   /* Green background for verified status */
    color: var(--Success_Text_Colour) !important;                              /* White text for verified status */
}

.verification-badge.unverified {
    background: var(--Error_Background_Colour) !important;                      /* Red background for unverified status */
    color: var(--Error_Text_Colour) !important;                                 /* White text for unverified status */
}

/* Debug Panel - Admin troubleshooting information */
.debug-panel {
    margin-top: 20px !important;                                               /* Space above debug panel */
    background: var(--Card_Background_Colour) !important;                      /* White background using CSS variable */
    border: 2px solid var(--Card_Border_Colour) !important;                   /* Black border using CSS variable */
    border-radius: 8px !important;                                             /* Rounded corners for modern appearance */
    padding: 15px !important;                                                  /* Internal spacing for debug content */
    box-shadow: 0 2px 10px var(--Shadow_Light) !important;                    /* Light shadow for depth */
}

.debug-panel strong {
    color: var(--Card_Header_Colour) !important;                               /* Dark purple color for debug labels */
}

.debug-panel pre {
    background: var(--Body_Background_Colour) !important;                      /* Blue background for code blocks */
    border: 1px solid var(--Card_Border_Colour) !important;                   /* Black border for code blocks */
    border-radius: 4px !important;                                             /* Small rounded corners for code blocks */
    padding: 10px !important;                                                  /* Internal spacing for code content */
    overflow: auto !important;                                                 /* Scrollbar when code overflows */
    max-height: 300px !important;                                              /* Maximum height for code blocks */
    font-size: 0.9rem !important;                                              /* Small font size for code text */
    color: var(--Card_Text_Colour) !important;                                 /* Purple color for code text */
}





/* ========================================
   PROFILE VIEW STYLES - Subbie Profile Page
   ========================================
   
   This section contains all the styles specific to the subbie profile view page,
   including loading sections, profile elements, and responsive design.
   ======================================== */

/* Loading Section - Floating Card */
.loading-section {
    text-align: center;                                                        /* Center-align loading content */
    padding: 40px;                                                             /* Generous padding for loading message */
    background: var(--Card_Background_Colour);                                 /* White background using CSS variable */
    border-radius: 10px;                                                       /* Rounded corners for modern appearance */
    box-shadow: 0 2px 10px var(--Shadow_Light);                               /* Light shadow for depth */
    margin-bottom: 20px;                                                       /* Space below loading section */
}

.loading-spinner {
    display: flex;                                                              /* Use flexbox for vertical layout */
    flex-direction: column;                                                     /* Stack elements vertically */
    align-items: center;                                                        /* Center items horizontally */
    gap: 15px;                                                                  /* Space between spinner and text */
}

.loading-spinner i {
    font-size: 2rem;                                                            /* Large icon size for loading spinner */
    color: var(--Card_Icon_Colour);                                             /* Orange color for loading icon */
}

.loading-spinner p {
    margin: 0;                                                                   /* Remove default paragraph margins */
    color: var(--Card_Text_Colour);                                             /* Purple color for loading text */
    font-size: 1.1rem;                                                          /* Medium font size for loading message */
}

/* Profile Container - Floating Layout */
.profile-container {
    max-width: 1200px;                                                          /* Maximum width for large screens */
    margin: 0 auto;                                                              /* Center container horizontally */
}

/* Profile Header Info - Avatar and name section */
.profile-header-info {
    display: flex;                                                               /* Use flexbox for horizontal layout */
    align-items: center;                                                         /* Center items vertically */
    gap: 20px;                                                                   /* Space between avatar and name */
    margin-bottom: 20px;                                                         /* Space below header section */
}

/* Profile Avatar - Small circular image */
.profile-avatar {
    width: 80px;                                                                 /* Fixed width for circular avatar */
    height: 80px;                                                                /* Fixed height for circular avatar */
    border-radius: 50%;                                                          /* Circular shape for avatar */
    object-fit: cover;                                                           /* Maintain aspect ratio while filling container */
    border: 3px solid var(--Card_Border_Colour);                                /* Black border using CSS variable */
    box-shadow: 0 2px 10px var(--Shadow_Light);                                /* Light shadow for depth */
    flex-shrink: 0;                                                              /* Prevent avatar from shrinking in flexbox */
}

/* Profile Name - Large title next to avatar */
.profile-name {
    margin: 0;                                                                   /* Remove default margins */
    color: var(--Card_Header_Text_Colour);                                      /* Dark purple color for profile name */
    font-size: 2rem;                                                            /* Large font size for main profile title */
    font-weight: 700;                                                           /* Bold weight for emphasis */
}





/* Profile Meta - Trade, status, member since info */
.profile-meta {
    display: flex;                                                               /* Use flexbox for horizontal layout */
    flex-wrap: wrap;                                                             /* Allow items to wrap to next line */
    gap: 15px;                                                                   /* Space between meta items */
    margin-bottom: 20px;                                                         /* Space below meta section */
    align-items: center;                                                         /* Center items vertically */
}

/* Favourite Control - For tradies to add/remove favourites */
.favourite-control {
    margin-left: auto;                                                           /* Push control to the right side */
    display: none;                                                               /* Hidden by default */
}

.favourite-control-visible {
    display: block;                                                              /* Show when control should be visible */
}

.favourite-btn {
    display: inline-flex;                                                        /* Use flexbox for icon and text alignment */
    align-items: center;                                                         /* Center items vertically */
    gap: 8px;                                                                    /* Space between icon and text */
    background: var(--Header_Button_BG_Colour);                                  /* Dark orange background using CSS variable */
    color: var(--Header_Button_Text_Colour);                                     /* White text using CSS variable */
    border: none;                                                                /* Remove default button border */
    border-radius: 8px;                                                          /* Rounded corners for modern appearance */
    padding: 10px 12px;                                                          /* Internal spacing for button content */
    cursor: pointer;                                                             /* Pointer cursor for clickable element */
    font-weight: 600;                                                            /* Semi-bold weight for readability */
    transition: all 0.3s ease;                                                   /* Smooth transition for hover effects */
}

.favourite-btn span {
    color: var(--Header_Button_Text_Colour);                                     /* White color for button text */
}

.favourite-btn:hover {
    background: var(--Header_Button_BG_Colour);                                  /* Keep same background on hover */
    color: var(--Header_Button_Text_Colour);                                     /* Keep same text color on hover */
    transform: translateY(-1px);                                                 /* Slight lift effect on hover */
}

.favourite-btn i {
    font-size: 1.6rem;                                                          /* Large icon size for favourite button */
    color: var(--Card_Icon_Colour);                                             /* Orange color for favourite icon */
}

.favourite-btn.favourited {
    background: var(--Header_Button_BG_Colour);                                  /* Same background when favourited */
    color: var(--Header_Button_Text_Colour);                                     /* Same text color when favourited */
}

.profile-trade, .profile-status, .profile-member-since {
    padding: 12px 20px;                                                          /* Generous padding for pill appearance */
    background: var(--Card_Background_Colour);                                   /* White background using CSS variable */
    border: 1px solid var(--Card_Border_Colour);                                /* Black border using CSS variable */
    border-radius: 20px;                                                         /* Large rounded corners for pill shape */
    color: var(--Card_Text_Colour);                                             /* Purple color for text */
    font-size: 0.9rem;                                                          /* Small font size for meta items */
    font-weight: 600;                                                            /* Semi-bold weight for emphasis */
    text-align: center;                                                          /* Center-align text content */
    white-space: nowrap;                                                         /* Prevent text from wrapping */
}

.profile-trade {
    background: var(--Card_Icon_Colour);                                         /* Orange background for trade badge */
    color: var(--Card_Background_Colour);                                        /* White text for contrast */
    border-color: var(--Card_Icon_Colour);                                       /* Orange border to match background */
}



/* Profile Content - Dynamic Content Area */
.profile-content {
    /* Content will be dynamically generated with floating card styles */
}

/* Profile Grid - Layout for rates, roles, trades, postcodes */
.profile-grid {
    display: grid;                                                               /* Use CSS Grid for responsive layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));                 /* Responsive columns with minimum 280px width */
    gap: 20px;                                                                   /* Space between grid items */
    margin-bottom: 30px;                                                         /* Space below the grid */
}

/* Rates Grid - Individual rate items */
.rates-grid {
    display: flex;                                                               /* Use flexbox for vertical layout */
    flex-direction: column;                                                      /* Stack rate items vertically */
    gap: 10px;                                                                   /* Space between rate items */
}

/* Lists - For roles, trades, postcodes, badges */
.roles-list, .trades-list, .postcodes-list, .badges-list {
    display: flex;                                                               /* Use flexbox for horizontal layout */
    flex-wrap: wrap;                                                             /* Allow items to wrap to next line */
    gap: 8px;                                                                    /* Space between list items */
}

/* Reviews Container */
.reviews-container {
    max-height: 400px;                                                           /* Maximum height for reviews section */
    overflow-y: auto;                                                            /* Vertical scrollbar when content overflows */
}

/* Contact Info */
.contact-info {
    padding: 15px;                                                               /* Internal spacing for contact content */
    background: var(--Card_Background_Colour);                                   /* White background using CSS variable */
    border-radius: 8px;                                                          /* Rounded corners for modern appearance */
    border: 1px solid var(--Card_Border_Colour);                                /* Black border using CSS variable */
}

/* Rate Items - Individual Rate Display */
.rate-item {
    display: flex;                                                               /* Use flexbox for horizontal layout */
    justify-content: space-between;                                              /* Space label and value apart */
    align-items: center;                                                         /* Center items vertically */
    padding: 8px 0;                                                              /* Vertical spacing for each rate item */
    border-bottom: 1px solid var(--Card_Border_Colour);                          /* Bottom border for item separation */
}

.rate-item:last-child {
    border-bottom: none;                                                         /* Remove border from last rate item */
}

.rate-label {
    color: var(--Card_Text_Colour);                                              /* Purple color for rate labels */
    font-weight: 600;                                                            /* Semi-bold weight for emphasis */
}

.rate-value {
    color: var(--Card_Icon_Colour);                                              /* Orange color for rate values */
    font-weight: 700;                                                            /* Bold weight for emphasis */
}

/* Profile Tags - Roles, Trades, Postcodes, Badges */
.role-tag, .trade-tag, .postcode-tag, .badge-tag {
    display: inline-block;                                                       /* Display as inline-block for proper sizing */
    background: var(--Card_Background_Colour);                                   /* White background using CSS variable */
    color: var(--Card_Icon_Colour);                                             /* Orange color for tag text */
    padding: 6px 12px;                                                           /* Compact padding for tag appearance */
    border: 1px solid var(--Card_Icon_Colour);                                  /* Orange border using CSS variable */
    border-radius: 20px;                                                         /* Large rounded corners for pill shape */
    font-size: 0.9rem;                                                          /* Small font size for tags */
    font-weight: 600;                                                            /* Semi-bold weight for emphasis */
    margin: 4px;                                                                 /* Space around each tag */
    box-shadow: 0 1px 3px var(--Shadow_Light);                                 /* Light shadow for depth */
}

/* Profile Status - Active/Inactive Indicators */
.profile-status {
    padding: 6px 12px;                                                           /* Compact padding for status badge */
    border-radius: 20px;                                                         /* Large rounded corners for pill shape */
    font-size: 0.8rem;                                                           /* Small font size for status text */
    font-weight: 600;                                                             /* Semi-bold weight for emphasis */
    text-transform: uppercase;                                                    /* Uppercase text for status indicators */
    display: inline-block;                                                        /* Display as inline-block for proper sizing */
    width: fit-content;                                                           /* Width adjusts to content */
    min-width: 80px;                                                             /* Minimum width for consistent appearance */
    text-align: center;                                                           /* Center-align status text */
}

.profile-status.status-active {
    background: #d4edda;                                                         /* Light green background for active status */
    color: #155724;                                                              /* Dark green text for active status */
}

.profile-status.status-inactive {
    background: #f8d7da;                                                         /* Light red background for inactive status */
    color: #721c24;                                                              /* Dark red text for inactive status */
}

/* Contact Reveal System */
.reveal-actions {
    margin-top: 15px;                                                            /* Space above reveal actions section */
}

.reveal-item {
    display: flex;                                                               /* Use flexbox for horizontal layout */
    align-items: center;                                                         /* Center items vertically */
    gap: 10px;                                                                   /* Space between reveal elements */
    margin-bottom: 10px;                                                         /* Space below each reveal item */
    padding: 10px;                                                               /* Internal spacing for reveal content */
    background: var(--Card_Background_Colour);                                   /* White background using CSS variable */
    border-radius: 8px;                                                          /* Rounded corners for modern appearance */
    border: 1px solid var(--Card_Border_Colour);
}

.reveal-btn {
    background: var(--Header_Button_BG_Colour);                                  /* Dark orange background using CSS variable */
    color: var(--Header_Button_Text_Colour);                                     /* White text using CSS variable */
    border: none;                                                                /* Remove default button border */
    padding: 8px 16px;                                                          /* Compact padding for button content */
    border-radius: 6px;                                                          /* Rounded corners for modern appearance */
    cursor: pointer;                                                             /* Pointer cursor for clickable element */
    font-size: 0.9rem;                                                          /* Small font size for button text */
    transition: all 0.2s ease;                                                   /* Smooth transition for hover effects */
    min-width: 200px;                                                            /* Minimum width for consistent button size */
}

.reveal-btn:hover {
    opacity: 0.9;                                                                /* Slightly transparent on hover */
    transform: translateY(-1px);                                                 /* Slight lift effect on hover */
}

.reveal-btn:disabled {
    opacity: 0.6;                                                                /* More transparent when disabled */
    cursor: not-allowed;                                                         /* Show disabled cursor state */
}

.reveal-display {
    color: var(--Card_Text_Colour);                                              /* Purple color for revealed contact info */
    font-weight: 600;                                                            /* Semi-bold weight for emphasis */
    margin-left: 10px;                                                           /* Space to the left of display */
}

.reveal-instruction {
    color: var(--Card_Text_Colour);                                              /* Purple color for instruction text */
    font-size: 0.9rem;                                                           /* Small font size for instructions */
    font-style: italic;                                                           /* Italic style for instruction text */
    margin-top: 10px;                                                            /* Space above instruction text */
    text-align: center;                                                           /* Center-align instruction text */
}

/* Gallery Container - Work Image Display */
.gallery-container {
    width: 100%;                                                                 /* Full width for gallery display */
}

.gallery-main-container {
    margin-bottom: 12px;                                                         /* Space below main gallery image */
}

.gallery-main {
    width: 100%;                                                                 /* Full width for main image */
    height: 300px;                                                               /* Fixed height for consistent layout */
    object-fit: cover;                                                           /* Maintain aspect ratio while filling container */
    border-radius: 8px;                                                          /* Rounded corners for modern appearance */
    cursor: pointer;                                                             /* Pointer cursor for clickable image */
}

.gallery-thumbs {
    display: flex;                                                               /* Use flexbox for horizontal thumbnail layout */
    gap: 8px;                                                                    /* Space between thumbnail images */
    margin-top: 12px;                                                            /* Space above thumbnail row */
    overflow-x: auto;                                                            /* Horizontal scrollbar when thumbnails overflow */
}

.gallery-thumbs .thumb {
    background: #eee;                                                             /* Light gray background for thumbnail placeholders */
    border-radius: 10px;                                                         /* Rounded corners for thumbnail containers */
    overflow: hidden;                                                             /* Hide image overflow */
    flex: 0 0 auto;                                                              /* Prevent thumbnails from shrinking */
    height: 80px;                                                                 /* Fixed height for thumbnail consistency */
    cursor: pointer;                                                              /* Pointer cursor for clickable thumbnails */
}

.gallery-thumbs .thumb img {
    width: 100%;                                                                  /* Full width of thumbnail container */
    height: 100%;                                                                 /* Full height of thumbnail container */
    object-fit: cover;                                                            /* Maintain aspect ratio while filling container */
}

/* Personal Statement */
.personal-statement {
    margin-top: 10px;                                                            /* Space above personal statement */
    color: var(--Card_Text_Colour);                                              /* Purple color for statement text */
    line-height: 1.6;                                                            /* Comfortable line spacing for readability */
}

/* Contact Actions */
.contact-actions {
    margin-top: 20px;                                                            /* Space above contact actions section */
}

/* Modal Overlay and Content */
#modal-overlay {
    display: none;                                                                /* Hidden by default */
    position: fixed;                                                              /* Fixed positioning over entire viewport */
    top: 0;                                                                       /* Position from top of viewport */
    left: 0;                                                                      /* Position from left of viewport */
    width: 100%;                                                                  /* Full width of viewport */
    height: 100%;                                                                 /* Full height of viewport */
    background: var(--Overlay_Heavy);                                             /* Heavy overlay background using CSS variable */
    z-index: 1000;                                                               /* High z-index to appear above content */
    align-items: center;
    justify-content: center;
}

#modal-content {
    background: var(--Card_Background_Colour);                                    /* White background for modal content */
    border-radius: 12px;                                                          /* Rounded corners for modern appearance */
    max-width: 90vw;                                                              /* Maximum width relative to viewport */
    max-height: 90vh;                                                             /* Maximum height relative to viewport */
    overflow: hidden;                                                              /* Hide content that overflows modal */
    position: relative;                                                            /* Enable absolute positioning for close button */
}

/* Profile Content Hidden State */
.profile-content-hidden {
    display: none;                                                                /* Hide profile content when not needed */
}

/* Hidden State Utility Class */
.hidden {
    display: none !important;                                                     /* Force hide elements with !important */
}

/* Marketing Card Popup Styles */
.marketing-card-overlay {
    display: none;                                                                /* Hidden by default */
    position: fixed !important;                                                   /* Fixed positioning over entire viewport */
    top: 0 !important;                                                            /* Position from top of viewport */
    left: 0 !important;                                                           /* Position from left of viewport */
    right: 0 !important;                                                          /* Extend to right edge of viewport */
    bottom: 0 !important;                                                         /* Extend to bottom edge of viewport */
    background: var(--Overlay_Heavy) !important;                                  /* Heavy overlay background using CSS variable */
    z-index: 10000 !important;                                                    /* High z-index to appear above all content */
    align-items: center !important;                                               /* Center content vertically */
    justify-content: center !important;                                           /* Center content horizontally */
}

.marketing-card-content {
    background: transparent !important;                                            /* Transparent background */
    border: none !important;                                                      /* No border */
    border-radius: 0 !important;                                                  /* No rounded corners */
    padding: 0 !important;                                                        /* No padding at all */
    margin: 0 !important;                                                         /* No margin */
    position: relative !important;                                                 /* Enable absolute positioning for close button */
    box-shadow: none !important;                                                  /* No shadow */
    overflow: visible !important;                                                 /* Allow content to show naturally */
    display: inline-block !important;                                             /* Inline-block to wrap around content */
    width: auto !important;                                                       /* Auto width to fit content */
    height: auto !important;                                                      /* Auto height to fit content */
    max-width: none !important;                                                   /* No max width constraint */
    max-height: none !important;                                                  /* No max height constraint */
    vertical-align: top !important;                                               /* Fix inline-block alignment */
    line-height: 0 !important;                                                    /* Remove line-height spacing */
    font-size: 0 !important;                                                      /* Remove font-size spacing */
}

/* Browser-specific fixes for image sizing */
.marketing-card-image {
    display: inline-block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    vertical-align: top !important;
}

.marketing-card-image img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
}

/* Mobile specific image sizing */
@media (max-width: 768px) {
    .marketing-card-image img {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }
}

.marketing-card-close {
    position: absolute !important;                                                 /* Position relative to popup card */
    top: 2px !important;                                                          /* 2px from top edge of card */
    right: 2px !important;                                                        /* 2px from right edge of card */
    width: 40px !important;                                                       /* Fixed width for close button */
    height: 40px !important;                                                      /* Fixed height for close button */
    background: #ff0000 !important;                                               /* Red background for close button */
    color: #ffffff !important;                                                    /* White color for close icon */
    border: none !important;                                                      /* No border for clean appearance */
    border-radius: 50% !important;                                                /* Perfect circle shape */
    font-size: 20px !important;                                                   /* Large font size for visibility */
    font-weight: bold !important;                                                 /* Bold weight for emphasis */
    cursor: pointer !important;                                                   /* Pointer cursor on hover */
    display: flex !important;                                                     /* Flexbox for centering icon */
    align-items: center !important;                                               /* Vertical center alignment */
    justify-content: center !important;                                           /* Horizontal center alignment */
    transition: all 0.3s ease !important;                                         /* Smooth transition for hover effects */
    z-index: 10002 !important;                                                    /* Highest z-index to appear above all content */
}

.marketing-card-close:hover {
    background: #cc0000 !important;                                               /* Darker red on hover */
    transform: scale(1.1) !important;                                             /* Slight scale up on hover */
}

.marketing-card-close:active {
    background: #990000 !important;                                               /* Even darker red when pressed */
    transform: scale(0.95) !important;                                            /* Slight scale down when pressed */
}

.marketing-card-header h2 {
    margin: 0 0 20px 0 !important;                                                /* Space below title, no other margins */
    color: var(--Card_Text_Colour) !important;                                    /* Use card text color variable */
    font-size: 1.8rem !important;                                                 /* Large font size for title */
    font-weight: 700 !important;                                                  /* Bold weight for emphasis */
    text-align: center !important;                                                /* Center text alignment */
}

.marketing-card-content-text {
    color: var(--Card_Text_Colour) !important;                                    /* Use card text color variable */
    font-size: 1.1rem !important;                                                 /* Readable font size */
    text-align: center !important;                                                /* Center text alignment */
    line-height: 1.6 !important;                                                  /* Good line spacing for readability */
}

/* Responsive Design - Mobile adaptations */
@media (max-width: 768px) {
    .marketing-card-content {
        padding: 0 !important;                                                    /* No padding on mobile */
        margin: 0 !important;                                                     /* No margin on mobile */
        max-width: none !important;                                               /* No max width constraint on mobile */
        max-height: none !important;                                              /* No max height constraint on mobile */
    }
    
    .marketing-card-close {
        width: 35px !important;                                                   /* Slightly smaller on mobile */
        height: 35px !important;                                                  /* Slightly smaller on mobile */
        font-size: 18px !important;                                               /* Slightly smaller font on mobile */
    }
    
    .marketing-card-header h2 {
        font-size: 1.5rem !important;                                             /* Smaller title on mobile */
    }
    
    .marketing-card-content-text {
        font-size: 1rem !important;                                               /* Smaller text on mobile */
    }
}



/* Modal Photo Styles - Replacing inline styles */
.modal-photo-container {
    text-align: center;                                                           /* Center-align photo content */
    padding: 20px;                                                                /* Internal spacing for photo container */
}

.modal-photo-wrapper {
    position: relative;                                                            /* Enable absolute positioning for close button */
    display: inline-block;                                                        /* Display as inline-block for proper sizing */
}

.modal-photo-image {
    max-width: 100%;                                                              /* Maximum width of modal container */
    max-height: 80vh;                                                             /* Maximum height relative to viewport */
    border-radius: 8px;                                                           /* Rounded corners for modern appearance */
    box-shadow: 0 4px 20px var(--Overlay_Heavy);                                 /* Heavy shadow for modal depth */
}

.modal-close-btn {
    position: absolute;                                                            /* Position relative to photo wrapper */
    top: -15px;                                                                   /* 15px above the photo */
    right: -15px;                                                                 /* 15px to the right of the photo */
    width: 30px;                                                                  /* Fixed width for circular button */
    height: 30px;                                                                 /* Fixed height for circular button */
    border-radius: 50%;                                                           /* Circular shape for close button */
    background: var(--Error_Colour);                                              /* Red background for close action */
    color: white;                                                                 /* White text for contrast */
    border: none;                                                                 /* Remove default button border */
    cursor: pointer;                                                              /* Pointer cursor for clickable element */
    font-size: 16px;                                                              /* Appropriate font size for close icon */
    display: flex;                                                                /* Use flexbox for centering content */
    align-items: center;                                                          /* Center content vertically */
    justify-content: center;                                                       /* Center content horizontally */
    box-shadow: 0 2px 8px var(--Overlay_Heavy);                                  /* Heavy shadow for button depth */
}

/* Thumbnail Styles - Replacing inline styles */
.thumb-placeholder {
    background: var(--Card_Background_Colour);                                    /* White background for thumbnail placeholders */
    border-radius: 10px;                                                          /* Rounded corners for thumbnail containers */
    overflow: hidden;                                                              /* Hide image overflow */
    flex: 0 0 auto;                                                               /* Prevent thumbnails from shrinking */
    height: 80px;                                                                  /* Fixed height for thumbnail consistency */
}

.thumb-image {
    width: 100%;                                                                   /* Full width of thumbnail container */
    height: 100%;                                                                  /* Full height of thumbnail container */
    object-fit: cover;                                                             /* Maintain aspect ratio while filling container */
}

/* Lists and Grids */
.rates-grid, .roles-list, .trades-list, .postcodes-list, .badges-list, .reviews-container {
    margin-top: 10px;                                                             /* Space above all list and grid containers */
}

.rates-grid p, .roles-list p, .trades-list p, .postcodes-list p, .badges-list p, .reviews-container p {
    color: var(--Card_Text_Colour);                                               /* Purple color for list paragraph text */
    margin: 5px 0;                                                                /* Vertical spacing between paragraphs */
    font-style: italic;                                                           /* Italic style for list descriptions */
}

/* Responsive Design for Profile View */
@media (max-width: 768px) {
    .floating-content {
        padding: 15px;                                                             /* Reduced padding for mobile screens */
    }
    
    .profile-container {
        margin: 0;                                                                  /* Remove margins for mobile layout */
    }
    
    .gallery-main {
        height: 200px;                                                             /* Reduced height for mobile gallery */
    }
    
    .gallery-thumbs .thumb {
        height: 60px;                                                              /* Reduced height for mobile thumbnails */
    }
}

/* Profile Attributes Section - No Card Styling */
.profile-attributes-section {
    margin: 20px 0;                                                               /* Vertical spacing for attributes section */
    padding: 0;                                                                   /* No internal padding */
    background: transparent;                                                      /* Transparent background */
    border: none;                                                                 /* No border */
    box-shadow: none;                                                             /* No shadow */
}

/* Add proper spacing between profile cards */
.profile-card {
    margin-bottom: 20px;                                                          /* Space below each profile card */
}

.profile-card:last-child {
    margin-bottom: 0;                                                              /* No margin below the last card */
}

.profile-attributes-section .card-title {
    margin-bottom: 15px;                                                          /* Space below attributes title */
    color: var(--Card_Header_Text_Colour);                                        /* Dark purple color for title */
    font-size: 1.2rem;                                                            /* Medium font size for section title */
    font-weight: 600;                                                              /* Semi-bold weight for emphasis */
}

/* Profile Attributes Grid Layout */
.profile-attributes {
    margin-top: 0;                                                                 /* No top margin for attributes grid */
}

.attributes-grid {
    display: flex;                                                                 /* Use flexbox for vertical layout */
    flex-direction: column;                                                        /* Stack attribute rows vertically */
    gap: 15px;                                                                    /* Space between attribute rows */
}

.attributes-row {
    display: grid;                                                                 /* Use CSS Grid for horizontal layout */
    grid-template-columns: repeat(3, 1fr);                                        /* Three equal-width columns */
    gap: 10px;                                                                    /* Space between attribute items */
}

.attribute-item {
    display: flex;                                                                 /* Use flexbox for horizontal layout */
    justify-content: space-between;                                                /* Space name and count apart */
    align-items: center;                                                           /* Center items vertically */
    padding: 8px 12px;                                                            /* Internal spacing for attribute content */
    background: transparent;                                                      /* Transparent background */
    border: none;                                                                 /* No border */
    text-align: left;                                                             /* Left-align text content */
    min-height: auto;                                                             /* Height adjusts to content */
    transition: none;                                                              /* No transition effects */
}

.attribute-item:hover {
    transform: none;                                                               /* No transform on hover */
    box-shadow: none;                                                              /* No shadow on hover */
    border-color: transparent;                                                     /* Transparent border on hover */
    background: var(--Card_Background_Colour);                                     /* White background on hover */
}

.attribute-item.empty {
    background: transparent;                                                       /* Transparent background for empty items */
    border: none;                                                                  /* No border for empty items */
    opacity: 0;                                                                    /* Completely transparent for empty items */
}

.attribute-name {
    font-weight: 500;                                                              /* Medium weight for attribute names */
    color: var(--Card_Text_Colour);                                                /* Purple color for attribute names */
    margin-bottom: 0;                                                              /* No bottom margin */
    font-size: 14px;                                                               /* Medium font size for readability */
    line-height: 1.4;                                                              /* Comfortable line spacing */
}

.attribute-count {
    font-size: 14px;                                                               /* Medium font size for count values */
    font-weight: 600;                                                              /* Semi-bold weight for emphasis */
    color: var(--Primary_Colour);                                                  /* Orange color for count values */
    background: transparent;                                                       /* Transparent background */
    padding: 0;                                                                    /* No padding */
    border-radius: 0;                                                              /* No rounded corners */
    min-width: auto;                                                               /* Width adjusts to content */
    display: inline;                                                               /* Display as inline element */
}

/* Responsive Design for Attributes Grid */
@media (max-width: 768px) {
    .attributes-row {
        grid-template-columns: repeat(2, 1fr);                                     /* Two columns for mobile layout */
        gap: 8px;                                                                  /* Reduced gap for mobile */
    }
    
    .attribute-item {
        min-height: 70px;                                                          /* Minimum height for mobile items */
        padding: 12px 8px;                                                         /* Adjusted padding for mobile */
    }
    
    .attribute-name {
        font-size: 12px;                                                           /* Smaller font size for mobile */
    }
    
    .attribute-count {
        font-size: 16px;                                                           /* Larger font size for mobile counts */
    }
}

/* ========================================
   SIGNUP PAGE CARD STYLING - Shadow and Border
   ======================================== */
   
/* Signup page about cards - Apply shadow and border */
.signup-page .about-content .about-card {
    box-shadow: 0 4px 20px var(--Card_Shadow) !important;       /* Medium black shadow using CSS variable */
    border: 2px solid #4b5258 !important;                       /* Dark gray border - visible */
    transition: all 0.3s ease;                                   /* Smooth transition for hover effects */
}
.signup-page .about-content .about-card:hover {
    transform: translateY(calc(-1 * var(--Card_Hover_Lift))) scale(var(--Card_Hover_Scale)) !important; /* Use hover variables with !important to override general rule */
}

/* Signup page subtitle - Center the text */
.signup-page .about-subtitle {
    text-align: center !important;
    color: var(--Card_Text_Colour) !important;
    font-size: 1.1rem !important;
    margin-bottom: 30px !important;
    display: block !important;
    width: 100% !important;
}

/* Payment completion page styles */
.payment-completion {
    max-width: 800px;
    margin: 50px auto;
    padding: 40px;
    background: var(--Card_Background);
    border-radius: 12px;
    box-shadow: var(--Card_Shadow);
}

/* Admin notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    z-index: 1000;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Card close button for modals */
.card-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    background: var(--Error_Colour) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.card-close-btn:hover {
    background: #cc0000 !important;
    transform: scale(1.1) !important;
}

.card-close-btn:active {
    background: #990000 !important;
    transform: scale(0.95) !important;
}

/* Billing card stats styling */
.card-stats {
    margin: 15px 0;
    padding: 15px;
    background: var(--Card_Background_Colour);
    border: 1px solid var(--Card_Border_Colour);
    border-radius: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 5px 0;
}

.stat-item:last-child {
    margin-bottom: 0;
}

.stat-label {
    font-size: 14px;
    color: var(--Card_Text_Colour);
    font-weight: 500;
}

.stat-value {
    font-size: 16px;
    color: var(--Card_Text_Colour);
    font-weight: bold;
}

.card-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.billing-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--Card_Background_Colour, var(--Card_Background));
    border: 1px solid var(--Card_Border_Colour, var(--Card_Border));
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--Primary_Colour, var(--Primary_Color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Icon_On_Primary, #ffffff);
    font-size: 20px;
}

.stat-content h3 {
    margin: 0 0 5px 0;
    color: var(--Card_Text_Colour, var(--Text_Primary));
    font-size: 14px;
    font-weight: 500;
}

.stat-value {
    margin: 0;
    color: var(--Card_Text_Colour, var(--Text_Primary));
    font-size: 24px;
    font-weight: bold;
}

.admin-section {
    background: var(--Card_Background_Colour, var(--Card_Background));
    border: 1px solid var(--Card_Border_Colour, var(--Card_Border));
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
}

.section-header {
    padding: 20px;
    border-bottom: 1px solid var(--Card_Border_Colour, var(--Card_Border));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.section-header h2 {
    margin: 0;
    color: var(--Card_Text_Colour, var(--Text_Primary));
    font-size: 18px;
}

.section-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-controls { display: flex; gap: 10px; align-items: center; }

.search-input {
    padding: 8px 12px;
    border: 1px solid var(--Card_Border_Colour, var(--Card_Border));
    border-radius: 4px;
    background: var(--Card_Background_Colour, var(--Card_Background));
    color: var(--Card_Text_Colour, var(--Text_Primary));
    min-width: 200px;
}

.table-container { overflow-x: auto; }

.admin-table { width: 100%; border-collapse: collapse; }

.admin-table th,
.admin-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--Card_Border_Colour, var(--Card_Border));
}

.admin-table th {
    background: var(--Header_Background_Colour, var(--Header_Background));
    color: var(--Header_Text_Colour, var(--Header_Text));
    font-weight: 600;
    position: sticky;
    top: 0;
}

.admin-table td { color: var(--Card_Text_Colour, var(--Text_Primary)); }

.table-search,
.table-filter {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--Card_Border_Colour, var(--Card_Border));
    border-radius: 4px;
    background: var(--Card_Background_Colour, var(--Card_Background));
    color: var(--Card_Text_Colour, var(--Text_Primary));
    font-size: 12px;
}

.user-info strong { display: block; margin-bottom: 4px; }
.user-info small { color: var(--Card_Text_Colour, var(--Text_Primary)); opacity: 0.7; }

.user-type,
.subscription-status,
.payment-method,
.invoice-status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.user-type.subbie { background: var(--Badge_Subbie_Bg, #e3f2fd); color: var(--Badge_Subbie_Text, #1976d2); }
.user-type.tradie { background: var(--Badge_Tradie_Bg, #f3e5f5); color: var(--Badge_Tradie_Text, #7b1fa2); }

.subscription-status.active { background: var(--Badge_Active_Bg, #e8f5e8); color: var(--Badge_Active_Text, #2e7d32); }
.subscription-status.none { background: var(--Badge_None_Bg, #f5f5f5); color: var(--Badge_None_Text, #666); }

.payment-method.card { background: var(--Badge_Card_Bg, #e8f5e8); color: var(--Badge_Card_Text, #2e7d32); }
.payment-method.bank { background: var(--Badge_Bank_Bg, #e3f2fd); color: var(--Badge_Bank_Text, #1976d2); }
.payment-method.not_set { background: var(--Badge_NotSet_Bg, #f5f5f5); color: var(--Badge_NotSet_Text, #666); }

.invoice-status.paid { background: var(--Badge_Paid_Bg, #e8f5e8); color: var(--Badge_Paid_Text, #2e7d32); }
.invoice-status.pending { background: var(--Badge_Pending_Bg, #fff3e0); color: var(--Badge_Pending_Text, #f57c00); }
.invoice-status.overdue { background: var(--Badge_Overdue_Bg, #ffebee); color: var(--Badge_Overdue_Text, #d32f2f); }

.btn-sm { padding: 6px 12px; font-size: 12px; margin-right: 5px; }

.loading-row,
.no-data { text-align: center; padding: 20px; color: var(--Card_Text_Colour, var(--Text_Primary)); opacity: 0.7; }

@media (max-width: 768px) {
    .billing-stats-grid { grid-template-columns: 1fr; }
    .section-header { flex-direction: column; align-items: stretch; }
    .search-controls { flex-direction: column; }
    .search-input { min-width: auto; }
}

.notification.success { background-color: var(--Success_Color); }
.notification.error { background-color: var(--Error_Color); }
.notification.warning { background-color: var(--Warning_Color); }
.notification.info { background-color: var(--Primary_Color); }

/* Admin Billing Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--Card_Background, #fff);
    width: 90%;
    max-width: 800px;
    max-height: 90%;
    border-radius: 10px;
    position: relative;
    overflow-y: auto;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: var(--Error_Color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1001;
}

.invoice-modal-header { margin-bottom: 20px; }
.invoice-modal-header h2 {
    margin: 0 0 10px 0;
    color: var(--Card_Text_Colour, var(--Text_Primary));
    display: flex;
    align-items: center;
    gap: 10px;
}
.invoice-modal-header .invoice-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.invoice-modal-header .created-at { color: var(--Card_Text_Colour, var(--Text_Primary)); font-size: 14px; }

.invoice-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}
.details-title {
    margin: 0 0 15px 0;
    color: var(--Card_Text_Colour, var(--Text_Primary));
    border-bottom: 2px solid var(--Primary_Colour, var(--Primary_Color));
    padding-bottom: 5px;
}
.details-lines { line-height: 1.6; }
.details-line { margin: 5px 0; }

.invoice-description { margin-bottom: 30px; }
.description-box {
    margin: 0;
    padding: 15px;
    background: var(--Background_Secondary, #f8f9fa);
    border-radius: 5px;
    border-left: 4px solid var(--Primary_Colour, var(--Primary_Color));
}

.invoice-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--Card_Border_Colour, #eee);
}
.action-btn { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 768px) {
    .invoice-details-grid { grid-template-columns: 1fr; }
}

.completion-header {
    text-align: center;
    margin-bottom: 40px;
}

.completion-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--Success_Color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
    color: white;
}

.completion-title {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--Text_Primary);
}

.completion-message {
    font-size: 1.1rem;
    color: var(--Text_Secondary);
    line-height: 1.6;
}

.payment-section {
    background: var(--Background_Secondary);
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0;
    border-left: 4px solid var(--Primary_Color);
}

.payment-section-title {
    margin-top: 0;
    color: var(--Text_Primary);
}

.payment-icon {
    margin-right: 10px;
    color: var(--Primary_Color);
}

.payment-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.info-card {
    background: var(--Card_Background);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--Border_Color);
}

.info-title {
    font-weight: 600;
    color: var(--Text_Primary);
    margin-bottom: 10px;
}

.info-value {
    color: var(--Text_Secondary);
    font-size: 1.1rem;
}

.payment-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.payment-status {
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    background: var(--Background_Secondary);
    border-left: 4px solid var(--Primary_Color);
}

.payment-status-content {
    display: flex;
    align-items: center;
}

.payment-spinner {
    margin-right: 10px;
    color: var(--Primary_Color);
}

.payment-success {
    color: var(--Success_Color);
}

.payment-error {
    color: var(--Error_Color);
}

/* ========================================
   SIGNUP PAGE STYLES
   ======================================== */

/* Form Container */
.form-container {
    max-width: 600px;
    width: 90%;
    padding: 40px;
    background: var(--Card_Background_Colour);
    border: 1px solid var(--Card_Border_Colour);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--Shadow_Light);
    transition: transform 0.3s ease;
}

.form-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--Shadow_Medium);
}

/* Form Title */
.form-title {
    color: var(--Header_Button_BG_Colour);
    text-align: center;
    margin-bottom: 8px;
    font-size: 2rem;
    font-weight: 600;
}

/* Selection Grid */
.selection-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* Selection Items */
.selection-item {
    background: white !important;
    border: 1px solid var(--Card_Border_Colour) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px var(--Shadow_Light) !important;
    padding: 30px 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 !important;
}

.selection-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--Shadow_Medium);
    border-color: var(--Header_Button_BG_Colour);
}

.selection-item i {
    font-size: 3rem;
    color: var(--Header_Button_BG_Colour);
    margin-bottom: 20px;
}

.selection-item h3 {
    color: var(--Header_Button_BG_Colour);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.selection-item p {
    color: var(--Card_Text_Colour);
    line-height: 1.5;
}

/* Form Links */
.form-link {
    text-align: center;
    margin-top: 24px;
    color: var(--Card_Text_Colour);
}

.form-link a {
    color: var(--Header_Button_BG_Colour);
    text-decoration: none;
    font-weight: 500;
}

.form-link a:hover {
    text-decoration: underline;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-30 {
    margin-bottom: 30px;
}

.color-muted {
    color: var(--Card_Text_Colour);
}

.cursor-pointer {
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-container {
        width: 95%;
        padding: 30px 20px;
        margin: 20px;
    }
    
    .selection-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .form-title {
        font-size: 1.5rem;
    }
}