@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Base Variables - Design tokens and configuration */
@import url("base/_variables.css");

/* Component Imports - Modern component-based architecture */
@import url("components/_buttons.css");
@import url("components/_forms.css");
@import url("components/_file-inputs.css"); /* File upload controls */
@import url("components/_setup-forms.css"); /* Setup forms specific styling */
@import url("components/_cards.css");
@import url("components/_alerts.css");
@import url("components/_navigation.css");
@import url("components/_tabs.css");
@import url("components/_tables.css");
@import url("components/_badges.css");
@import url("components/_modals.css");
@import url("components/_admin-layout.css");
@import url("components/_inline-text-edit.css"); /* Inline text editing component */
/* Note: _dashboard-feedback-modal.css is loaded via <link> tag in base.html */
/*--------------------------------------------------------------
# Font & Color Variables
# Modern, unified typography system
--------------------------------------------------------------*/
/* Unified Font System - Single font family for consistency */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Legacy aliases for backward compatibility */
  --default-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --nav-font: var(--font-sans);
}

/* Modern Typography Scale - rem-based for predictability */
:root {
  /* Font Sizes */
  --font-size-h1: 2.25rem;    /* 36px */
  --font-size-h2: 1.875rem;   /* 30px */
  --font-size-h3: 1.5rem;     /* 24px */
  --font-size-h4: 1.25rem;    /* 20px */
  --font-size-h5: 1.125rem;   /* 18px */
  --font-size-h6: 1rem;       /* 16px */
  --font-size-body: 1rem;     /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-base: 1.6;
  --line-height-heading: 1.2;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* 
  Global Colors - Main color definitions
  Note: These are the primary color definitions for the application.
  Duplicate definitions that were previously at lines 14-45 have been removed.
  Tenant-specific overrides for --bs-primary and --bs-secondary are applied via base.html
*/
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #F5F5F5;
  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #404041;
  --nav-dropdown-color: #404041;
  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #202024;
  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --nav-hover-color: #CADCFC;
  --nav-dropdown-hover-color: #CADCFC;
  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
  --hero-background-color: #3d4d6a;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  line-height: var(--line-height-heading);
}

/* Apply modern font scale */
h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
}

h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
}

/*--------------------------------------------------------------
# Admin Panel Layout System
# Reusable layout for management interfaces with left nav and right content
--------------------------------------------------------------*/

/* CSS Variables for easy customization */
:root {
  --admin-panel-navbar-height: 56px;
  --admin-panel-margin: 24px; /* Total vertical margin (m-3 = 12px top + 12px bottom) */
  --admin-panel-nav-width: 16.67%; /* Matches Bootstrap col-lg-2 */
  --admin-panel-content-width: 83.33%; /* Matches Bootstrap col-lg-10 */
  --admin-panel-mobile-breakpoint: 992px; /* Bootstrap lg breakpoint */
}

/* Main layout wrapper */
.admin-panel-layout {
  height: calc(100vh - var(--admin-panel-navbar-height) - var(--admin-panel-margin));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Container that holds the nav and content */
.admin-panel-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* Important for Firefox flex children */
}

