/* ======================================== */
/* Global CSS Variables                     */
/* ======================================== */
:root {
  /* Primary Colors */
  --pop-green: #7bdd2a;
  --pop-black: #000000;
  --pop-white: #FFFFFF;
  --pop-purple-two: #8A2BE2;
  --pop-green3: #34b370;
  --pop-off-white-text: #F5F5F5; /* Example: White Smoke, or your preferred #FAFAFA */

  /* Secondary Colors */
  --pop-dark-gray: #333333;
  --pop-light-gray: #F8F9FA; /* Used for backgrounds, modal header */

  /* Accent Colors */
  --pop-orange: #FF6347; /* Used for h1 on store-info */
  --pop-purple: #742539;

  /* Button Colors */
  --btn-primary: var(--pop-orange);
  --btn-primary-hover: #FF8C00;
  --btn-text: var(--pop-white);
  --btn-text-hover: var(--pop-white);
}

/* ======================================== */
/* Global Base & Layout Styles            */
/* ======================================== */
body {
  font-family: 'Cera Pro', sans-serif; /* Use Cera Pro if available, fallback needed? */
  /* Fallback font stack: */
  /* font-family: 'Cera Pro', Arial, sans-serif; */
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
    
  color: var(--pop-dark-gray); /* Default text color */
  overflow-x: hidden; /* Prevent horizontal scrollbars */
  display: flex; /* Enable flexbox for sticky footer */
  flex-direction: column;
  min-height: 100vh; /* Ensure body takes at least full viewport height */
}

html {
  overflow-y: scroll; /* Keep scrollbar visible to prevent layout jumps */
}

main {
   flex: 1 0 auto; /* Allow main content to grow and push footer down */
}

/* Standard Bootstrap container adjustments (already applied in index/store-info) */
.container {
  max-width: 1280px; /* Custom max-width */
  /* margin: 0 auto; /* Bootstrap handles this */
  /* padding-left: 15px; /* Bootstrap handles this */
  /* padding-right: 15px; /* Bootstrap handles this */
}

/* Global Heading Styles (Can be overridden by page-specific styles) */
h1, h2, h3, h4, h5, h6 {
    color: var(--pop-dark-gray);
    /* Add default margins if needed */
    /* margin-top: 1.5rem; */
    /* margin-bottom: 1rem; */
}

/* Specific main heading style used on multiple pages */
.main-heading {
    letter-spacing: -0.01em;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
    color: #333; /* Default color, can be overridden */
}


/* ======================================== */
/* Global CSS Variables (Ensure these are defined in your :root) */
/* ======================================== */
/*
:root {
  ...
  --pop-off-white-text: #F5F5F5; // Example: White Smoke
  --pop-white: #FFFFFF;
  --pop-green3: #66b422; // Your theme green
  ...
}
*/

/* ======================================== */
/* Navbar Styles                            */
/* ======================================== */
.navbar {
  min-height: 71px;
  padding-top: 0;
  padding-bottom: 0;
  
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}

/* Only apply fixed height on larger screens */
@media (min-width: 992px) {
  .navbar {
    height: 70px;
  }
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0px;
  margin-right: 1rem; /* Add some space after logo */
  height: 70px; /* Match navbar height */
  display: flex; /* Align logo vertically */
  align-items: center;
}

.navbar-logo {
  height: 75px; /* Adjust logo height within the brand link */
  width: auto;
  max-width: 100%;
  vertical-align: middle; /* Ensure vertical alignment if needed */
}

/* Default padding for nav links - this rule applies to both .navbar-dark and .navbar-light */
.navbar-nav .nav-link {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* ======================================== */
/* Navbar Styles (Additions/Modifications)  */
/* ======================================== */

/* Make sure the navbar itself doesn't allow its content to make it too tall */
.navbar {
    /* min-height: 71px; /* Your existing style */
    /* height: 70px;    /* Your existing style */
    /* The content inside shouldn't force it to be much taller than this. */
    align-items: center; /* Vertically align items within the .navbar itself */
}

#navbarNavContent { /* The collapsible part */
    align-items: center; /* Vertically align items (search form, nav uls) in the middle */
}

/* Style for the search form container within the navbar */
#navbar-search-form {
    /* max-width: 500px; /* From inline style, adjust as needed */
    /* width: 100%;    /* From inline style */
    margin-top: 0;    /* Remove default form margins if any */
    margin-bottom: 0; /* Remove default form margins if any */
    /* mx-auto on form tag handles horizontal centering if space */
    /* align-self: center; /* Already set in #navbarNavContent */
}

/* Styling the overall input group for the search bar */
#navbar-search-form .input-group.input-group-sm { /* Be specific for .input-group-sm */
    display: flex;    /* Default for input-group */
    flex-wrap: nowrap;  /* Default for input-group */
    background-color: var(--pop-white); 
    border-radius: 0.25rem; /* Smaller radius for -sm */
    overflow: hidden; 
    /* Try to constrain its height if children are too big */
    max-height: 31px; /* Bootstrap's .input-group-sm input height is ~30-31px */
}

/* Styling the category dropdown button ("All") */
#navbar-search-form .input-group-sm .search-category-btn {
    background-color: #f8f9fa; 
    color: var(--pop-dark-gray);
    border: none; 
    font-size: 0.75rem;  /* Smaller font for -sm */
    padding: 0.25rem 0.5rem; /* Bootstrap's .btn-sm padding */
    line-height: 1.5;      /* Bootstrap's .btn-sm line-height */
    /* border-right: 1px solid #dee2e6; /* Thinner separator */
}
#navbar-search-form .input-group-sm .search-category-btn:hover {
    background-color: #e2e6ea;
}
#navbar-search-form .input-group-sm .search-category-btn:focus {
    box-shadow: none; 
}

/* Ensure dropdown menu for search categories looks fine */
#navbar-search-form .input-group-sm + .dropdown-menu, /* If attached to button */
#navbar-search-form .dropdown-menu { /* General */
    font-size: 0.875rem; 
    /* Position adjustments might be needed if it's appearing oddly.
       Bootstrap usually handles this if the HTML is correct. */
}

/* Styling the text input field */
#navbar-search-form .input-group-sm .search-input-field {
    background-color: transparent; 
    border: none; 
    color: var(--pop-dark-gray); 
    font-size: 0.75rem;  /* Smaller font for -sm */
    padding: 0.25rem 0.5rem; /* Bootstrap's .form-control-sm padding */
    height: auto; /* Let padding define height, or match Bootstrap's calculated height */
    line-height: 1.5;
}
#navbar-search-form .input-group-sm .search-input-field::placeholder {
    color: #6c757d; 
    opacity: 1;
}
#navbar-search-form .input-group-sm .search-input-field:focus {
    box-shadow: none; 
    background-color: transparent; 
}

/* Styling the search submit button */
#navbar-search-form .input-group-sm .search-submit-btn {
    background-color: #f8f9fa; 
    color: var(--pop-dark-gray);
    border: none;
    font-size: 0.75rem; /* Smaller font for -sm */
    padding: 0.25rem 0.5rem; /* Bootstrap's .btn-sm padding */
    line-height: 1.5;
    /* border-left: 1px solid #dee2e6; /* Thinner separator */
}
#navbar-search-form .input-group-sm .search-submit-btn:hover {
    background-color: #e2e6ea;
}
#navbar-search-form .input-group-sm .search-submit-btn:focus {
    box-shadow: none;
}

/* Responsive adjustments - keep as is, these are generally good */
@media (max-width: 991.98px) { 
    #navbar-search-form {
        width: 100%; 
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
        margin-top: 0.5rem;  
        margin-bottom: 0.5rem; 
    }
    /* Optional: If you want nav links to stack cleanly after search in mobile */
    .navbar-collapse {
        align-items: stretch; /* Make items full width when stacked */
    }
    /* ... (other mobile nav styles if needed) ... */
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ======================================== */
/* Secondary Product Category Navbar Styles */
/* ======================================== */
/* ======================================== */
/* Secondary Product Category Navbar Styles */
/* ======================================== */
.navbar-product-categories {
    background-color: #000000;
    padding-top: 0.1rem;    
    padding-bottom: 0.1rem;   
    height: auto !important;      /* << OVERRIDE THE GLOBAL .navbar HEIGHT */
    min-height: unset !important; /* << OVERRIDE THE GLOBAL .navbar MIN-HEIGHT */
    border-bottom: 1px solid #222; 
    width: 100%; 
}

/* ... rest of .navbar-product-categories styles ... */

.navbar-product-categories .container {
   /* This container often has its own padding from Bootstrap (e.g., 15px on each side) */
   /* We want the UL inside it to control the alignment of the links */
   /* justify-content on the .container itself might not be what you need if the .nav ul is full width */
   display: flex; /* Ensure .container is a flex container if you want to use justify-content on it for its direct children */
   justify-content: flex-start; /* This would align the .nav ul to the left OF THE CONTAINER'S PADDING BOX */
   padding-left: 0; /* Potentially remove container padding if you want edge-to-edge alignment for the UL */
   padding-right: 0; /* Same as above */
}

.navbar-product-categories .nav {
    flex-wrap: wrap; 
    justify-content: flex-start; /* << CORRECTED: Align items (li) to the start of the .nav ul */
    width: 100%; 
    padding-left: 0; /* Remove default UL padding if any */
    list-style: none; /* Remove bullets if not already done by .nav */
}

.navbar-product-categories .nav-item {
    display: flex; /* To help vertically align dot with text */
    align-items: center;
}

.navbar-product-categories .nav-link {
    color: var(--pop-off-white-text, #F5F5F5); /* Use your off-white variable, fallback if not defined */
    padding: 0.25rem 0.65rem; /* Adjust padding for links */
    font-size: 0.85rem;      /* Slightly smaller font size */
    text-transform: uppercase; /* Optional: if you want uppercase links */
    letter-spacing: 0.05em;   /* Optional: slight letter spacing */
    transition: color 0.2s ease-in-out, transform 0.15s ease-in-out;
    font-weight: 700; /* Normal to slightly bold */
}

.navbar-product-categories .nav-link:hover,
.navbar-product-categories .nav-link:focus {
    color: var(--pop-white, #FFFFFF); /* Brighter on hover */
    /* text-decoration: none; /* Bootstrap .nav-link usually handles this */
    transform: scale(1.05); /* Subtle zoom effect */
}

/* Styling for the green dot separator */
.navbar-product-categories .category-dot {
    display: inline-block;
    width: 6px;  /* Size of the dot */
    height: 6px; /* Size of the dot */
    background-color: var(--pop-green3); /* Your site's common green */
    border-radius: 50%; /* Makes it a circle */
    margin-left: 0.65rem;  /* Space before the dot (matches link horizontal padding) */
    margin-right: 0.65rem; /* Space after the dot */
    /* Vertical alignment is handled by flex on .nav-item */
}

/* Hide the first separator's dot if you don't want a leading dot */
/* .navbar-product-categories .nav-item:first-child + .category-separator .category-dot {
    display: none;
} */
/* Or, more simply, just don't put a separator before the very first link in HTML */

/* Responsive: On smaller screens, you might want more vertical padding or adjust font size */
@media (max-width: 767.98px) { /* Bootstrap's md breakpoint */
    .navbar-product-categories .nav-link {
        font-size: 0.8rem;
        padding: 0.25rem 0.4rem;
    }
    .navbar-product-categories .category-dot {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
    }
    .navbar-product-categories .nav {
        justify-content: space-around; /* Better distribution on small screens if wrapping */
    }
}

/* --- STYLING FOR LINKS IN A DARK NAVBAR --- */
.navbar-dark .navbar-nav .nav-link {
    color: var(--pop-off-white-text);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--pop-green3);
    transform: scale(1.05);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: var(--pop-green3);
    font-weight: 700;
}


/* Dropdown Menu Styles (These remain specific to .navbar-dark as they were) */
.navbar-dark .navbar-nav .dropdown-menu {
  background-color: #343a40; /* Dark background for the dropdown itself */
  border: none; /* Optional: remove default Bootstrap border if any */
}
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--pop-off-white-text); /* Use off-white for dropdown items too for consistency */
  /* Was: color: rgba(255,255,255,.8); */
  padding-top: 0.5rem; /* Adjust padding if needed */
  padding-bottom: 0.5rem;
}
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:focus {
  background-color: #495057; /* Darker hover background for dropdown item */
  color: var(--pop-white);      /* Brighter pure white text on hover */
  /* Was: color: #ffffff; */
}
.navbar-dark .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #495057; /* Darker divider */
}



/* Responsive adjustments for the search bar if needed */
@media (max-width: 991.98px) { /* Below lg (when navbar collapses) */
    #navbar-search-form {
        width: 100%; /* Make search bar full width in collapsed menu */
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        max-width: none; /* Remove max-width constraint */
    }
}


/* ======================================== */
/* Footer Styles                            */
/* ======================================== */
.footer {
  background-color: #333; /* Set by .bg-dark */
  color: #fff; /* Set by .text-light */
  flex-shrink: 0; /* Prevent footer from shrinking */
}

.footer h6 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

.footer ul {
  padding-left: 0;
  list-style: none; /* Remove bullet points */
  margin-bottom: 1rem; /* Spacing below lists */
}

.footer ul li {
  margin-bottom: 0.4rem;
}

.footer ul li a {
  font-size: 0.9rem;
  color: #adb5bd; /* Lighter gray for links */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer ul li a:hover {
  color: var(--pop-green3); /* Theme green on hover */
}

.footer .social-icons {
  display: flex;
  gap: 10px; /* Space between icons */
  padding-left: 0;
  list-style: none;
  margin-top: 0.5rem; /* Space above icons */
}

.footer .social-icon { /* Style for the <a> tag */
  width: 40px;
  height: 40px;
  border: 2px solid #adb5bd; /* Match link color */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #fff; /* Icon color */
  text-decoration: none;
  font-size: 1.1rem; /* Icon size */
}

.footer .social-icon:hover {
  background-color: var(--pop-green3); /* Theme green background */
  border-color: var(--pop-green3); /* Theme green border */
  color: white; /* White icon on hover */
}

.footer .text-center { /* Copyright section */
    background-color: rgba(0, 0, 0, 0.2);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ======================================== */
/* Modal Styles                             */
/* ======================================== */
.modal-content {
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-header {
  background-color: var(--pop-light-gray);
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 10px; /* Match content radius */
  border-top-right-radius: 10px; /* Match content radius */
  padding: 1rem 1.5rem;
}

.modal-title {
  color: var(--pop-dark-gray);
  font-weight: 600;
  font-size: 1.25rem;
}

.modal-body {
  padding: 1.5rem;
  color: var(--pop-dark-gray);
  font-size: 1.1rem; /* Slightly larger text */
}

.modal-footer {
  border-top: 1px solid #dee2e6;
  padding: 1rem 1.5rem;
  gap: 0.5rem; /* Space between buttons */
  background-color: var(--pop-light-gray); /* Optional: Match header background */
  border-bottom-left-radius: 10px; /* Match content radius */
  border-bottom-right-radius: 10px; /* Match content radius */
}

/* Style Bootstrap close button */
.modal-header .btn-close {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.modal-header .btn-close:hover {
  opacity: 1;
}

/* Style for custom buttons in modal footer */
.modal-footer .event-btn-small {
  padding: 8px 20px;
  font-size: 0.95rem;
  border: 2px solid var(--pop-green3);
  border-radius: 20px;
  color: var(--pop-green3);
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: transparent;
  text-align: center;
  display: inline-block;
  font-weight: 600;
  min-width: 100px;
}

.modal-footer .event-btn-small:hover {
  background-color: var(--pop-green3);
  color: var(--pop-white);
  text-decoration: none;
}

/* Modal animation */
.modal.fade .modal-dialog {
  transition: transform 0.2s ease-out;
}
.modal.fade .modal-content {
  transform: scale(0.95);
  transition: transform 0.2s ease-out;
}
.modal.show .modal-content {
  transform: scale(1);
}


/* ======================================== */
/* Index Page Specific Styles               */
/* ======================================== */

/* Container for event preview section */
.events-preview-container {
    /* Max-width and centering handled by global .container styles */
}

/* Event Preview Section Styling */
.events-preview {
   padding-top: 1rem;
   margin-bottom: 2rem;
}

/* Scrolling events container */
.events-scroll-container {
  overflow: hidden; /* Hides the parts of the events-container that are off-screen */
  width: 100%;
  /* max-width: 1280px; /* Max width handled by parent container */
  margin: 0 auto; /* Center the scroll area if needed */
}

/* Static styles for the events container (dynamic width/animation added inline) */
.events-container {
    display: flex; /* Align event previews in a row */
    /* Note: width and animation properties are applied inline via PHP */
}

/* Individual event preview block */
.event-preview {
  flex: 0 0 auto; /* Prevent flexing, fixed width */
  width: 300px; /* Fixed width of each event */
  margin-right: 20px; /* Space between events */
  background-color: #fff; /* White background */
  border: 1px solid #eee; /* Light border */
  border-radius: 5px; /* Rounded corners */
  overflow: hidden; /* Clip content like images */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}

.event-image {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover; /* Scale image nicely */
  display: block; /* Remove extra space below image */
}

.event-info {
  padding: 1rem;
  background-color: var(--pop-light-gray); /* Light background for info */
}

.event-info h3 {
  margin-top: 0;
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--pop-dark-gray);
}
.event-info p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555; /* Darker gray text */
  margin-bottom: 0; /* Remove default paragraph margin if needed */
}

/* Flex container for index page action buttons and social icons */
.event-actions {
  display: flex;
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Align items vertically */
  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
  gap: 20px 30px; /* Row gap, Column gap */
  margin-top: 20px;
  margin-bottom: 28px;
}

/* Container for the page link buttons */
.event-buttons {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap */
  justify-content: center; /* Center buttons when wrapped */
  gap: 10px; /* Space between buttons */
}

/* Base Style for event buttons */
.event-btn {
  /* Keep original styling */
  padding: 10px 20px; /* Base padding */
  font-size: 1rem; /* Base font size */
  border: 2px solid var(--pop-green3);
  border-radius: 30px;
  color: var(--pop-green3);
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: transparent;
  font-weight: bold; /* Base font weight */
  cursor: pointer; /* Add pointer cursor */

  /* --- Flexbox Centering --- */
  display: inline-flex; /* Use inline-flex instead of inline-block */
  justify-content: center; /* Center content (text) horizontally */
  align-items: center; /* Center content (text) vertically */
  /* text-align: center; /* Not needed with flexbox */
  /* --- End Flexbox Centering --- */

  /* Apply min-width in more specific rules if needed */
}

/* Ensure the hover state is defined */
.event-btn:hover {
  background-color: var(--pop-green3);
  color: var(--pop-white);
  text-decoration: none;
}

/* Social Icons section specifically under the event actions */
.event-actions .social-icons {
   display: flex;
   gap: 15px; /* Space between icons */
}
.event-actions .social-icon { /* Style for the <a> tag */
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--pop-green3); /* Icon color */
  font-size: 20px; /* Icon size */
  border: 2px solid var(--pop-green3); /* Border matching button */
  background-color: transparent;
}
.event-actions .social-icon:hover {
  background-color: var(--pop-green3);
  color: white;
  text-decoration: none;
  border-color: var(--pop-green3);
}

/* Dynamic Content Block Styles (Text/Image blocks from DB) */
.content-block {
  line-height: 1.6;
  margin-bottom: 2rem; /* Spacing below each block */
}
.content-block-inner {
  padding: 0; /* No inner padding by default */
}
.text-block {
  background-color: transparent; /* No background */
  border: none; /* No border */
}

/* Styles for common HTML tags potentially coming from DB content */
.text-block h1, .text-block h2, .text-block h3,
.text-block h4, .text-block h5, .text-block h6 {
  color: var(--pop-dark-gray); /* Default heading color */
  font-weight: 700; /* Bold */
  margin-top: 1.5rem; /* Space above headings */
  margin-bottom: 1rem; /* Space below headings */
}
 .text-block p {
   margin-bottom: 1rem; /* Standard paragraph spacing */
 }
.text-block a {
  color: var(--pop-green3); /* Theme green links */
  text-decoration: underline;
}
.text-block a:hover {
  color: var(--pop-green); /* Lighter green on hover */
  text-decoration: none;
}

.image-block img {
  display: block; /* Remove extra space below image */
  max-width: 100%; /* Responsive image */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center image within its block */
  border-radius: 5px; /* Slightly rounded corners */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}


/* ======================================== */
/* Store Info Page Specific Styles          */
/* ======================================== */
/* Apply these styles only when a parent has the class .store-info-page */

.store-info-page .main-heading {
    color: var(--pop-orange); /* Override global main-heading color */
    letter-spacing: -0.05em;
}

.store-info-page h2 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 20px;
}

.store-info-page h3 {
    font-size: 1.5em;
    color: var(--pop-green3); /* Theme green */
    margin-bottom: 15px; /* Slightly less margin */
}

.store-info-page h4 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 10px;
}

.store-info-page h5 {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 8px; /* Less margin for hours heading */
    font-weight: bold;
}

/* Paragraphs and lists on store info page */
.store-info-page p,
.store-info-page ul {
    margin-bottom: 20px; /* Consistent spacing */
}

.store-info-page ul {
    padding-left: 20px; /* Standard indentation */
    list-style: disc; /* Ensure bullets are visible */
}
.store-info-page ul ul { /* Nested lists if any */
     list-style: circle;
     margin-top: 5px;
     margin-bottom: 10px;
}

/* Image container and image styling for store info */
.store-info-page .image-container {
    text-align: center; /* Center the image */
    margin-top: 1.5rem;
    margin-bottom: 2.5rem; /* More space after image */
}

.store-info-page .store-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners for the image */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* ======================================== */
/* Login Page Specific Styles               */
/* ======================================== */

/* Apply only when a parent has .login-page */
.login-page .login-container {
    display: flex;
    justify-content: center; /* Center the card horizontally */
    align-items: flex-start; /* Align card to the top */
    padding-top: 3rem; /* Space from top */
    padding-bottom: 3rem; /* Space from bottom */
}

.login-page .login-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    width: 100%;
    max-width: 500px; /* Limit card width */
}

.login-page .login-title {
    color: var(--pop-dark-gray);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
    text-align: center;
}

.login-page .form-group {
    margin-bottom: 1.5rem; /* Space between form groups */
}

.login-page .form-label {
    display: block; /* Ensure label is on its own line */
    color: var(--pop-dark-gray);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.login-page .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6; /* Use standard Bootstrap border color */
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

.login-page .form-input:focus {
    outline: none; /* Remove default focus outline */
    border-color: var(--pop-green3); /* Highlight with theme color on focus */
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25); /* Optional: Add focus shadow */
}

/* Style for displaying validation errors */
.login-page .form-input.is-invalid {
    border-color: #dc3545; /* Standard Bootstrap error color */
}
.login-page .form-input.is-invalid:focus {
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Error focus shadow */
}

.login-page .error-message {
    display: block; /* Make sure it takes its own line */
    width: 100%; /* Take full width */
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem; /* Space above error message */
}

/* Remember Me Checkbox styling */
.login-page .remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem; /* Match other form group spacing */
}

.login-page .checkbox-container {
    display: flex;
    align-items: center;
    position: relative; /* Needed for custom checkbox potentially */
    cursor: pointer;
    font-size: 1rem;
    color: var(--pop-dark-gray);
    user-select: none; /* Prevent text selection on click */
}

/* Basic styling for default checkbox */
.login-page .checkbox-container input[type="checkbox"] {
    margin-right: 0.75rem; /* Space between checkbox and label */
    width: 1.1em; /* Slightly larger checkbox */
	height: 1.1em;
    cursor: pointer;
}
/* You can add more complex styles here for a custom checkmark if desired */
/* .login-page .checkmark { ... } */


/* Login Button Styling */
.login-page .login-btn {
    width: 100%; /* Make button full width */
    background-color: var(--pop-green3);
    color: var(--pop-white);
    padding: 12px 28px;
    font-size: 1.1rem;
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
}

.login-page .login-btn:hover {
    background-color: transparent;
    color: var(--pop-green3);
    border-color: var(--pop-green3);
}

/* Forgot Password Link */
.login-page .forgot-password {
    text-align: center;
    margin-top: 1rem;
}

.login-page .forgot-password a {
    color: var(--pop-dark-gray);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.login-page .forgot-password a:hover {
    color: var(--pop-green3);
    text-decoration: underline;
}

/* Register Link Section */
.login-page .register-link {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6; /* Separator line */
}

.login-page .register-link p {
    color: var(--pop-dark-gray);
    margin: 0;
    font-size: 0.95rem;
}

.login-page .register-link a {
    color: var(--pop-green3);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-page .register-link a:hover {
    color: var(--pop-dark-gray);
    text-decoration: underline;
}

/* Removed .event-btn generic override - use .login-btn specifically */
/* Removed .footer-spacing - use margin/padding on containers */

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-page .login-card {
        padding: 2rem; /* Slightly less padding on smaller screens */
    }

    .login-page .login-title {
        font-size: 1.5rem; /* Smaller title */
    }
}

/* ======================================== */
/* Profile Page Specific Styles             */
/* ======================================== */

.profile-page .main-heading {
    padding-top: 31px; /* Specific padding from blade */
    padding-bottom: 20px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Override centered main-heading */
}

.profile-page .profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 2rem; /* Space between columns */
    margin-bottom: 2rem;
}

/* Add styles for the column containers */
.profile-page .profile-column {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Space between cards in the same column */
}

.profile-page .info-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 0; /* Remove bottom margin as we're using gap */
    display: flex; /* Use flexbox for vertical layout within card */
    flex-direction: column;
    width: 100%; /* Ensure card takes full width of column */
}

.profile-page .card-title {
    color: var(--pop-dark-gray);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem; /* Space below title */
    border-bottom: 1px solid #eee; /* Separator line */
}

.profile-page .info-group {
    margin-bottom: 1.5rem;
}

.profile-page .info-label {
    color: var(--pop-dark-gray);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem; /* Slightly smaller label */
    text-transform: uppercase; /* Uppercase labels */
    letter-spacing: 0.5px;
}

.profile-page .info-value {
    color: var(--pop-dark-gray);
    margin: 0;
    font-size: 1.1rem;
}

.profile-page .empty-message {
    color: var(--pop-dark-gray);
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* Form Styles within cards */
.profile-page .form-group {
    margin-bottom: 1.5rem;
}

.profile-page .form-label { /* Reusing login styles, ensure consistency */
    display: block;
    color: var(--pop-dark-gray);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-page .form-input { /* Reusing login styles */
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.profile-page .form-input:focus {
    outline: none;
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25);
}

/* Select specific styling */
.profile-page select.form-input {
    cursor: pointer;
}

.profile-page .form-input.is-invalid { /* Reusing login styles */
    border-color: #dc3545;
}

.profile-page .form-input.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.profile-page .error-message { /* Reusing login styles */
    display: block;
    width: 100%;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Success Message Box */
.profile-page .success-alert {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    color: #155724;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    font-size: 1rem;
}

/* Action buttons container */
.profile-page .card-actions,
.profile-page .form-actions {
    margin-top: auto; /* Push actions to bottom of card if using flex */
    padding-top: 1rem; /* Space above actions */
}

.profile-page .event-btn { /* Style for buttons like Update */
    padding: 10px 24px; /* Slightly adjusted padding */
    font-size: 1rem; /* Slightly smaller font */
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    min-width: 180px; /* Adjusted min-width */
    font-weight: 600;
    cursor: pointer;
}

.profile-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
    text-decoration: none;
}

/* Layout for City/State/Zip row */
.profile-page .form-row {
    display: grid;
    /* Adjust columns based on typical widths */
    grid-template-columns: 1fr 1fr 100px; /* City, State, Zip */
    gap: 1rem;
    align-items: end; /* Align items to bottom if labels differ */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .profile-page .profile-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
    
    .profile-page .profile-column {
        gap: 2rem; /* Maintain consistent spacing */
    }
}

@media (max-width: 768px) {
    .profile-page .info-card {
        padding: 1.5rem; /* Less padding on smaller screens */
    }

    .profile-page .card-title {
        font-size: 1.3rem; /* Smaller title on mobile */
    }

    .profile-page .event-btn {
        width: 100%; /* Full width buttons on mobile */
        min-width: unset;
    }

    .profile-page .form-row {
        grid-template-columns: 1fr; /* Stack city/state/zip on mobile */
    }
}

/* ======================================== */
/* Security Questions Page Specific Styles  */
/* ======================================== */

.security-questions-page .main-heading {
    padding-top: 31px;
    padding-bottom: 20px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Align heading left */
}

.security-questions-page .security-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
    max-width: 700px; /* Limit width slightly */
    margin-left: auto; /* Center card if container is wider */
    margin-right: auto;
}

.security-questions-page .card-title {
    color: var(--pop-dark-gray);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.security-questions-page .instructions {
    margin-bottom: 2rem;
    font-size: 1rem;
    color: #555;
}

/* Reusing form styles from login/profile */
.security-questions-page .form-group {
    margin-bottom: 1.5rem;
}
.security-questions-page .form-label {
    display: block;
    color: var(--pop-dark-gray);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.security-questions-page .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}
.security-questions-page .form-input:focus {
    outline: none;
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25);
}
.security-questions-page .form-input.is-invalid {
    border-color: #dc3545;
}
.security-questions-page .form-input.is-invalid:focus {
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.security-questions-page .error-message {
    display: block;
    width: 100%;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.security-questions-page .success-alert { /* Reusing profile style */
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    color: #155724;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}
.security-questions-page .alert-warning { /* Optional for info */
     background-color: #fff3cd;
     border-left: 4px solid #ffeeba;
     color: #856404;
     padding: 1rem;
     margin-bottom: 1.5rem;
     border-radius: 4px;
}
.security-questions-page .form-actions {
    margin-top: 2rem;
    text-align: center; /* Center button */
}
.security-questions-page .event-btn { /* Reusing profile button style */
    padding: 10px 24px;
    font-size: 1rem;
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    min-width: 180px;
    font-weight: 600;
    cursor: pointer;
}
.security-questions-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}
.security-questions-page .back-link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--pop-dark-gray);
    text-decoration: none;
    font-size: 0.9rem;
}
.security-questions-page .back-link:hover {
     color: var(--pop-green3);
     text-decoration: underline;
}

/* ======================================== */
/* My Orders Page Specific Styles           */
/* ======================================== */

.my-orders-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Override centered default */
}