/* Inner row for layout */
.admin-panel-row {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Left navigation column - Replaces Bootstrap grid */
.admin-panel-nav {
  flex: 0 0 20%;  /* Custom width between col-lg-2 and col-lg-3 */
  max-width: 20%;
  padding: 0 15px;   /* Bootstrap gutter */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #dee2e6;
}

/* Right content column - Replaces Bootstrap grid */
.admin-panel-content {
  flex: 0 0 80%;  /* Adjusted to match 20% sidebar */
  max-width: 80%;
  padding: 0 15px;   /* Bootstrap gutter */
  display: flex;
  flex-direction: column;
  overflow: visible; /* Changed from hidden to visible */
  min-height: 500px; /* Ensure minimum height */
}

/* Tab content container */
.admin-panel-tabs {
  flex: 1;
  position: relative;
  overflow: visible; /* Changed from hidden to visible */
  min-height: 400px; /* Ensure minimum height */
}

/* Individual tab panes - scrollable */
.admin-panel-tab {
  position: relative; /* Changed from absolute to relative */
  min-height: 400px; /* Ensure minimum height */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem;
}

/* Active tab pane */
.admin-panel-tab.active {
  display: block;
}

/* Inactive tab panes */
.admin-panel-tab:not(.active) {
  display: none;
}

/* Inner content containers */
.admin-panel-tab > .container,
.admin-panel-tab > .container-fluid,
.admin-panel-tab > div:first-child {
  min-height: auto;  /* Changed from 100% to prevent vertical stretching */
}

/* content-area removed - using admin-panel-tabs directly for cleaner structure */

/* Special handling for tables inside tabs */
.admin-panel-tab .table-responsive {
  max-height: none;
  height: auto;
}

/* Mobile/Tablet responsiveness */
@media (max-width: 991.98px) {
  .admin-panel-row {
    flex-direction: column;
  }
  
  .admin-panel-nav {
    flex: 0 0 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    max-height: 40vh; /* Limit nav height on mobile */
    flex-shrink: 0;
  }
  
  .admin-panel-content {
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 50vh;
  }
  
  .admin-panel-tab {
    position: relative;
    height: auto;
    min-height: 50vh;
  }
}

/* Ensure modals appear above fixed layout */
.modal {
  z-index: 1055; /* Bootstrap default is 1050 */
}

/* Smooth scrolling for the content area */
.admin-panel-tab {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Optional: Custom scrollbar styling for webkit browsers */
.admin-panel-tab::-webkit-scrollbar {
  width: 8px;
}

.admin-panel-tab::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.admin-panel-tab::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.admin-panel-tab::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #3d4d6a;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  -webkit-transition: background-color 0.5s, padding 0.5s;
  transition: background-color 0.5s, padding 0.5s;
  z-index: 997;
}
.header .logo {
  line-height: 1;
}
.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}
.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
@media (max-width: 1200px) {
  .header .logo {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .header .btn-getstarted {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }
  .header .navmenu {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
  --heading-color: #ffffff;
  --nav-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: rgba(40, 58, 90, 0.9);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navmenu li {
    position: relative;
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    white-space: nowrap;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .navmenu li:last-child a {
    padding-right: 0;
  }
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }
  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    -webkit-box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
            box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }
  .navmenu .dropdown ul li {
    min-width: 200px;
  }
  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }
  .navmenu .dropdown ul a i {
    font-size: 12px;
  }
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover > a {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }
  .navmenu .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
  .navmenu .megamenu {
    position: static;
  }
  .navmenu .megamenu ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    -webkit-box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
            box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }
  .navmenu .megamenu ul li {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .navmenu .megamenu ul li a, .navmenu .megamenu ul li:hover > a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
  }
  .navmenu .megamenu ul li a:hover,
  .navmenu .megamenu ul li .active,
  .navmenu .megamenu ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .megamenu:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  .navmenu .dd-box-shadow {
    -webkit-box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
            box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }
}
/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  .navmenu {
    padding: 0;
    z-index: 9997;
  }
  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    z-index: 9998;
    -webkit-box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
            box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    white-space: nowrap;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }
  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
  }
  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }
  .navmenu .dropdown > .dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
  .mobile-nav-active {
    overflow: hidden;
  }
  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }
  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}
.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
  padding: 50px 0;
}
.footer .footer-newsletter h4 {
  font-size: 24px;
}
.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  -webkit-box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 95%);
          box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 95%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 50px;
}
.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}
.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  color: var(--default-color);
}
.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}
.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 50px;
}
.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}
.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}
.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}
.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  -webkit-animation: subscription-loading 1s linear infinite;
          animation: subscription-loading 1s linear infinite;
}
@-webkit-keyframes subscription-loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes subscription-loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.footer .footer-top {
  padding-top: 50px;
}
.footer .social-links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}
.footer .footer-links {
  margin-bottom: 30px;
}
.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}
.footer .footer-links ul li {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer .footer-links ul li:first-child {
  padding-top: 0;
}
.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}
.footer .footer-links ul a:hover {
  color: var(--accent-color);
}
.footer .footer-about a {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--heading-font);
}
.footer .footer-contact p {
  margin-bottom: 5px;
}
.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.footer .copyright p {
  margin-bottom: 0;
}
.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    -webkit-transition-delay: 0 !important;
            transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 88px;
  overflow: clip;
}

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 66px;
  }
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}
.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  text-transform: uppercase;
  position: relative;
}
.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}
.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.portfolio-details .portfolio-info {
  padding: 30px;
  -webkit-box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
          box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}