.my-orders-page .orders-grid {
    display: grid;
    gap: 2rem; /* Space between order cards */
    padding-bottom: 1rem;
}

.my-orders-page .order-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #eee; /* Subtle border */
}

.my-orders-page .order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items top */
    margin-bottom: 1.5rem;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 0.5rem; /* Space if wraps */
}

.my-orders-page .order-info {
    flex-grow: 1; /* Allow info to take space */
}

.my-orders-page .order-number {
    font-size: 1.2rem;
    color: var(--pop-dark-gray);
    margin-bottom: 0.25rem;
    font-weight: bold;
}

.my-orders-page .order-date {
    color: #6c757d; /* Slightly muted date color */
    font-size: 0.9rem;
    margin: 0;
}

.my-orders-page .order-status {
    flex-shrink: 0; /* Prevent status from shrinking */
}

.my-orders-page .status-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem; /* Slightly smaller badge */
    font-weight: 600;
    text-transform: capitalize; /* Capitalize status */
}
/* Status Colors */
.my-orders-page .status-pending { background-color: #fef3c7; color: #92400e; }
.my-orders-page .status-processing { background-color: #e0e7ff; color: #3730a3; }
.my-orders-page .status-shipped { background-color: #ccfbf1; color: #0f766e; } /* Added shipped example */
.my-orders-page .status-completed { background-color: #d1fae5; color: #065f46; }
.my-orders-page .status-cancelled { background-color: #fee2e2; color: #991b1b; } /* Added cancelled example */
/* Add more status colors as needed */

.my-orders-page .order-items {
    border-top: 1px solid #dee2e6; /* Standard border */
    border-bottom: 1px solid #dee2e6;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
}

.my-orders-page .order-item {
    display: grid;
    /* Adjust columns for image and details */
    grid-template-columns: 70px 1fr; /* Fixed image col, flexible details col */
    gap: 1rem; /* Space between image and details */
    margin-bottom: 1rem;
    align-items: flex-start; /* Align top */
}
.my-orders-page .order-item:last-child {
    margin-bottom: 0;
}

.my-orders-page .item-image {
    /* Styles applied to container div */
}

.my-orders-page .product-thumbnail {
    width: 60px; /* Fixed width */
    height: 84px; /* Fixed height */
    object-fit: cover; /* Cover area */
    border-radius: 4px;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eee;
}
.my-orders-page .product-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.my-orders-page .no-image {
    width: 60px;
    height: 84px;
    background-color: var(--pop-light-gray);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem; /* Smaller text */
    color: #6c757d;
    text-align: center;
    line-height: 1.2;
    border: 1px solid #dee2e6;
}

.my-orders-page .item-details {
    /* Container for text details */
}

.my-orders-page .item-name {
    font-size: 0.95rem; /* Slightly smaller name */
    margin-bottom: 0.25rem;
    font-weight: 600; /* Make name bold */
    line-height: 1.3;
}

.my-orders-page .item-price,
.my-orders-page .item-quantity {
    font-size: 0.9rem;
    color: var(--pop-dark-gray);
    margin: 0 0 0.25rem 0; /* Small spacing */
}

.my-orders-page .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align bottom */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 1rem; /* Space if wraps */
}

.my-orders-page .order-total {
    font-weight: 600;
    font-size: 1.1rem;
}

.my-orders-page .total-amount {
    color: var(--pop-green3);
    margin-left: 0.5rem;
}

.my-orders-page .delivery-info {
    text-align: right;
    font-size: 0.9rem;
}

.my-orders-page .delivery-method {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: capitalize;
}

.my-orders-page .shipping-address {
    color: var(--pop-dark-gray);
    margin: 0;
    font-size: 0.85rem; /* Smaller address text */
    line-height: 1.4;
}

/* Empty Orders State */
.my-orders-page .empty-orders {
    text-align: center;
    padding: 3rem 1rem;
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}
.my-orders-page .empty-orders p {
    font-size: 1.2rem;
    color: var(--pop-dark-gray);
    margin-bottom: 1.5rem;
}
/* Reusing .event-btn style for the button */

/* Responsive adjustments */
@media (max-width: 768px) {
    .my-orders-page .order-header,
    .my-orders-page .order-footer {
        flex-direction: column; /* Stack header/footer elements */
        align-items: stretch; /* Make them full width */
        gap: 1rem;
    }

    .my-orders-page .delivery-info {
        text-align: left; /* Align left on mobile */
    }

    .my-orders-page .order-card {
        padding: 1.5rem; /* Less padding */
    }
     .my-orders-page .order-item {
        grid-template-columns: 50px 1fr; /* Smaller image column */
    }
    .my-orders-page .product-thumbnail,
    .my-orders-page .no-image {
        width: 50px;
        height: 70px;
    }
}

/* Existing .card-hover-trigger might just be for cursor, let's be specific */
.product-grid-image {
    transition: transform 0.2s ease-in-out; /* Smooth transition for the zoom */
}

.product-grid-image:hover {
    transform: scale(1.05); /* Slight zoom on hover. Adjust 1.05 as desired. */
    /* You could also add a subtle box-shadow on hover if you like: */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
}

/* Keep your existing modal preview CSS the same */
.card-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1055;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}

.card-preview-overlay.active {
    display: flex;
    opacity: 1;
}

.card-preview-image {
    display: block;
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

.card-hover-trigger { /* This class is now mainly for the JS to find the clickable images */
    cursor: pointer; /* Or 'zoom-in' */
}

/* .card-preview-overlay.active .card-preview-image {
    transform: scale(1); /* Animate to full size */
/* } */

/* ======================================== */
/* Events Page Specific Styles              */
/* ======================================== */

.events-page .custom-container {
    padding-top: 23px;
    padding-bottom: 3rem;
}

.events-page .main-heading {
    text-align: left;
    padding-top: 0;
    padding-bottom: 1rem;
}

.events-page .event-table {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-bottom: 50px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    overflow: hidden;
}

.events-page .event-header {
    display: flex;
    font-size: 0.8rem;
    font-weight: bold;
    background-color: var(--pop-light-gray);
    border-bottom: 1px solid #ccc;
    color: #333;
}

.events-page .event-header .event-column {
    padding: 0.75rem 0.75rem;
    text-transform: uppercase;
    color: #555;
    border-right: none;
}

.events-page .event-row {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    min-height: 100px;
}

.events-page .event-row:last-child {
    border-bottom: none;
}

.events-page .event-column {
    padding: 0.75rem 0.75rem;
    display: flex;
    align-items: center;
    border-right: 1px solid #eee;
    word-break: break-word;
}

.events-page .event-column:last-child {
    border-right: none;
}

/* Column Widths - Adjusted for 6 columns */
.events-page .image-column {
    flex: 0 0 90px;
    padding: 0.5rem;
    border-right: 1px solid #eee;
}

.events-page .event-info-column {
    flex: 0 0 30%; /* Reduced slightly to make room for cost */
    min-width: 220px;
}

.events-page .time-column {
    flex: 0 0 130px;
    justify-content: center;
    text-align: center;
}

.events-page .location-column {
    flex: 1;
    min-width: 140px;
    justify-content: center;
    text-align: center;
}

.events-page .organizer-column {
    flex: 1;
    min-width: 140px;
    justify-content: center;
    text-align: center;
}

.events-page .cost-column {
    flex: 0 0 100px; /* Fixed width for cost */
    justify-content: center;
    text-align: center;
}

.events-page .event-image-container {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 4px;
}

.events-page .event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.events-page .event-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 0.5rem;
}

.events-page .event-name {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    color: #333;
    line-height: 1.3;
}

.events-page .event-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Date & Time styling */
.events-page .event-datetime {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.events-page .event-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.events-page .event-time {
    font-size: 0.9rem;
    color: #666;
}

.events-page .event-location,
.events-page .event-organizer {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.3;
}

/* Cost styling */
.events-page .event-cost {
    font-size: 1rem;
    font-weight: bold;
    color: var(--pop-green3); /* Theme green for emphasis */
}

.events-page .action-column {
    flex: 0 0 110px; /* Fixed width for register button */
    justify-content: center;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .events-page .event-info-column {
        flex: 0 0 28%;
        min-width: 200px;
    }
    
    .events-page .location-column,
    .events-page .organizer-column {
        min-width: 120px;
    }
}

@media (max-width: 992px) {
    .events-page .event-column {
        font-size: 0.85rem;
    }
    
    .events-page .event-name {
        font-size: 0.95rem;
    }
    
    .events-page .event-description {
        font-size: 0.8rem;
    }
    
    .events-page .event-cost {
        font-size: 0.9rem;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .events-page .event-header {
        display: none;
    }
    
    .events-page .event-table {
        border: none;
        box-shadow: none;
        background: transparent;
    }
    
    .events-page .event-row {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        min-height: auto;
    }
    
    .events-page .event-row > * {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 0.75rem 0;
    }
    
    .events-page .event-row > *:last-child {
        border-bottom: none;
    }
    
    .events-page .image-column {
        flex: none;
        display: flex;
        justify-content: center;
        padding: 0 0 0.75rem 0;
    }
    
    .events-page .event-info-column {
        flex: none;
        min-width: auto;
    }
    
    .events-page .time-column,
    .events-page .location-column,
    .events-page .organizer-column,
    .events-page .cost-column {
        flex: none;
        text-align: left;
        justify-content: flex-start;
    }
    
    .events-page .event-datetime {
        align-items: flex-start;
    }
    
    /* Make cost stand out on mobile */
    .events-page .cost-column {
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 2px solid var(--pop-green3);
    }
    
    .events-page .event-cost {
        font-size: 1.1rem;
    }
}

/* ======================================== */
/* Select Store Page Specific Styles        */
/* ======================================== */

.stores-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1rem; /* Adjusted margin */
    text-align: left; /* Override centered */
}

.stores-page .stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2rem;
    margin-top: 1rem;
    padding: 0 0 2rem 0; /* Use container padding, add bottom padding */
}

.stores-page .store-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem; /* Adjusted padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between; /* Pushes title up, actions down */
    min-height: 150px; /* Give cards a minimum height */
}

.stores-page .store-title {
    font-size: 1.25rem;
    color: var(--pop-dark-gray);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.stores-page .store-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem; /* Use margin instead of auto for consistency */
}

/* Alert Message */
.stores-page .custom-alert {
    background-color: #fff3cd; /* Bootstrap warning background */
    border-left: 4px solid #ffeeba; /* Bootstrap warning border */
    color: #856404; /* Bootstrap warning text */
    padding: 1rem;
    margin-top: 1.5rem; /* Add top margin */
    margin-bottom: 2rem;
    border-radius: 4px;
}

.stores-page .custom-alert p {
    margin: 0;
}

/* Button Styles (Reusing .event-btn as base) */
.stores-page .event-btn {
    padding: 10px 24px; /* Consistent padding */
    font-size: 1rem; /* Consistent font size */
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    min-width: 180px; /* Consistent min width */
    font-weight: 600;
    cursor: pointer;
}

.stores-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
    text-decoration: none;
}

/* Active state for selected store button */
.stores-page .event-btn.active {
    background-color: var(--pop-green3);
    color: var(--pop-white);
    border-color: var(--pop-green3);
}

/* Disabled state for other stores when cart has items */
.stores-page .event-btn.disabled {
    border-color: #6c757d; /* Muted border */
    color: #6c757d; /* Muted text */
    opacity: 0.65;
    cursor: not-allowed;
    background-color: transparent; /* Ensure no background on disabled */
}
.stores-page .event-btn.disabled:hover {
    background-color: transparent; /* No hover effect */
    color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .stores-page .stores-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    .stores-page .store-card {
        padding: 1.5rem;
    }

    .stores-page .event-btn {
        width: 100%; /* Full width buttons */
    }
}

/* Removed navbar overrides as they are global now */

/* ======================================== */
/* Product Categories Page Specific Styles  */
/* ======================================== */

.product-categories-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1rem; /* Adjusted */
    text-align: left; /* Override centered */
}

.product-categories-page .categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly smaller min */
    gap: 1.5rem; /* Slightly smaller gap */
    margin-top: 1.5rem; /* Consistent top margin */
    padding: 0 0 2rem 0; /* Remove horizontal, add bottom */
}

.product-categories-page .category-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Slightly lighter shadow */
    padding: 1.5rem; /* Adjusted padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between; /* Space title and button */
    min-height: 130px; /* Adjusted min height */
}

/* Removed .card-body override as it might conflict */

.product-categories-page .category-title {
    font-size: 1.1rem; /* Adjusted size */
    color: var(--pop-dark-gray);
    margin-bottom: 1rem; /* Adjusted margin */
    font-weight: 600; /* Slightly less bold */
    flex-grow: 1; /* Allow title to take space */
}

.product-categories-page .category-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem; /* Ensure space above button */
}

/* Reusing .event-btn style */
.product-categories-page .event-btn {
    padding: 10px 24px;
    font-size: 0.95rem; /* Slightly smaller button text */
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    min-width: 150px; /* Adjusted min width */
    font-weight: 600;
}
.product-categories-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}

/* Removed navbar overrides */
/* Removed footer-spacing */

/* Responsive */
@media (max-width: 768px) {
    .product-categories-page .categories-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .product-categories-page .category-card {
        padding: 1.5rem;
        min-height: auto; /* Remove min height */
    }
    .product-categories-page .event-btn {
        width: 100%; /* Full width button */
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) { /* Adjust breakpoint if needed */
     .profile-page .profile-grid {
        grid-template-columns: 1fr; /* Stack columns */
    }
}

@media (max-width: 768px) {
    .profile-page .info-card {
        padding: 1.5rem; /* Less padding */
    }

     .profile-page .card-title {
        font-size: 1.3rem;
    }

    .profile-page .event-btn {
        width: 100%; /* Full width buttons */
        min-width: unset;
    }

    .profile-page .form-row {
        grid-template-columns: 1fr; /* Stack city/state/zip */
    }
}

/* ======================================== */
/* MTG Sets Page Specific Styles            */
/* ======================================== */

.mtg-sets-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1rem; /* Adjusted */
    text-align: left; /* Override centered */
}

.mtg-sets-page .sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Match category grid */
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 0 0 2rem 0;
}

.mtg-sets-page .set-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    min-height: 130px; /* Match category card */
}

.mtg-sets-page .set-title {
    font-size: 1.1rem; /* Match category title */
    color: var(--pop-dark-gray);
    margin-bottom: 1rem;
    font-weight: 600;
    flex-grow: 1;
}

.mtg-sets-page .set-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
}

/* Reusing .event-btn style */
.mtg-sets-page .event-btn {
    padding: 10px 24px;
    font-size: 0.95rem;
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    min-width: 150px;
    font-weight: 600;
}
.mtg-sets-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}

.mtg-sets-page .back-button-container {
    display: flex;
    justify-content: center; /* Center the back button */
    margin-top: 2rem;
    padding: 0 0 2rem 0; /* Add bottom padding */
}

/* Removed navbar overrides */
/* Removed card-body override */
/* Removed footer-spacing */

/* Responsive */
@media (max-width: 768px) {
    .mtg-sets-page .sets-grid {
        grid-template-columns: 1fr; /* Stack */
    }
    .mtg-sets-page .set-card {
        padding: 1.5rem;
        min-height: auto;
    }
    .mtg-sets-page .event-btn {
        width: 100%;
    }
}

/* ======================================== */
/* MTG Products Page Specific Styles        */
/* ======================================== */

.mtg-products-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Override centered */
}

/* Table Styles */
.mtg-products-page .table-responsive {
    margin: 0; /* Use container padding */
    border-radius: 8px; /* Rounded corners for table container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    background-color: var(--pop-white);
    overflow: hidden; /* Clip table for border-radius */
    border: 1px solid #dee2e6; /* Add border to container */
}

.mtg-products-page .custom-table {
    margin-bottom: 0; /* Remove default table margin */
}

.mtg-products-page .custom-table thead th {
    background-color: var(--pop-light-gray);
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem 1rem; /* Adjusted padding */
    font-weight: 600;
    color: #495057; /* Slightly darker header text */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevent header text wrapping */
}

.mtg-products-page .custom-table tbody td {
    padding: 0.75rem 1rem; /* Consistent padding */
    vertical-align: middle; /* Align content vertically */
    font-size: 0.95rem;
    border-top: 1px solid #eee; /* Lighter row separator */
}
.mtg-products-page .custom-table tbody tr:first-child td {
    border-top: none; /* No top border on first data row */
}

.mtg-products-page .custom-table tbody tr:hover {
    background-color: rgba(102, 180, 34, 0.05); /* Subtle green hover */
}

/* Card Image Cell */
.mtg-products-page .card-image-cell {
    width: 90px; /* Fixed width */
    padding: 0.5rem !important;
}

.mtg-products-page .card-thumbnail {
    width: 70px; /* Smaller thumbnail */
    height: auto;
    border-radius: 4px;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid #eee;
}
.mtg-products-page .card-thumbnail:hover {
    transform: scale(1.1); /* Slightly larger hover scale */
}

.mtg-products-page .no-image {
    width: 70px; /* Match thumbnail */
    height: 98px; /* Maintain ~ aspect ratio */
    background-color: var(--pop-light-gray);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
    border: 1px solid #dee2e6;
}

/* Quantity Input Styles */
.mtg-products-page .quantity-control {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center; /* Center items within the cell */
}

.mtg-products-page .quantity-input {
    width: 60px;
    padding: 0.3rem 0.5rem; /* Smaller padding */
    border: 1px solid #ced4da;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
}
/* Hide spinner buttons on number input (optional) */
.mtg-products-page input[type=number]::-webkit-inner-spin-button,
.mtg-products-page input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mtg-products-page input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}


/* Button Styles */
/* Using smaller button style */
.mtg-products-page .event-btn-small {
    padding: 6px 14px;
    font-size: 0.85rem; /* Slightly smaller */
    border: 2px solid var(--pop-green3);
    border-radius: 20px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    min-width: 80px; /* Adjusted min-width */
    cursor: pointer;
}
.mtg-products-page .event-btn-small:hover:not(:disabled) { /* Add :not(:disabled) */
    background-color: var(--pop-green3);
    color: var(--pop-white);
}

/* Disabled button state */
.mtg-products-page .event-btn-small.disabled {
    border-color: #6c757d;
    background-color: #6c757d; /* Darker background for disabled */
    color: var(--pop-white);
    opacity: 0.65; /* Keep opacity */
    cursor: not-allowed;
}
.mtg-products-page .event-btn-small.disabled:hover {
    border-color: #6c757d; /* No hover change */
    background-color: #6c757d;
    color: var(--pop-white);
}

/* Back button */
.mtg-products-page .back-button-container {
    display: flex;
    justify-content: center; /* Center button */
    margin-top: 2rem;
    padding: 0 0 2rem 0;
}
/* Reusing larger event-btn style for back button */
.mtg-products-page .back-button-container .event-btn {
     padding: 12px 28px;
     font-size: 1.1rem;
     min-width: 220px;
}

/* Responsive Table Adjustments */
@media (max-width: 992px) {
     /* Consider hiding less important columns */
    .mtg-products-page .custom-table th:nth-child(4), /* TCG Game Type */
    .mtg-products-page .custom-table td:nth-child(4) {
        /* display: none; */ /* Example: hide TCG type */
    }
}
@media (max-width: 768px) {
    .mtg-products-page .card-image-cell { width: 60px; }
    .mtg-products-page .card-thumbnail { width: 50px; }
    .mtg-products-page .no-image { width: 50px; height: 70px; font-size: 0.7rem; }
    .mtg-products-page .custom-table thead {
        /* display: none; /* Hide header on small screens? Or keep */
    }
     .mtg-products-page .custom-table tbody tr {
       /* display: block; /* Stack table rows? Requires more CSS changes */
       /* margin-bottom: 1rem; */
       /* border: 1px solid #eee; */
    }
     .mtg-products-page .custom-table tbody td {
        /* display: block; */
        /* text-align: right; */
        /* padding-left: 50%; */
        /* position: relative; */
        /* border-top: none; */
    }
    .mtg-products-page .custom-table tbody td::before {
        /* content: attr(data-label); */ /* Add labels using data attributes */
        /* position: absolute; */
        /* left: 10px; */
        /* width: calc(50% - 20px); */
        /* padding-right: 10px; */
        /* white-space: nowrap; */
        /* text-align: left; */
        /* font-weight: bold; */
    }
    .mtg-products-page .quantity-control {
        flex-direction: row; /* Keep row layout */
        justify-content: flex-start;
    }
     .mtg-products-page .back-button-container .event-btn {
        width: 100%; /* Full width back button */
    }
}

/* ======================================== */
/* Comic Volumes Page Specific Styles       */
/* ======================================== */

.comic-volumes-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Override centered */
}

/* Search Input */
.comic-volumes-page .search-container {
   margin: 0 0 2rem 0; /* Use container padding, add bottom margin */
   position: relative; /* For loading indicator */
}
.comic-volumes-page .search-input {
   width: 100%;
   padding: 0.9rem 1.5rem; /* Adjust padding */
   border: 2px solid #ccc; /* Standard border */
   border-radius: 30px;
   font-size: 1.1rem;
   color: var(--pop-dark-gray);
   outline: none;
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.comic-volumes-page .search-input:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 3px rgba(102, 180, 34, 0.2);
}
.comic-volumes-page .search-input::placeholder {
   color: #aaa;
}

/* Basic Loading Spinner */
.comic-volumes-page .search-loading {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hidden by default */
}
.comic-volumes-page .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-left-color: var(--pop-green3);
    animation: spin 1s ease infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.comic-volumes-page .volumes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Slightly smaller min */
    gap: 1.5rem;
    /* padding: 1rem; /* Use container padding */
}

.comic-volumes-page .volume-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex; /* Use flex for layout */
    flex-direction: column; /* Stack elements vertically */
    border: 1px solid #eee;
}

.comic-volumes-page .card-body {
    padding: 1rem; /* Consistent padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow body to grow */
}

.comic-volumes-page .volume-image {
    width: 100%;
    margin-bottom: 1rem;
    aspect-ratio: 2 / 3; /* Maintain comic aspect ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Lighter background */
    border-radius: 4px; /* Slightly rounded image container */
    overflow: hidden;
}

.comic-volumes-page .volume-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area */
    display: block;
}

.comic-volumes-page .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.9rem;
    text-align: center;
}

.comic-volumes-page .volume-title {
    font-size: 1.15rem; /* Adjusted size */
    font-weight: 600; /* Slightly less bold */
    color: var(--pop-dark-gray);
    margin-bottom: 0.75rem; /* Adjusted margin */
    line-height: 1.3;
    text-align: center;
}

.comic-volumes-page .volume-info {
    margin-bottom: 1rem; /* Adjusted margin */
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}

.comic-volumes-page .volume-info p {
    margin: 0.25rem 0; /* Tighter spacing */
}

.comic-volumes-page .volume-actions {
    margin-top: auto; /* Push button to bottom */
    width: 100%; /* Make container full width */
    padding-top: 0.5rem; /* Space above button */
}

/* Reusing .event-btn */
.comic-volumes-page .event-btn {
    padding: 10px 24px;
    font-size: 0.95rem;
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: block; /* Make button block level */
    width: 100%; /* Full width */
    font-weight: 600;
}
.comic-volumes-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}

/* Pagination (Hide for now as we omit functionality) */
.comic-volumes-page .pagination-container {
    display: none; /* Hide pagination */
    margin: 2rem 0;
    /* Add original pagination styles here if re-implementing */
}

.comic-volumes-page .back-button-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 0 0 2rem 0;
}
.comic-volumes-page .back-button-container .event-btn {
     width: auto; /* Allow back button to size naturally */
     min-width: 220px;
     display: inline-block; /* Override block from general .event-btn */
     padding: 12px 28px;
     font-size: 1.1rem;
}

/* No Results message style */
.comic-volumes-page .no-results {
    grid-column: 1 / -1; /* Span all grid columns */
    text-align: center;
    padding: 3rem 1rem;
    color: #555;
}
.comic-volumes-page .no-results h3 {
    color: #555;
    font-weight: normal;
}


/* Responsive */
@media (max-width: 768px) {
    .comic-volumes-page .volumes-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjust min size */
        gap: 1rem;
    }
    .comic-volumes-page .volume-card {
        /* No specific changes needed, relies on grid */
    }
     .comic-volumes-page .back-button-container .event-btn {
        width: 100%; /* Full width back button */
    }
}
@media (max-width: 480px) {
     .comic-volumes-page .volumes-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Smaller min size */
    }
     .comic-volumes-page .card-body {
         padding: 0.75rem;
     }
      .comic-volumes-page .volume-title {
        font-size: 1rem;
    }
}

/* ======================================== */
/* Comic Issues Page Specific Styles        */
/* ======================================== */

/* Reusing product table styles where possible */
.comic-issues-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1rem; /* Reduced margin */
    text-align: left;
}

/* Jump to Issue Styles */
.comic-issues-page .jump-to-issue {
    margin: 0 0 1.5rem 0; /* Margin below heading, before table */
    display: flex;
    gap: 0.5rem; /* Space between input and button */
    align-items: center;
    padding: 0 1rem; /* Align with table padding */
}
.comic-issues-page .issue-input {
    padding: 0.4rem 0.8rem;
    border: 1px solid #ccc; /* Standard border */
    border-radius: 20px; /* Rounded pill shape */
    font-size: 0.95rem;
    width: 150px; /* Fixed width */
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.comic-issues-page .issue-input:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 2px rgba(102, 180, 34, 0.2);
}
/* Reusing .event-btn-small for the Go button */
.comic-issues-page .jump-to-issue .event-btn-small {
     min-width: 60px; /* Smaller min-width */
     padding: 6px 12px; /* Adjust padding */
}