.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}
.portfolio-details .portfolio-description {
  padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}
.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}
.service-details .services-list a:hover {
  border-color: var(--accent-color);
}
.service-details .services-img {
  margin-bottom: 20px;
}
.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}
.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}
.service-details p {
  font-size: 15px;
}
.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.service-details ul li {
  padding: 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Account Settings Styling
--------------------------------------------------------------*/
/* Enhanced card styling for account settings page */
.container .card {
  border-radius: 6px;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  -webkit-transition: -webkit-box-shadow 0.3s ease;
  transition: -webkit-box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
}
.container .card:hover {
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.container .card .card-header {
  background-color: color-mix(in srgb, var(--bs-info, #CADCFC), transparent 50%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 6px 6px 0 0 !important;
  padding: 1rem 1.25rem;
}
.container .card .card-header h5, .container .card .card-header h6 {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  font-weight: 600;
  margin-bottom: 0;
}
.container .card .card-body {
  padding: 1.5rem 1.25rem;
}

/*--------------------------------------------------------------
# Stepper Component Styles
--------------------------------------------------------------*/
.stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  counter-reset: step;
  justify-content: center;
  align-items: flex-start;
  max-width: 600px; /* Limit max width for compactness */
  position: relative;
}

.stepper-item {
  flex: 0 1 auto; /* Don't grow, only shrink if needed */
  text-align: center;
  position: relative;
  counter-increment: step;
  padding: 0 1.5rem; /* Horizontal padding for spacing */
  min-width: 120px; /* Minimum width for each step */
}

/* Numbered circles */
.stepper-item::before {
  content: counter(step);
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 0.5rem;
  background: #e9ecef;
  color: #6c757d;
  border-radius: 50%;
  line-height: 36px;
  font-weight: 600;
  font-size: 0.875rem;
  position: relative;
  z-index: 2;
  /* Solid background to hide lines behind circles */
  box-shadow: 0 0 0 4px var(--bs-body-bg, white);
}

/* Connecting lines between steps */
.stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: calc(100% - 36px);
  height: 2px;
  background: #e9ecef;
  z-index: 1;
}

/* Active state */
.stepper-item.active::before {
  background: var(--bs-primary);
  color: white;
  box-shadow: 0 0 0 4px var(--bs-body-bg, white), 0 0 0 6px rgba(var(--bs-primary-rgb), 0.25);
}

/* Completed state */
.stepper-item.completed::before {
  content: "✓";
  background: var(--bs-success);
  color: white;
  box-shadow: 0 0 0 4px var(--bs-body-bg, white);
}

/* Completed connecting lines */
.stepper-item.completed:not(:last-child)::after {
  background: var(--bs-success);
}

/* Disabled state */
.stepper-item.disabled {
  opacity: 0.6;
}

/* Step titles */
.stepper-title {
  font-size: 0.8125rem; /* Slightly smaller */
  font-weight: 500;
  color: #6c757d;
  margin: 0;
  line-height: 1.2;
}

.stepper-item.active .stepper-title {
  color: var(--bs-primary);
  font-weight: 600;
}

.stepper-item.completed .stepper-title {
  color: #212529;
}

/* Mobile responsive design */
@media (max-width: 768px) {
  .stepper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .stepper-item {
    text-align: left;
    margin-bottom: 2rem;
    padding-left: 60px;
  }
  
  .stepper-item::before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
  
  .stepper-item:not(:last-child)::after {
    top: 40px;
    left: 20px;
    width: 2px;
    height: calc(100% + 2rem);
  }
  
  .stepper-title {
    display: inline-block;
    margin-top: 0.5rem;
  }

/*--------------------------------------------------------------
# Admin Panel Animation Suppression
--------------------------------------------------------------*/
/* Suppress animations on admin panel page loads to prevent distracting fade effects */
.admin-panel-layout * {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* Remove transitions from admin panel headers during page load */
.admin-panel-container .header {
  transition: none;
}

/* Remove transitions from tab content during load */
.admin-panel-tab {
  transition: none !important;
}

/* Admin panel navigation styling and overflow handling */
.admin-panel-nav a {
  transition: background-color 0.2s, color 0.2s !important;
}

/* Navigation button overflow fix */
.admin-panel-nav .nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 1rem); /* Leave room for margins */
  /* Reduced padding for better fit */
  padding: 0.5rem 0.75rem !important;
  /* Add horizontal margins for visual breathing room */
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  /* Slightly smaller font for better fit */
  font-size: 0.875rem;
}

/* Adjust the gray box container for better button containment */
.admin-panel-nav .d-flex.flex-column.p-3 {
  /* Slightly reduce padding to give more room for buttons */
  padding: 0.75rem !important;
}

/* Ensure nav pills container doesn't add extra spacing */
.admin-panel-nav .nav-pills {
  gap: 0.25rem;
}

/* Override Bootstrap utility classes for nav pills in admin panel */
/* Using stronger specificity to override Bootstrap utility classes with !important */
.admin-panel-nav #v-tabs-tab.nav-pills .nav-link,
.admin-panel-nav #v-tabs-tab .nav-link.ps-3.pe-4.py-2.my-1 {
  /* MINIMAL padding as requested */
  padding-left: 0.375rem !important;  /* 6px - minimal left padding */
  padding-right: 0.5rem !important;   /* 8px - minimal right padding */
  padding-top: 0.375rem !important;   /* 6px - minimal top padding */
  padding-bottom: 0.375rem !important;/* 6px - minimal bottom padding */
  /* Minimal margins */
  margin-top: 0.125rem !important;    /* 2px */
  margin-bottom: 0.125rem !important; /* 2px */
  margin-left: 0 !important;          /* No left margin */
  margin-right: 0 !important;         /* No right margin */
  /* Smaller font for better fit */
  font-size: 0.75rem !important;      /* 12px - smaller font */
  /* Handle text overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensure consistent width */
  width: 100%;
  display: flex;
  align-items: center;
}

/* Reduce gray box padding to give more room */
.admin-panel-nav .d-flex.flex-column.p-3 {
  /* Override Bootstrap p-3 with minimal padding */
  padding: 0.5rem !important; /* 8px all around instead of 16px */
}

/* Ensure icons in nav pills are also smaller */
.admin-panel-nav #v-tabs-tab.nav-pills .nav-link i,
.admin-panel-nav #v-tabs-tab .nav-link i.bi {
  flex-shrink: 0;
  margin-right: 0.25rem !important; /* 4px - minimal spacing */
  font-size: 0.75rem !important;    /* 12px - match text size */
}

/* Ensure icons don't shrink */
.admin-panel-nav .nav-link i {
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* Add tooltip for truncated text */
.admin-panel-nav .nav-link[title] {
  cursor: help;
}

/* Responsive font sizing for narrow panes - now already 0.875rem by default */
@media (min-width: 992px) and (max-width: 1200px) {
  .admin-panel-nav .nav-link {
    font-size: 0.8125rem; /* Even smaller on medium screens */
  }
}

/*--------------------------------------------------------------
# Accessibility - Reduced Motion Support
--------------------------------------------------------------*/
/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Ensure critical visual feedback still works */
  button:hover,
  a:hover,
  .nav-link:hover {
    transition-duration: 0.1s !important;
  }
}
}/*# sourceMappingURL=main.css.map */