/* Reusing table styles from .mtg-products-page */
.comic-issues-page .table-responsive { margin: 0 1rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); background-color: var(--pop-white); overflow: hidden; border: 1px solid #dee2e6; }
.comic-issues-page .custom-table { margin-bottom: 0; }
.comic-issues-page .custom-table thead th { background-color: var(--pop-light-gray); border-bottom: 2px solid #dee2e6; padding: 0.75rem 1rem; font-weight: 600; color: #495057; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.comic-issues-page .custom-table tbody td { padding: 0.75rem 1rem; vertical-align: middle; font-size: 0.95rem; border-top: 1px solid #eee; }
.comic-issues-page .custom-table tbody tr:first-child td { border-top: none; }
.comic-issues-page .custom-table tbody tr:hover { background-color: rgba(102, 180, 34, 0.05); }
.comic-issues-page .card-image-cell { width: 90px; padding: 0.5rem !important; }
.comic-issues-page .card-thumbnail { width: 70px; height: auto; border-radius: 4px; display: block; cursor: pointer; transition: transform 0.2s ease; border: 1px solid #eee; }
.comic-issues-page .card-thumbnail:hover { transform: scale(1.1); }
.comic-issues-page .no-image { width: 70px; height: 98px; background-color: var(--pop-light-gray); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #6c757d; text-align: center; border: 1px solid #dee2e6; }
.comic-issues-page .quantity-control { display: flex; gap: 0.5rem; align-items: center; justify-content: center; }
.comic-issues-page .quantity-input { width: 60px; padding: 0.3rem 0.5rem; border: 1px solid #ced4da; border-radius: 4px; text-align: center; font-size: 0.9rem; }
.comic-issues-page input[type=number]::-webkit-inner-spin-button,
.comic-issues-page input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.comic-issues-page input[type=number] { -moz-appearance: textfield; }
.comic-issues-page .event-btn-small { padding: 6px 14px; font-size: 0.85rem; border: 2px solid var(--pop-green3); border-radius: 20px; color: var(--pop-green3); text-decoration: none; transition: all 0.3s ease; background-color: transparent; text-align: center; display: inline-block; font-weight: 600; min-width: 80px; cursor: pointer; }
.comic-issues-page .event-btn-small:hover:not(:disabled) { background-color: var(--pop-green3); color: var(--pop-white); }
.comic-issues-page .event-btn-small.disabled { border-color: #6c757d; background-color: #6c757d; color: var(--pop-white); opacity: 0.65; cursor: not-allowed; }
.comic-issues-page .event-btn-small.disabled:hover { border-color: #6c757d; background-color: #6c757d; color: var(--pop-white); }
.comic-issues-page .back-button-container { display: flex; justify-content: center; margin-top: 2rem; padding: 0 0 2rem 0; }
.comic-issues-page .back-button-container .event-btn { width: auto; min-width: 220px; display: inline-block; padding: 12px 28px; font-size: 1.1rem; }

/* Responsive */
@media (max-width: 992px) {
    .comic-issues-page .custom-table th:nth-child(4), /* Variant */
    .comic-issues-page .custom-table td:nth-child(4),
    .comic-issues-page .custom-table th:nth-child(5), /* Publisher */
    .comic-issues-page .custom-table td:nth-child(5) {
         /* display: none; /* Hide columns on smaller screens */
    }
}
@media (max-width: 768px) {
    .comic-issues-page .card-image-cell { width: 60px; }
    .comic-issues-page .card-thumbnail { width: 50px; }
    .comic-issues-page .no-image { width: 50px; height: 70px; font-size: 0.7rem; }
    .comic-issues-page .jump-to-issue { margin-left: 0; margin-right: 0; }
    .comic-issues-page .table-responsive { margin: 0; }
     .comic-issues-page .back-button-container .event-btn { width: 100%; }
}

/* ======================================== */
/* Cart Page Specific Styles                */
/* ======================================== */

.cart-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Override centered default */
}

/* Store Info Card */
.cart-page .store-info-card {
    background-color: #e9ecef; /* Light grey background */
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #ced4da;
}
.cart-page .store-info-title {
    color: var(--pop-dark-gray);
    margin: 0;
    font-size: 1.1rem; /* Adjusted size */
    font-weight: 500; /* Normal weight */
}
.cart-page .store-info-title strong {
    font-weight: 700; /* Bold store name */
}


/* Alert Messages */
.cart-page .cart-alerts {
    margin-bottom: 1.5rem;
}
.cart-page .alert.custom-alert { /* General alert styling */
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border-left-width: 4px;
    border-left-style: solid;
}
.cart-page .alert-danger, /* Stock/Availability Error */
.cart-page .alert.custom-alert { /* Default style from blade if session('error') */
    background-color: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}
.cart-page .alert-warning { /* e.g., Low stock warning */
    background-color: #fff3cd;
    border-left-color: #ffeeba;
    color: #856404;
}
.cart-page .alert-info { /* e.g., Price change */
    background-color: #cff4fc; /* Bootstrap info */
    border-left-color: #9eeaf9;
    color: #055160;
}


/* Reusing table styles from .mtg-products-page */
.cart-page .table-responsive { margin: 0; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); background-color: var(--pop-white); border: 1px solid #dee2e6; margin-bottom: 2rem; }
.cart-page .custom-table { margin-bottom: 0; }
.cart-page .custom-table thead th { background-color: var(--pop-light-gray); border-bottom: 2px solid #dee2e6; padding: 0.75rem 1rem; font-weight: 600; color: #495057; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; text-align: center; }
.cart-page .custom-table thead th:nth-child(2) { text-align: left; } /* Align Product Name Left */
.cart-page .custom-table tbody td { padding: 0.75rem 1rem; vertical-align: middle; font-size: 0.95rem; border-top: 1px solid #eee; text-align: center; }
.cart-page .custom-table tbody td:nth-child(2) { text-align: left; } /* Align Product Name Left */
.cart-page .custom-table tbody tr:first-child td { border-top: none; }
.cart-page .custom-table tbody tr:hover { background-color: rgba(102, 180, 34, 0.05); }
.cart-page .card-image-cell { width: 90px; padding: 0.5rem !important; }
.cart-page .card-thumbnail { width: 70px; height: auto; border-radius: 4px; display: block; cursor: pointer; transition: transform 0.2s ease; border: 1px solid #eee; margin: 0 auto; }
.cart-page .card-thumbnail:hover { transform: scale(1.1); }
.cart-page .no-image { width: 70px; height: 98px; background-color: var(--pop-light-gray); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #6c757d; text-align: center; border: 1px solid #dee2e6; margin: 0 auto; }

/* Table Footer */
.cart-page .custom-table tfoot td {
    padding: 1rem;
    background-color: var(--pop-light-gray);
    border-top: 2px solid #dee2e6;
    font-size: 1.1rem;
}
.cart-page .custom-table tfoot strong {
     font-weight: 700;
}
.cart-page .text-end {
    text-align: right !important;
}


/* Quantity Control & Buttons */
.cart-page .quantity-control { display: flex; gap: 0.5rem; align-items: center; justify-content: center; /* Center quantity control */ }
.cart-page .quantity-input { width: 60px; padding: 0.3rem 0.5rem; border: 1px solid #ced4da; border-radius: 4px; text-align: center; font-size: 0.9rem; }
.cart-page input[type=number]::-webkit-inner-spin-button,
.cart-page input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-page input[type=number] { -moz-appearance: textfield; }
.cart-page .event-btn-small { padding: 6px 14px; font-size: 0.85rem; border: 2px solid var(--pop-green3); border-radius: 20px; color: var(--pop-green3); text-decoration: none; transition: all 0.3s ease; background-color: transparent; text-align: center; display: inline-block; font-weight: 600; min-width: 80px; cursor: pointer; }
.cart-page .event-btn-small:hover:not(:disabled) { background-color: var(--pop-green3); color: var(--pop-white); }
.cart-page .event-btn-small.disabled { border-color: #6c757d; background-color: #6c757d; color: var(--pop-white); opacity: 0.65; cursor: not-allowed; }
.cart-page .event-btn-small.disabled:hover { border-color: #6c757d; background-color: #6c757d; color: var(--pop-white); }

/* Remove Button Specific Style */
.cart-page .remove-btn {
    border-color: #dc3545;
    color: #dc3545;
    background-color: transparent;
}
.cart-page .remove-btn:hover {
    background-color: #dc3545;
    color: var(--pop-white);
    border-color: #dc3545;
}

/* Cart Actions Below Table */
.cart-page .cart-actions {
    display: flex;
    justify-content: space-between; /* Space out buttons */
    align-items: center;
    padding: 0; /* Use container padding */
    margin-top: 2rem;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 1rem; /* Space when wrapped */
}
/* Reusing larger .event-btn for action buttons */
.cart-page .cart-actions .event-btn {
     padding: 12px 28px;
     font-size: 1.1rem;
     min-width: 200px; /* Adjust width */
     flex-grow: 1; /* Allow buttons to grow */
     flex-basis: 200px; /* Minimum basis */
}
.cart-page .checkout-btn {
    background-color: var(--pop-green3);
    color: var(--pop-white);
    border-color: var(--pop-green3);
}
.cart-page .checkout-btn:hover {
    background-color: var(--pop-green); /* Slightly lighter green */
    border-color: var(--pop-green);
    color: var(--pop-white);
}

/* Empty Cart Message */
.cart-page .empty-cart-message {
    text-align: center;
    padding: 3rem 1rem;
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}
.cart-page .empty-cart-message p {
    font-size: 1.2rem;
    color: var(--pop-dark-gray);
    margin-bottom: 1.5rem;
}
.cart-page .empty-cart-message .event-btn {
    width: auto; /* Don't make button full width */
    min-width: 220px;
}

/* Responsive */
@media (max-width: 768px) {
    .cart-page .cart-actions { flex-direction: column; gap: 1rem; }
    .cart-page .cart-actions .event-btn { width: 100%; }
    .cart-page .table-responsive { margin: 0; }
    /* Add specific styles to hide columns on mobile if needed */
     .cart-page .custom-table thead th:nth-child(3), /* Category */
     .cart-page .custom-table tbody td:nth-child(3),
     .cart-page .custom-table thead th:nth-child(6), /* Available */
     .cart-page .custom-table tbody td:nth-child(6) {
          /* display: none; */
     }
}

/* ======================================== */
/* Contact Page Specific Styles             */
/* ======================================== */

.contact-page .main-heading {
    padding-top: 31px;
    padding-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--pop-dark-gray);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left; /* Override centered */
}

/* Reusing .info-card style from profile */
.contact-page .info-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
    /* max-width handled by col-md-8 */
}

/* Form Styles - using Bootstrap classes mainly */
.contact-page .form-label {
    color: var(--pop-dark-gray);
    font-weight: 600;
    margin-bottom: 0.5rem; /* Add standard margin */
}

.contact-page .form-control { /* Bootstrap class */
    border-radius: 8px;
    border: 1px solid #dee2e6; /* Standard border */
    padding: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.contact-page .form-control:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25); /* Focus ring */
    outline: none;
}

/* Bootstrap validation classes */
.contact-page .form-control.is-invalid {
     border-color: #dc3545; /* Error color */
}
.contact-page .form-control.is-invalid:focus {
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Error focus ring */
}
.contact-page .invalid-feedback { /* Bootstrap class */
    display: block; /* Make sure it shows */
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Alert Styles */
.contact-page .alert { /* Bootstrap class */
    border-radius: 8px;
    margin-bottom: 2rem;
    padding: 1rem; /* Add padding */
}
.contact-page .alert-success { /* Bootstrap class */
    background-color: #d1fae5;
    border-color: #a3e9a4; /* Adjusted border */
    color: #0d6efd; /* Bootstrap success text */
    color: #0a3622; /* Darker green text */
}
.contact-page .alert-danger { /* For potential server errors */
     background-color: #f8d7da;
     border-color: #f5c2c7;
     color: #842029;
}


/* Button Styles */
.contact-page .event-btn { /* Reusing main site button style */
    padding: 10px 24px;
    font-size: 1rem;
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    min-width: 180px;
    font-weight: 600;
    cursor: pointer;
}
.contact-page .event-btn:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}

/* Center button */
.contact-page .text-center {
    text-align: center !important;
}

/* Responsive */
@media (max-width: 768px) {
     .contact-page .info-card {
        padding: 1.5rem;
    }
     .contact-page .event-btn {
         width: 100%; /* Full width button */
     }
}

/* ======================================== */
/* Register Page Specific Styles            */
/* ======================================== */

.register-page .register-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.register-page .register-card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    width: 100%;
    max-width: 650px; /* Slightly wider card for more fields */
}

.register-page .register-title {
    color: var(--pop-dark-gray);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Reusing form styles */
.register-page .form-group { margin-bottom: 1.5rem; }
.register-page .form-label { display: block; color: var(--pop-dark-gray); font-weight: 600; margin-bottom: 0.5rem; }
.register-page .form-input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #dee2e6; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; box-sizing: border-box; }
.register-page .form-input:focus { outline: none; border-color: var(--pop-green3); box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25); }
.register-page select.form-input { cursor: pointer; }
.register-page .form-input.is-invalid { border-color: #dc3545; }
.register-page .form-input.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.register-page .error-message, /* Using profile/login error style */
.register-page .invalid-feedback { /* For Bootstrap compatibility */
    display: block; width: 100%; color: #dc3545; font-size: 0.875rem; margin-top: 0.5rem;
}

/* Address form row */
.register-page .form-row { /* Reusing profile style */
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    gap: 1rem;
    align-items: end;
}

/* Security Questions Section */
.register-page .security-questions-section {
    background-color: var(--pop-light-gray);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 1px solid #eee;
}
.register-page .section-title {
    color: var(--pop-dark-gray);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
}
/* Reduce bottom margin for last form group in section */
.register-page .security-questions-section .form-group:last-child {
    margin-bottom: 0;
}


/* Register Button */
.register-page .register-btn { /* Specific class or reuse .event-btn */
    width: 100%;
    background-color: var(--pop-green3);
    color: var(--pop-white);
    /* Reusing .event-btn properties */
    padding: 12px 28px;
    font-size: 1.1rem;
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
}
.register-page .register-btn:hover {
    background-color: transparent;
    color: var(--pop-green3);
    border-color: var(--pop-green3);
}

/* Login Link */
.register-page .login-link { /* Reusing login style */
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}
.register-page .login-link p { color: var(--pop-dark-gray); margin: 0; font-size: 0.95rem; }
.register-page .login-link a { color: var(--pop-green3); text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
.register-page .login-link a:hover { color: var(--pop-dark-gray); text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
    .register-page .register-card { padding: 1.5rem; max-width: 95%; }
    .register-page .register-title { font-size: 1.5rem; }
    .register-page .security-questions-section { padding: 1rem; }
    .register-page .form-row { grid-template-columns: 1fr; }
}

/* ======================================== */
/* Forgot Password Page Specific Styles     */
/* ======================================== */

.forgot-password-page .card { /* Bootstrap class styling */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 3rem; /* Same as login */
    margin-bottom: 3rem;
}
.forgot-password-page .card-header { /* Bootstrap class */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 1rem 1.5rem;
    font-weight: 600;
}
.forgot-password-page .card-header.bg-primary { /* Bootstrap class */
     background-color: var(--pop-green3) !important; /* Use theme color */
     border-color: var(--pop-green3) !important;
}
.forgot-password-page .card-body { /* Bootstrap class */
    padding: 2rem;
}

/* Reusing form styles from login/register */
.forgot-password-page .form-label { display: block; color: var(--pop-dark-gray); font-weight: 600; margin-bottom: 0.5rem; }
.forgot-password-page .form-control { /* Bootstrap class */
    width: 100%; padding: 0.75rem 1rem; border: 1px solid #dee2e6; /* Adjusted border */
    border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box;
}
.forgot-password-page .form-control:focus { outline: none; border-color: var(--pop-green3); box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25); }
.forgot-password-page .form-control.is-invalid { border-color: #dc3545; }
.forgot-password-page .form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.forgot-password-page .invalid-feedback { /* Bootstrap class */
    display: block; width: 100%; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem;
}

/* Alert Styles for errors */
.forgot-password-page .alert { /* Bootstrap class */
    border-radius: 8px;
    margin-bottom: 1.5rem; /* Consistent margin */
    padding: 1rem;
}
.forgot-password-page .alert-danger { /* Bootstrap class */
    background-color: #f8d7da; border-color: #f5c2c7; color: #842029;
}
.forgot-password-page .alert-info { /* Bootstrap class for instructions */
    background-color: #cff4fc; border-color: #9eeaf9; color: #055160;
}

/* Button Styling */
.forgot-password-page .btn-primary { /* Bootstrap class */
    background-color: var(--pop-green3);
    border-color: var(--pop-green3);
    color: var(--pop-white);
    padding: 0.5rem 1rem; /* Standard Bootstrap button padding */
    border-radius: 0.25rem; /* Standard Bootstrap radius */
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.forgot-password-page .btn-primary:hover {
    background-color: var(--pop-green); /* Lighter green */
    border-color: var(--pop-green);
}

/* ======================================== */
/* Admin Login Page Specific Styles         */
/* ======================================== */

.admin-login-page .container {
    /* padding-top: 31px; /* Handled by header or page structure */
    padding-bottom: 2rem;
}

/* Styling for the card containing the form */
.admin-login-page .card {
    background-color: var(--pop-white);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border: 1px solid #eee; /* Light border */
    margin-top: 3rem; /* Space from top */
}

.admin-login-page .card-header {
    background-color: transparent; /* No specific background for header */
    border-bottom: 1px solid #eee; /* Light separator */
    font-size: 1.5rem; /* Adjusted size */
    font-weight: 600;
    color: var(--pop-dark-gray);
    padding: 1.25rem 1.5rem; /* Consistent padding */
    text-align: center;
}

.admin-login-page .card-body {
    padding: 2rem 2.5rem; /* More padding in body */
}

/* Reusing existing form styling from login/register where possible */
.admin-login-page .form-group { /* Bootstrap class */
    margin-bottom: 1.5rem;
}

.admin-login-page .col-form-label { /* Bootstrap class */
    font-weight: 600;
    color: var(--pop-dark-gray);
    padding-top: calc(0.375rem + 1px); /* Align with input */
}
.admin-login-page .text-md-right { /* Bootstrap class */
    text-align: right !important;
}
@media (max-width: 767.98px) { /* md breakpoint */
    .admin-login-page .text-md-right {
        text-align: left !important; /* Stack labels above inputs on mobile */
    }
}


.admin-login-page .form-control { /* Bootstrap class */
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.admin-login-page .form-control:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.25);
    outline: none;
}
.admin-login-page .form-control.is-invalid { border-color: #dc3545; }
.admin-login-page .form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.admin-login-page .invalid-feedback { display: block; color: #dc3545; font-size: 0.875em; margin-top: 0.25rem; }


/* Admin Login Button (using primary Bootstrap class potentially with overrides) */
.admin-login-page .btn-primary {
    padding: 0.6rem 1.5rem; /* Adjusted padding */
    font-size: 1rem; /* Standard size */
    border: 2px solid var(--pop-green3);
    border-radius: 30px;
    color: var(--pop-green3);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    font-weight: 600;
    min-width: 150px; /* Adjusted min width */
}
.admin-login-page .btn-primary:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}

/* Removed .footer-spacing, handled by container padding */

/* Card Preview Overlay styles (already added) */
/* ======================================== */
/* Utility Classes (Optional)             */
/* ======================================== */
/* Add any reusable utility classes here if needed */
/* e.g., .text-center { text-align: center; } */

/* ======================================== */
/* Admin Layout Specific Styles             */
/* ======================================== */

/* Apply to body when in admin section, or to a main admin wrapper div */
.admin-layout body { /* Or just .admin-layout if you wrap the whole admin page */
    background-color: #f1f1f1; /* Light grey background for admin area */
    /* Ensure flex for potential sticky footer in admin if needed, but sidebar might change this */
}

/* Admin Top Navbar */
.admin-layout .navbar.admin-top-nav { /* Specific class for admin top nav */
    min-height: 71px; /* Match site nav */
    /* background-color: var(--pop-dark-gray) !important; /* Already bg-dark */
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional shadow */
}
.admin-layout .navbar.admin-top-nav .navbar-brand {
    color: var(--pop-white) !important;
    font-weight: 600;
}
.admin-layout .navbar.admin-top-nav .nav-link[href*="logout.php"] { /* Target logout link */
    color: rgba(255,255,255,0.75) !important; /* Lighter logout text */
    transition: all 0.3s ease;
}
.admin-layout .navbar.admin-top-nav .nav-link[href*="logout.php"]:hover {
    color: var(--pop-green3) !important; /* Theme green on hover */
}

/* Admin Sidebar */
.admin-layout #admin-sidebar { /* Use specific ID for admin sidebar */
    min-height: calc(100vh - 71px); /* Full height minus navbar */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Right shadow */
    background-color: var(--pop-white) !important;
    padding-top: 1rem;
    position: fixed; /* Keep sidebar fixed */
    top: 71px; /* Position below navbar */
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind navbar but above content */
    overflow-y: auto; /* Scrollable if content exceeds height */
}
/* Adjust main content to account for fixed sidebar */
.admin-layout main.admin-main-content {
    padding-top: 1.5rem; /* pt-3 from blade */
    padding-bottom: 2rem;
    margin-left: 250px; /* Adjust based on col-md-3/col-lg-2 width */
    /* Assuming sidebar width: col-md-3 is 25%, col-lg-2 is ~16.66% */
    /* For col-lg-2: 2 / 12 * 100% ~ 16.67% */
    /* For simplicity, using fixed width and media queries */
}
@media (min-width: 992px) { /* lg breakpoint */
    .admin-layout main.admin-main-content {
        margin-left: calc(100% * (2/12) + 30px); /* col-lg-2 width + some padding */
    }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* md breakpoint */
     .admin-layout main.admin-main-content {
        margin-left: calc(100% * (3/12) + 30px); /* col-md-3 width + some padding */
    }
     .admin-layout #admin-sidebar {
         width: calc(100% * (3/12));
     }
}
@media (max-width: 767.98px) { /* Below md, sidebar might be off-canvas */
     .admin-layout #admin-sidebar {
        /* Implement off-canvas toggle for mobile if needed */
        /* For now, let's assume it's hidden or stacked differently */
        position: static;
        min-height: auto;
        width: 100%;
    }
    .admin-layout main.admin-main-content {
        margin-left: 0;
    }
}


.admin-layout #admin-sidebar .nav-link {
    color: var(--pop-dark-gray);
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease;
    border-radius: 0; /* No rounding */
    font-weight: 500;
    display: flex; /* Align icon and text */
    align-items: center;
}
.admin-layout #admin-sidebar .nav-link:hover {
    color: var(--pop-green3);
    background-color: var(--pop-light-gray);
}
.admin-layout #admin-sidebar .nav-link.active {
    color: var(--pop-green3);
    background-color: var(--pop-light-gray);
    border-right: 3px solid var(--pop-green3); /* Active indicator */
    font-weight: bold;
}
.admin-layout #admin-sidebar .nav-link i.fas { /* Font Awesome icons */
    width: 24px; /* Fixed width for icon alignment */
    text-align: center;
    margin-right: 0.75rem; /* Space after icon */
    font-size: 0.9em; /* Slightly smaller icon */
}

/* Sidebar Section Headings */
.admin-layout #admin-sidebar .nav-heading {
    font-size: 0.7rem; /* Smaller heading */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6c757d; /* Muted color */
    padding: 1rem 1.25rem 0.5rem;
    font-weight: 600;
}
.admin-layout #admin-sidebar .nav-item + .nav-heading {
    margin-top: 1rem; /* Space above new group */
}
.admin-layout #admin-sidebar .nav-heading:not(:first-child) {
    border-top: 1px solid #f0f0f0; /* Lighter divider */
    margin-top: 1rem;
    padding-top: 1.5rem;
}

/* Admin Main Content Area Styling */
.admin-layout main.admin-main-content .pt-3 { padding-top: 1rem !important; } /* Bootstrap class override if needed */
.admin-layout main.admin-main-content .pb-2 { padding-bottom: 0.5rem !important; }
.admin-layout main.admin-main-content .mb-3 { margin-bottom: 1rem !important; }
.admin-layout main.admin-main-content .border-bottom { border-bottom: 1px solid #dee2e6 !important; }

/* Admin Dashboard Card Styling */
.admin-layout main.admin-main-content .card { /* General admin card */
    border: none;
    border-radius: 8px; /* Slightly less round */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem; /* Consistent spacing */
}
.admin-layout main.admin-main-content .card-title {
    color: var(--pop-dark-gray);
    font-weight: 600;
    font-size: 1.1rem; /* Slightly smaller card titles */
}
.admin-layout main.admin-main-content .card-text.display-4 { /* Bootstrap class */
    font-weight: 300; /* Lighter display font */
    color: var(--pop-green3); /* Theme color for stats */
}

/* Admin Headings */
.admin-layout main.admin-main-content .h2 {
    color: var(--pop-dark-gray);
    font-weight: 600; /* Less bold than main-heading */
    letter-spacing: -0.01em;
    font-size: 1.75rem;
}

/* Admin List Group */
.admin-layout main.admin-main-content .list-group-item { /* Bootstrap class */
    border: none;
    border-bottom: 1px solid var(--pop-light-gray);
    padding: 0.75rem 1rem; /* Adjusted padding */
    font-size: 0.95rem;
}
.admin-layout main.admin-main-content .list-group-item:last-child {
    border-bottom: none;
}
.admin-layout main.admin-main-content .list-group-item small.text-muted {
    font-size: 0.8rem;
}

/* ======================================== */
/* Admin Orders List Page Specific Styles   */
/* ======================================== */

.admin-orders-list-page .h2 { /* Main page title */
    font-size: 1.75rem;
    font-weight: 600;
}

/* Filter Card */
.admin-orders-list-page .card.mb-4 { /* Card for filters */
    border: 1px solid #eee;
    background-color: var(--pop-white);
}
.admin-orders-list-page .card-body {
    padding: 1.5rem;
}
.admin-orders-list-page .form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}
.admin-orders-list-page .form-control,
.admin-orders-list-page .form-select {
    font-size: 0.9rem;
    border-radius: 0.25rem; /* Standard Bootstrap radius */
    border: 1px solid #ced4da;
}
.admin-orders-list-page .form-control:focus,
.admin-orders-list-page .form-select:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.2);
}
.admin-orders-list-page .btn-primary,
.admin-orders-list-page .btn-secondary { /* Filter buttons */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 20px; /* Rounded buttons */
    font-weight: 500;
    transition: all 0.3s ease;
}
.admin-orders-list-page .btn-primary {
    border: 2px solid var(--pop-green3);
    color: var(--pop-green3);
    background-color: transparent;
}
.admin-orders-list-page .btn-primary:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}
.admin-orders-list-page .btn-secondary {
    border: 2px solid #6c757d;
    color: #6c757d;
    background-color: transparent;
}
.admin-orders-list-page .btn-secondary:hover {
    background-color: #6c757d;
    color: var(--pop-white);
}

/* Orders Table Card */
.admin-orders-list-page .card:not(.mb-4) { /* The main table card */
     border: 1px solid #eee;
}

.admin-orders-list-page .table-responsive {
    /* No extra margin needed if card-body has padding */
}

.admin-orders-list-page .table th {
    font-weight: 600;
    color: var(--pop-dark-gray);
    font-size: 0.85rem;
    text-transform: uppercase;
    background-color: #f8f9fa; /* Light header for table */
    border-bottom-width: 2px;
}
.admin-orders-list-page .table td {
    font-size: 0.9rem;
    vertical-align: middle;
}
.admin-orders-list-page .table-hover tbody tr:hover {
    background-color: rgba(102, 180, 34, 0.05); /* Subtle green hover */
}

.admin-orders-list-page .badge { /* Bootstrap class */
    padding: 0.4em 0.65em;
    border-radius: 10px; /* More subtle rounding */
    font-size: 0.75rem;
    font-weight: 600;
}
/* Example badge colors (Bootstrap names) - add more as needed */
.admin-orders-list-page .bg-warning { background-color: #ffc107 !important; color: #000 !important; }
.admin-orders-list-page .bg-info { background-color: #0dcaf0 !important; color: #000 !important;}
.admin-orders-list-page .bg-success { background-color: #198754 !important; }
.admin-orders-list-page .bg-danger { background-color: #dc3545 !important; }
.admin-orders-list-page .bg-secondary { background-color: #6c757d !important; }

/* Action button in table */
.admin-orders-list-page .table .btn-sm.btn-primary {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 15px;
}

/* Pagination container (hidden if no pagination implemented yet) */
.admin-orders-list-page .pagination-container {
    margin-top: 1.5rem;
    /* Add more specific pagination styles here if/when implemented */
}

/* ======================================== */
/* Admin Messages Page (Index/Show) Styles  */
/* ======================================== */
.admin-messages-page .h2 { font-size: 1.75rem; font-weight: 600; }
.admin-messages-page .card { border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.admin-messages-page .card-body { padding: 1.5rem; }
.admin-messages-page .table th { font-weight: 600; color: var(--pop-dark-gray); font-size: 0.85rem; text-transform: uppercase; background-color: #f8f9fa; border-bottom-width: 2px; }
.admin-messages-page .table td { font-size: 0.9rem; vertical-align: middle; }
.admin-messages-page .table .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; border-radius: 15px; margin-right: 0.25rem; }
.admin-messages-page .badge { padding: 0.4em 0.65em; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.admin-messages-page .bg-danger { background-color: #dc3545 !important; } /* Unread/Trash */
.admin-messages-page .bg-success { background-color: #198754 !important; } /* Read/Restored */

/* Specific to Show Page */
.admin-messages-page .message-header h5 { font-size: 1.25rem; font-weight: 600; }
.admin-messages-page .message-header .text-muted { font-size: 0.9rem; }
.admin-messages-page .message-content h6 { font-weight: 600; margin-bottom: 0.5rem; }
.admin-messages-page .message-body {
    white-space: pre-wrap; /* Preserve line breaks and spaces */
    background: var(--pop-light-gray);
    padding: 1rem; /* Consistent padding */
    border-radius: 8px;
    margin: 0;
    line-height: 1.5; /* Improved readability */
    font-size: 0.95rem;
    border: 1px solid #eee;
}
.admin-messages-page .message-actions .btn {
    padding: 0.5rem 1rem;
    border-radius: 20px; /* Rounded buttons */
    font-size: 0.9rem;
}
.admin-messages-page .form-select-sm { font-size: 0.8rem; padding: 0.3rem 0.6rem; }


/* ======================================== */
/* Admin New Message Page (Create) Styles   */
/* ======================================== */
.admin-new-message-page .h2 { font-size: 1.75rem; font-weight: 600; }
.admin-new-message-page .card { border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.admin-new-message-page .card-body { padding: 1.5rem; }
.admin-new-message-page .form-label { font-weight: 500; }
.admin-new-message-page .form-control { border-radius: 0.25rem; border: 1px solid #ced4da; font-size: 0.9rem; }
.admin-new-message-page .form-control:focus { border-color: var(--pop-green3); box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.2); }
.admin-new-message-page .form-control.is-invalid { border-color: #dc3545; }
.admin-new-message-page .invalid-feedback { display: block; color: #dc3545; font-size: 0.8em; }
.admin-new-message-page .alert { border-radius: 0.25rem; margin-bottom: 1rem; }
.admin-new-message-page .btn { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; }
.admin-new-message-page .btn-primary { /* For Send button */
    background-color: var(--pop-green3); border-color: var(--pop-green3); color: white;
}
.admin-new-message-page .btn-primary:hover {
    background-color: var(--pop-green); border-color: var(--pop-green);
}
.admin-new-message-page .btn-secondary { /* For Back button */
     background-color: #6c757d; border-color: #6c757d; color: white;
}
.admin-new-message-page .btn-secondary:hover {
     background-color: #5a6268; border-color: #545b62;
}

.admin-new-message-page .loading-spinner { display: none; }
.admin-new-message-page .loading .loading-spinner { display: inline-block; } /* For AJAX button */

.admin-new-message-page .selected-files { /* File preview area */
    margin-top: 0.5rem;
}
.admin-new-message-page .selected-file {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}
.admin-new-message-page .attachment-preview img {
    max-width: 60px; /* Smaller preview */
    height: auto;
    margin-right: 0.75rem;
    border-radius: 3px;
}
.admin-new-message-page .selected-file .fa-file {
    font-size: 1.5em;
    color: #6c757d;
}

/* TinyMCE specific styling if needed */
.tox-tinymce {
    border-radius: 8px !important;
    border: 1px solid #ced4da !important;
}
.tox .tox-edit-area__iframe {
    background-color: #fff !important;
}

/* ======================================== */
/* Admin Account Settings Page Styles       */
/* ======================================== */

.admin-account-settings-page .h2 { /* Main page title */
    font-size: 1.75rem;
    font-weight: 600;
}

.admin-account-settings-page .card {
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-top: 1rem; /* Reduce top margin as heading is outside card */
}
.admin-account-settings-page .card-body {
    padding: 2rem;
}

/* Form Styles */
.admin-account-settings-page .form-label {
    font-weight: 600;
    color: var(--pop-dark-gray);
    margin-bottom: 0.5rem;
}
.admin-account-settings-page .form-control { /* Bootstrap class */
    border-radius: 6px; /* Slightly less round */
    border: 1px solid #ced4da;
    padding: 0.75rem;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.admin-account-settings-page .form-control:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.2);
    outline: none;
}
.admin-account-settings-page .form-control.is-invalid { border-color: #dc3545; }
.admin-account-settings-page .form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.admin-account-settings-page .invalid-feedback { display: block; color: #dc3545; font-size: 0.875em; margin-top: 0.25rem; }

/* Alert for success messages */
.admin-account-settings-page .alert-success { /* Bootstrap class */
    background-color: #d1fae5;
    border-color: #a3e9a4;
    color: #0a3622;
    border-radius: 6px;
    padding: 1rem;
}

/* Horizontal rule */
.admin-account-settings-page hr.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Section Sub-heading */
.admin-account-settings-page h5.mb-3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pop-dark-gray);
    margin-top: 1rem; /* Space above "Change Password" */
}

/* Button Styling */
.admin-account-settings-page .btn-primary {
    padding: 0.6rem 1.25rem; /* Adjusted padding */
    font-size: 0.95rem; /* Adjusted size */
    border: 2px solid var(--pop-green3);
    border-radius: 20px; /* Rounded */
    color: var(--pop-green3);
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
}
.admin-account-settings-page .btn-primary:hover {
    background-color: var(--pop-green3);
    color: var(--pop-white);
}
.admin-account-settings-page .text-end {
    text-align: right !important;
}

/* ======================================== */
/* Admin Category Display Rules Page Styles */
/* ======================================== */
.admin-cat-display-rules-page .h2 { font-size: 1.75rem; font-weight: 600; }
.admin-cat-display-rules-page .card { border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.admin-cat-display-rules-page .card-body { padding: 1.5rem; }
.admin-cat-display-rules-page .table th { font-weight: 600; color: var(--pop-dark-gray); font-size: 0.85rem; text-transform: uppercase; background-color: #f8f9fa; border-bottom-width: 2px; }
.admin-cat-display-rules-page .table td { font-size: 0.9rem; vertical-align: middle; }
.admin-cat-display-rules-page .table .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; border-radius: 15px; margin-right: 0.25rem; }
.admin-cat-display-rules-page .badge { padding: 0.4em 0.65em; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.admin-cat-display-rules-page .btn-primary, /* Add New / Create / Save */
.admin-cat-display-rules-page .btn-secondary { /* Back button */
    padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 20px; font-weight: 500;
}

/* Form specific styles for create/edit */
.admin-cat-display-rules-page form .form-label { font-weight: 500; }
.admin-cat-display-rules-page form .form-control,
.admin-cat-display-rules-page form .form-select { font-size: 0.9rem; border-radius: 0.25rem; }
.admin-cat-display-rules-page form .form-control:focus,
.admin-cat-display-rules-page form .form-select:focus { border-color: var(--pop-green3); box-shadow: 0 0 0 0.2rem rgba(102, 180, 34, 0.2); }
.admin-cat-display-rules-page form .form-check-input { margin-top: 0.4em; }
.admin-cat-display-rules-page form .form-check-label { font-weight: normal; }
.admin-cat-display-rules-page form .card .card-body { /* For display_fields checkbox list */
    max-height: 300px; /* Make checkbox list scrollable if too long */
    overflow-y: auto;
    background-color: #f8f9fa; /* Light background for field list */
    padding: 1rem;
}
.admin-cat-display-rules-page form .invalid-feedback { display: block; }
.admin-cat-display-rules-page .alert-danger ul { list-style-type: none; padding-left: 0; }

/* ======================================== */
/* Admin Store Category Exclusions Page Styles */
/* ======================================== */
.admin-store-exclusions-page .h2 { font-size: 1.75rem; font-weight: 600; }
.admin-store-exclusions-page .card { border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.admin-store-exclusions-page .card-body { padding: 1.5rem; }

.admin-store-exclusions-page .table th {
    font-weight: 600;
    color: var(--pop-dark-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    background-color: #f8f9fa;
    border-bottom-width: 2px;
    vertical-align: middle;
}
.admin-store-exclusions-page .table td {
    font-size: 0.95rem;
    vertical-align: top; /* As per blade style */
    padding: 1rem; /* Add more padding for checkbox groups */
}
.admin-store-exclusions-page .table td:first-child { /* Store name column */
    font-weight: 500;
    vertical-align: middle; /* Align store name nicely */
    width: 25%; /* Give store name a decent width */
}

.admin-store-exclusions-page .form-check {
    margin-bottom: 0.5rem; /* Space between checkboxes */
    padding-left: 1.75rem; /* Align with other form elements */
}
.admin-store-exclusions-page .form-check-label {
    user-select: none; /* From blade style */
    font-weight: normal; /* Override potential bootstrap bolding */
    font-size: 0.9rem;
}
.admin-store-exclusions-page .form-check-input {
    margin-top: 0.2em; /* Adjust vertical alignment */
}

.admin-store-exclusions-page .btn-primary { /* Save button */
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 20px;
}

/* ======================================== */
/* Admin Main Page Edit Styles              */
/* ======================================== */
.admin-main-page-edit .h1,
.admin-main-page-edit .h2 { font-size: 1.75rem; font-weight: 600; }

.admin-main-page-edit .card {
    border: 1px solid #ddd; /* Add border */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}
.admin-main-page-edit .card-header {
    background-color: #f8f9fa;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #ddd;
}
.admin-main-page-edit .card-body {
    padding: 1.25rem;
}

/* Available Blocks Panel */
.admin-main-page-edit #block-types .list-group-item {
    cursor: grab; /* Indicate draggable */
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}
.admin-main-page-edit #block-types .list-group-item:hover {
    background-color: #e9ecef;
}

/* Page Layout Area */
.admin-main-page-edit #content-blocks {
    min-height: 400px; /* Ensure decent drop area */
    background-color: #ffffff;
    border: 1px dashed #ccc !important; /* Dashed border for dropzone */
    padding: 1rem !important;
    border-radius: 5px;
}
.admin-main-page-edit .content-block { /* Individual dragged block styling */
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem !important; /* Override Bootstrap if needed */
    margin-bottom: 1rem !important;
    cursor: move; /* Indicate draggable */
}
.admin-main-page-edit .content-block img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.admin-main-page-edit .content-block .block-content {
    min-height: 30px; /* Minimum height for empty text blocks */
    border: 1px dashed transparent; /* Placeholder for edit hover */
}
.admin-main-page-edit .content-block .block-content:hover {
    border-color: var(--pop-green3);
}
.admin-main-page-edit .content-block .mt-2 { /* Action buttons container */
    text-align: right;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
    margin-top: 0.5rem !important;
}
.admin-main-page-edit .content-block .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Save Button */
.admin-main-page-edit #save-layout {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
}

/* Modal adjustments if needed */
.admin-main-page-edit .modal-dialog { max-width: 700px; } /* Wider modal for TinyMCE */
.admin-main-page-edit #textBlockEditor { width: 100%; }

/* Styles from original push */
.admin-main-page-edit .content-block {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}
.admin-main-page-edit #content-blocks {
    min-height: 300px; /* Already set above, ensure consistency */
    background-color: #ffffff;
}

/* ======================================== */
/* Dynamic Page Content (Index Page Rows)   */
/* ======================================== */
.dynamic-page-content {
    /* Container for all dynamic rows */
}

.dynamic-page-content .content-row {
    display: flex;
    flex-wrap: wrap;         /* Allow items to wrap to the next line */
    gap: 1.5rem;             /* Consistent spacing between items in a row and also acts as row gap if items wrap */
    margin-bottom: 1.5rem;   /* Spacing between distinct visual rows */
    align-items: flex-start; /* Align items to the top if they have different heights */
}

.dynamic-page-content .row-item {
    flex-grow: 1;            /* Allow item to grow to fill space */
    flex-shrink: 1;          /* Allow item to shrink if needed */
    flex-basis: 0;           /* Distribute space based on flex-grow, starting from 0 */
    min-width: 280px;        /* Minimum width before an item wraps to the next line; adjust as needed for your design.
                                This helps create responsive columns. For example, on a 1200px wide container,
                                up to 4 items (with gaps) might fit. On smaller screens, fewer will fit and they'll wrap. */
}

/* If a row has only one item, and you want it to take full width, this default works.
   If you want a single item (like a button) to not stretch, specific styling for that item type is needed. */

.dynamic-page-content .row-item-image {
    /* Images usually look good taking available flex space. */
    display: flex; /* Helps if you want to center the image within the item if it's smaller than min-width */
    justify-content: center; /* Center image if it's constrained by max-width */
}
.dynamic-page-content .row-item-image .img-fluid {
    /* Bootstrap's .img-fluid is good: max-width: 100%; height: auto; display: block; */
    /* You might want to add a specific max-height or aspect ratio constraints here if needed */
}

.dynamic-page-content .row-item-text {
    /* Text blocks will naturally fill the flex space. */
}

/* In style.css, for .dynamic-page-content */
.dynamic-page-content .row-item-button {
    /* Inherit general .row-item flex properties to match width */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 280px; /* Or match the min-width of your image/text items if different */

    /* Add these to center the actual button within the expanded .row-item-button container */
    display: flex;
    justify-content: center; /* Center button horizontally */
    align-items: center;   /* Center button vertically (if item has height) */
}

/* --- Styling for HTML content within Text Items --- */
/* These ensure that H tags, P tags, etc., from the WYSIWYG editor look consistent.
   They are scoped to .row-item-text to avoid affecting other parts of the page. */
.dynamic-page-content .row-item-text h1,
.dynamic-page-content .row-item-text h2,
.dynamic-page-content .row-item-text h3,
.dynamic-page-content .row-item-text h4,
.dynamic-page-content .row-item-text h5,
.dynamic-page-content .row-item-text h6 {
  color: var(--pop-dark-gray);
  font-weight: 700;
  margin-top: 1em; /* Use em for proportional spacing */
  margin-bottom: 0.5em;
}
.dynamic-page-content .row-item-text h1 { font-size: 2rem; } /* Example sizes, adjust as needed */
.dynamic-page-content .row-item-text h2 { font-size: 1.75rem; }
.dynamic-page-content .row-item-text h3 { font-size: 1.5rem; }

.dynamic-page-content .row-item-text p {
   margin-bottom: 1em;
   line-height: 1.6;
}
.dynamic-page-content .row-item-text a {
  color: var(--pop-green3);
  text-decoration: underline;
}
.dynamic-page-content .row-item-text a:hover {
  color: var(--pop-green); /* Using the lighter green from your variables */
  text-decoration: none;
}
.dynamic-page-content .row-item-text ul,
.dynamic-page-content .row-item-text ol {
  margin-bottom: 1em;
  padding-left: 2em; /* Indent lists */
}
.dynamic-page-content .row-item-text li {
  margin-bottom: 0.25em;
}

.dynamic-page-content .row-item-text > *:last-child {
    margin-bottom: 0;
}

/* =================================== */
/*  Responsive Navigation Bar Styles   */
/* =================================== */

@media (max-width: 992px) {
    .navbar-product-categories {
        border-bottom: 1px solid #e9ecef;
    }
    .navbar-product-categories .container {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-product-categories .nav {
        flex-wrap: nowrap; 
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .navbar-product-categories .nav::-webkit-scrollbar {
        display: none;
    }
    .navbar-product-categories .nav-item {
        flex-shrink: 0;
    }
    .navbar-product-categories .nav-item:first-child {
        padding-left: 1rem;
    }
    .navbar-product-categories .nav-item:last-child {
        padding-right: 1rem;
    }
}

/* ========================================= */
/*  Responsive Product Category Navbar     */
/* ========================================= */

/* This media query targets tablets and phones (screens 992px wide or smaller).
   The desktop view will remain completely unchanged. */
@media (max-width: 992px) {
    
    /* Style the navbar itself on mobile for better separation. */
    .navbar-product-categories {
        /* Add a subtle bottom border to separate it from the content below. */
        border-bottom: 1px solid #e9ecef;
    }
    
    /* Target the container inside the secondary navbar. */
    .navbar-product-categories .container {
        /* Remove the container's side padding. This allows the scrollable list
           to go all the way to the edges of the screen for a better look. */
        padding-left: 0;
        padding-right: 0;
    }

    /* This is the core logic for the list of links (the <ul>). */
    .navbar-product-categories .nav {
        /* This is the magic: it prevents the list items from wrapping to a new line. */
        flex-wrap: nowrap; 
        
        /* This allows the content to overflow and enables horizontal scrolling. */
        overflow-x: auto;

        /* These next lines HIDE the ugly scrollbar for a cleaner, native-app feel.
           The user can still scroll by swiping with their finger. */
        -ms-overflow-style: none;  /* For Internet Explorer and Edge */
        scrollbar-width: none;  /* For Firefox */
    }
    
    /* This specifically hides the scrollbar for Chrome, Safari, and Opera. */
    .navbar-product-categories .nav::-webkit-scrollbar {
        display: none;
    }

    /* Target the individual links (the <li>). */
    .navbar-product-categories .nav-item {
        /* Stop links from shrinking to try and fit on the screen. */
        flex-shrink: 0;
    }

    /* Add some space so the first and last items aren't glued to the screen edges. */
    .navbar-product-categories .nav-item:first-child {
        padding-left: 1rem; /* 1rem is typically 16px */
    }
    .navbar-product-categories .nav-item:last-child {
        padding-right: 1rem;
    }
}

/* ========================================= */
/*  Fix for Live Search Results Container    */
/* ========================================= */

/* This rule targets the live search results div ONLY when it is empty. */
.live-search-results:empty {
    /* Hides the element completely, including its borders and background. */
    display: none;
}

/* ======================================== */
/* Events Page Mobile Responsive Styles    */
/* ======================================== */

/* These styles work with your existing HTML structure without changes */

/* ======================================== */
/* MOBILE RESPONSIVE STYLES                 */
/* ======================================== */

/* Tablet and Mobile - 768px and below */
@media (max-width: 768px) {
    
    /* Hide the desktop table header on mobile */
    .events-page .event-header {
        display: none;
    }
    
    /* Transform the table container on mobile */
    .events-page .event-table {
        border: none; /* Remove table border */
        box-shadow: none; /* Remove table shadow */
        background: transparent;
    }
    
    .events-page .event-row {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    min-height: 100px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
	}

	.events-page .event-row:hover {
		background-color: #f8f9fa;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.events-page .event-row:last-child {
		border-bottom: none;
	}
		
    /* Mobile image column styling */
    .events-page .image-column {
        flex: 0 0 80px;
        padding: 0;
        border-right: none;
    }
    
    .events-page .event-image-container {
        width: 80px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #eee;
    }
    
    .events-page .event-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Mobile content area */
    .events-page .event-info-column {
        flex: 1;
        padding: 0;
        border-right: none;
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Hide time, location, cost columns and move content to info column */
    .events-page .time-column,
    .events-page .location-column,
    .events-page .cost-column {
        display: none;
    }
    
    /* Style the event details for mobile */
    .events-page .event-details {
        width: 100%;
    }
    
    .events-page .event-name {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }
    
    .events-page .event-description {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }
    
    /* Add mobile meta info after description */
    .events-page .event-details::after {
        content: '';
        display: block;
        width: 100%;
    }
}

/* Alternative approach - let's restructure this to work with your existing HTML */
@media (max-width: 768px) {
    
    /* Hide the desktop table header on mobile */
    .events-page .event-header {
        display: none;
    }
    
    /* Remove table styling */
    .events-page .event-table {
        border: none;
        box-shadow: none;
        background: transparent;
    }
    
    /* Make each row a card */
    .events-page .event-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        gap: 1rem;
    }
    
    /* Resize image for mobile */
    .events-page .image-column {
        flex: 0 0 80px;
        padding: 0;
        border-right: none;
    }
    
    .events-page .event-image-container {
        width: 80px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
    }
    
    /* Stack the content vertically */
    .events-page .event-info-column {
        flex: 1;
        padding: 0;
        border-right: none;
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Style the content area */
    .events-page .event-details {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .events-page .event-name {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .events-page .event-description {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    /* Reposition and style the meta columns */
    .events-page .time-column,
    .events-page .location-column,
    .events-page .cost-column {
        flex: none;
        width: auto;
        padding: 0;
        border-right: none;
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
        justify-content: flex-start;
        text-align: left;
    }
    
    /* Add icons before the meta content */
    .events-page .time-column::before {
        content: '\f017'; /* FontAwesome clock icon */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-right: 0.5rem;
        color: var(--pop-green3);
    }
    
    .events-page .location-column::before {
        content: '\f3c5'; /* FontAwesome map marker icon */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-right: 0.5rem;
        color: var(--pop-green3);
    }
    
    .events-page .cost-column::before {
        content: '\f02b'; /* FontAwesome tag icon */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-right: 0.5rem;
        color: var(--pop-green3);
    }
    
    /* Make cost stand out */
    .events-page .cost-column .event-cost {
        font-weight: 600;
        color: var(--pop-green3);
    }
}

/* ======================================== */
/* Fix Image Ordering on Mobile             */
/* ======================================== */

@media (max-width: 768px) {
    /* Force content rows to maintain source order */
    .dynamic-page-content .content-row {
        display: block !important; /* Override flex completely */
    }
    
    /* Make each row item display as a block to maintain order */
    .dynamic-page-content .row-item {
        display: block !important;
        width: 100% !important;
        min-width: auto !important;
        flex: none !important;
        margin-bottom: 1.5rem; /* Space between items */
        
        /* Remove any flex properties that could cause reordering */
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
    }
    
    /* Center images within their containers */
    .dynamic-page-content .row-item-image {
        text-align: center;
        display: block !important;
    }
    
    /* Center text content */
    .dynamic-page-content .row-item-text {
        display: block !important;
        text-align: center;
    }
    
    /* Ensure images are responsive but maintain aspect ratio */
    .dynamic-page-content .row-item-image img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .dynamic-page-content .row-item {
        margin-bottom: 1rem; /* Slightly less space on very small screens */
    }
}

/* You can remove or comment out the old .content-block, .text-block, .image-block specific styles
   from style.css once you confirm this new system works, to avoid confusion. */

/* ======================================== */
/* Event Detail Page Styles                 */
/* ======================================== */

.event-detail-page {
    background-color: #f8f9fa;
    min-height: 100vh;
}

.event-hero {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    margin-bottom: 2rem;
}

.hero-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Show full image */
    object-position: center;
    background-color: #1a1a1a;  /* Dark background */
}

.hero-overlay {
    padding: 2rem 0;
}

.hero-content {
    color: white;
}

.event-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #6a6667;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.event-tagline {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    opacity: 0.95;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.event-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.event-badges .badge {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 20px;
}

.badge-event-type {
    background-color: var(--pop-green3);
    color: white;
}

.badge-featured {
    background-color: #ffc107;
    color: #000;
}

/* Container */
.event-detail-container {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Cards */
.event-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    background-color: white;
}

.event-card .card-body {
    padding: 1.5rem;
}

.event-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #333;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 2px solid var(--pop-green3);
    padding-bottom: 0.5rem;
}

/* Event Description */
.event-description-content {
    line-height: 1.8;
    color: #444;
    font-size: 1rem;
}

.event-description-content h1,
.event-description-content h2,
.event-description-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #333;
}

.event-description-content p {
    margin-bottom: 1rem;
}

.event-description-content ul,
.event-description-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

/* Categories */
.event-categories {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.event-categories h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #555;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background-color: #f1f3f5;
    color: #495057;
    border-radius: 15px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Upgrade Card */
.upgrade-card {
    border-left: 4px solid var(--pop-green3);
    background-color: #f8fff4;
}

.upgrade-card .section-title {
    color: var(--pop-green3);
    border-bottom-color: var(--pop-green3);
}

.upgrade-content {
    margin-top: 1rem;
}

.upgrade-price {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: white;
    border-radius: 6px;
    border: 1px solid #d3f9d8;
}

.price-label {
    font-weight: 600;
    color: #555;
}

.price-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--pop-green3);
}

.upgrade-description {
    color: #555;
    line-height: 1.6;
}

/* At a Glance Card - Sticky */
.sticky-card {
    position: sticky;
    top: 90px;
}

/* Info Items */
.info-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-of-type {
    border-bottom: none;
}

.info-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    color: var(--pop-green3);
    font-size: 1rem;
    margin-right: 1rem;
}

.info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.cost-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--pop-green3);
}

/* Registration Button */
.registration-button-container {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #eee;
}

.registration-btn {
    background-color: var(--pop-green3);
    border-color: var(--pop-green3);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.registration-btn:hover {
    background-color: var(--pop-green);
    border-color: var(--pop-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Venue & Organizer Cards */
.venue-name,
.organizer-name {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.venue-address {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.venue-address i {
    color: var(--pop-green3);
    margin-top: 0.25rem;
}

/* Map Container */
.map-container {
    margin: 1rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.map-container iframe {
    display: block;
}

/* Contact Info */
.contact-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.contact-info i {
    width: 20px;
    color: #6c757d;
}

.contact-info a {
    color: var(--pop-green3);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border-radius: 50%;
    color: #495057;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    background-color: var(--pop-green3);
    color: white;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 991px) {
    .sticky-card {
        position: relative;
        top: 0;
    }
    
    .event-title {
        font-size: 2rem;
    }
    
    .event-tagline {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .event-hero {
        height: 200px;
    }
    
    .event-title {
        font-size: 1.75rem;
    }
    
    .event-tagline {
        font-size: 1rem;
    }
    
    .hero-overlay {
        padding: 1.5rem 0;
    }
    
    .event-card .card-body {
        padding: 1rem;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
}

/* ======================================== */
/* End Event Detail Page Styles             */
/* ======================================== */

.check-availability-link {
    color: var(--pop-green3) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.check-availability-link:hover {
    color: var(--pop-green) !important;
    text-decoration: underline;
}

.page-item.active .page-link {
    background-color: var(--pop-green3);
    border-color: var(--pop-green3);
    color: #fff;
}
.page-link {
    color: var(--pop-green3);
    transition: all 0.2s ease;
}
.page-link:hover {
    color: #fff;
    background-color: var(--pop-green3);
    border-color: var(--pop-green3);
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 179, 112, 0.25);
}

.search-submit-btn,
#navbar-search-form .input-group-sm .search-submit-btn {
    background-color: var(--pop-green3) !important;
    color: #fff !important;
    border: none;
}
.search-submit-btn:hover,
#navbar-search-form .input-group-sm .search-submit-btn:hover {
    background-color: #2a9960 !important; /* Slightly darker on hover */
}

.form-check-input:checked {
    background-color: var(--pop-green3);
    border-color: var(--pop-green3);
}
.form-check-input:focus {
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(52, 179, 112, 0.25);
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* ===== FOOTER STYLES ===== */
.footer h6 {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pop-green3);
    display: inline-block;
}
.footer ul li {
    margin-bottom: 0.35rem;
}
.footer ul li a {
    color: #adb5bd;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer ul li a:hover {
    color: var(--pop-green3);
    padding-left: 4px;
}
.footer .social-icons {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.25rem;
}
.footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #adb5bd;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-decoration: none;
}
.footer .social-icon:hover {
    background: var(--pop-green3);
    color: #fff;
    transform: translateY(-2px);
}
.footer .text-center {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #6c757d;
}

/* ===== SEARCH BAR STYLES ===== */

/* Search input field */
.js-navbar-search-form .search-input-field {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #212529;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.95);
    transition: all 0.2s ease;
}
.js-navbar-search-form .search-input-field::placeholder {
    color: #999;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}
.js-navbar-search-form .search-input-field:focus {
    background: #fff;
    border-color: var(--pop-green3);
    box-shadow: 0 0 0 0.2rem rgba(52, 179, 112, 0.2);
}

/* Category dropdown button */
.js-navbar-search-form .search-category-btn {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #495057;
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.95);
}

/* Category dropdown menu */
.js-navbar-search-form .dropdown-menu {
    font-size: 0.8rem;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 0.35rem 0;
}
.js-navbar-search-form .dropdown-item {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    letter-spacing: 0.01em;
    transition: all 0.15s ease;
}
.js-navbar-search-form .dropdown-item:hover,
.js-navbar-search-form .dropdown-item:focus {
    background-color: rgba(52, 179, 112, 0.1);
    color: var(--pop-green3);
}

/* Live search results dropdown */
.live-search-results {
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    border-top: 2px solid var(--pop-green3);
}
.live-search-results .list-group-item {
    padding: 0.55rem 0.85rem;
    border-color: #f0f0f0;
    transition: all 0.15s ease;
}
.live-search-results .list-group-item:hover {
    background-color: rgba(52, 179, 112, 0.06);
    padding-left: 1rem;
}
.live-search-results .search-result-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: #212529;
    letter-spacing: 0.01em;
}
.live-search-results .search-result-type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.live-search-results .text-muted {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* --- Global Header Refresh --- */
.navbar {
    border-bottom: 1px solid #eee;
    background-color: #ffffff !important; /* Force white background */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Link Colors for Light Navbar */
.navbar-light .navbar-nav .nav-link {
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--pop-green3) !important;
}

/* --- Pill-Shaped Search Bar --- */
#navbar-search-form .input-group {
    background-color: #f8f9fa;
    border-radius: 50px; /* This creates the pill shape */
    padding: 3px;
    border: 1px solid #ddd;
    overflow: visible; /* Allow results to show */
}

#navbar-search-form .search-category-btn {
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #ddd !important;
    border-radius: 50px 0 0 50px !important;
    color: #666 !important;
    font-weight: 600;
    padding-left: 15px;
}

#navbar-search-form .search-input-field {
    background-color: transparent !important;
    border: none !important;
    padding-left: 15px;
}

#navbar-search-form .search-input-field:focus {
    box-shadow: none !important;
}


/* SITE GRAPHICAL RERRESH - DELETE FROM HERE TO REVERSE
/* The Search Button as a Green Circle */
#navbar-search-form .search-submit-btn {
    background-color: var(--pop-green3) !important;
    color: white !important;
    border-radius: 50% !important; /* Perfect circle */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
    border: none !important;
}

/* ============================================================
   SEARCH BAR & LIVE RESULTS
   ============================================================ */
.js-navbar-search-form .live-search-results {
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    overflow-y: auto;
    background: white;
}
/* ============================================================
   MAIN NAV BUTTONS (REGISTER & LOGIN)
   ============================================================ */
.nav-link-btn {
    border-radius: 50px !important; 
    padding: 6px 22px !important;  
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: none !important;
}

.nav-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: #ffffff !important;
    opacity: 0.9;
}

.nav-btn-register {
    background-color: #27C37D !important; /* Design Green */
}

.nav-btn-login {
    background-color: #7b32d9 !important; /* Design Purple */
}

.navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

.nav-divider {
    height: 20px;
    width: 1px;
    background-color: #ddd;
    margin: 0 15px;
    display: inline-block;
}

/* ============================================================
   SECONDARY NAVBAR (THE GRAY BAR) - CENTERED & COLOR FIXED
   ============================================================ */

/* 1. Target the Bar itself */
body nav.navbar.navbar-product-categories {
    background-color: #f8f9fa !important;
    border-top: 1px solid #e9ecef !important;
    border-bottom: 1px solid #e9ecef !important;
    min-height: 45px !important;
    padding: 0 !important;
}

/* 2. Target the Container - Center content on desktop */
body nav.navbar.navbar-product-categories .container {
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important; /* Kill the left-pull from 'overflow-auto' */
}

/* 3. Target the UL list - Force centering of the links */
body nav.navbar.navbar-product-categories .nav {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important; /* Allow wrapping on desktop if needed, helps centering */
    width: 100% !important;
    margin: 0 auto !important;
    list-style: none !important;
}

/* 4. Target the Links - DEFAULT STATE (GRAY) */
body nav.navbar.navbar-product-categories .nav-item a.nav-link {
    color: #888888 !important; /* Gray Text */
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 12px 18px !important;
    
    background: transparent !important;
    transition: color 0.2s ease-in-out !important;
    transform: none !important;
    text-decoration: none !important;
}

/* 5. Target the Links - HOVER/ACTIVE (BLACK) - KILLS GREEN */
body nav.navbar.navbar-product-categories .nav-item a.nav-link:hover, 
body nav.navbar.navbar-product-categories .nav-item a.nav-link:focus, 
body nav.navbar.navbar-product-categories .nav-item a.nav-link.active {
    color: #000000 !important; /* Black Text */
    background-color: transparent !important;
    text-decoration: none !important;
    transform: none !important;
}

/* 6. Clean up legacy design dots */
body nav.navbar.navbar-product-categories .category-dot,
body nav.navbar.navbar-product-categories .category-separator,
body nav.navbar.navbar-product-categories .mx-2 {
    display: none !important;
}

/* 7. Mobile View - Switch back to swipe-left mode */
@media (max-width: 991px) {
    body nav.navbar.navbar-product-categories .container {
        justify-content: flex-start !important;
        overflow-x: auto !important; /* Allow swiping on phones */
    }
    body nav.navbar.navbar-product-categories .nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important; /* Stop wrapping on phones */
        width: auto !important;
    }
}

/* ============================================================
   DYNAMIC CONTENT ROW BADGES (FLOATING TEXT STYLE)
   ============================================================ */

/* 1. Remove the background and pill shape from the row badges */
.cr-row .cr-category-badge {
    background: transparent !important;   /* Kill the solid color */
    box-shadow: none !important;          /* Kill the pill shadow */
    top: 1.2rem !important;               /* Position it precisely */
    left: 1.5rem !important;
    padding: 0 !important;                /* No padding needed without a box */
    
    /* 2. Style the text to be bold and readable over images */
    color: #ffffff !important;
    font-size: 1rem !important;           /* Match the mockup size */
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;      /* Mockup uses Title Case, not Uppercase */
    
    /* 3. Add a shadow to the text itself so it pops off the image */
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 4. Force the icon to be the diamond shape from the mockup */
.cr-row .cr-category-badge i {
    font-size: 0.8rem !important;
    margin-right: 8px !important;
    opacity: 1 !important;
}

.cr-row .cr-category-badge i::before {
    content: "\f219" !important;         /* FontAwesome Diamond icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* 5. Remove the thick colored border on the left of the text items */
/* This makes the row look like a single clean banner rather than sections */
.cr-row:not(.cr-row--no-category) .cr-item-text {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 2rem !important;
}

/* 6. Ensure the carousel badges (outside .cr-row) are NOT affected */
/* (This is handled by the .cr-row selector above) */

/* ============================================================
   EVENT CAROUSEL - CONSTRAINED & ARROWS
   ============================================================ */

/* 1. Constrain the outer wrapper */
.events-preview-container {
    max-width: 100%;
    margin: 0 auto;
    overflow: visible; /* Allows arrows to sit slightly outside if needed */
}

/* 2. Positioning the Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Dark gray like mockup */
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.carousel-arrow:hover {
    color: #000;
    transform: translateY(-50%) scale(1.2);
}

/* Position them on the far left and right */
.arrow-left {
    left: -50px; /* Moves arrow outside the card area */
}

.arrow-right {
    right: -50px; /* Moves arrow outside the card area */
}

/* 3. Responsive Arrows: Move them inside on smaller screens */
@media (max-width: 1400px) {
    .arrow-left { left: 5px; background: rgba(255,255,255,0.7); border-radius: 50%; }
    .arrow-right { right: 5px; background: rgba(255,255,255,0.7); border-radius: 50%; }
}

/* 4. Soften the Carousel reset */
.events-scroll-container {
    border-radius: 12px; /* Matches card corners */
}