:root {
  --main-color: #E20A17;
  --primary-color: #003399;
  --light-gray-color: #E6EAED;
  --light-blue: hwb(0 100% 0%);
}

button {
  background-color: var(--primary-color);
  /* Blue button */
  color: #fff;
}

.tx-main {
  color: var(--main-color);
}

.bg-light-blue {
  background: var(--light-blue);
}

.bg-main {
  background: var(--main-color);
}

.tx-theme {
  color: var(--primary-color);
}

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

.require-feild {
  border-left: 3px solid var(--main-color) !important;
}

/* ===== Main Color Button (Red) ===== */
.btn-main {
  background-color: var(--main-color);
  /* Red background */
  color: #fff;
  /* White text */
  border: 2px solid var(--main-color);
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover Effect - White Background, Red Text */
.btn-main:hover {
  background-color: #fff;
  color: var(--main-color);
  border-color: var(--main-color);
}

/* ===== Primary Color Button (Blue) ===== */
.btn-primary {
  background-color: var(--primary-color);
  /* Blue background */
  color: #fff;
  /* White text */
  border: 2px solid var(--primary-color);
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover Effect - White Background, Blue Text */
.btn-primary:hover {
  background-color: #fff;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.border-bottom {
  border-bottom: 1px solid var(--light-gray-color);
}

/* Bottom Button Group */
.sign-up .bottom-btn-group {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 50%;
  border-top: 1px solid #ddd;
  background: #fff;
  padding: 10px;
  gap: 5px;
}

/* Individual Buttons */
.sign-up .bottom-btn-group button {
  flex: 1;
  /* Each button takes 50% width */
  padding: 1rem;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: 0.3s ease;
  font-weight: bold;
}

/* Left Button (Cancel) */
.sign-up .bottom-btn-group .btn-left {
  background-color: var(--main-color);
  /* Red */
  color: #fff;
  border-radius: 7px 0 0 7px;
}

/* Right Button (Submit) */
.sign-up .bottom-btn-group .btn-right {
  background-color: var(--primary-color);
  /* Blue */
  color: #fff;
  border-radius: 0 7px 7px 0;

}

/* Style for heading link */
.sign-up .heading-link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  /* Thicker underline for better visibility */
  text-underline-offset: 6px;
  /* Space between text and underline */
  color: #fff;
  font-weight: 600;
}

.bd-5px {
  border: 5px solid var(--primary-color);
  border-radius: 7px;

}


/* Hover Effects */
.sign-up .bottom-btn-group .btn-left:hover {
  background-color: var(--primary-color);
}

.sign-up .bottom-btn-group .btn-right:hover {
  background-color: var(--main-color);
}

/* ===== Base Width Classes ===== */
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

/* ===== Responsive Width Breakpoints ===== */
/* Small Devices (≥576px) */
@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}

/* Medium Devices (≥768px) */
@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }
}

/* Large Devices (≥992px) */
@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }
}

/* Extra Large Devices (≥1200px) */
@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important;
  }

  .w-xl-50 {
    width: 50% !important;
  }

  .w-xl-75 {
    width: 75% !important;
  }

  .w-xl-100 {
    width: 100% !important;
  }
}

/* Extra Extra Large Devices (≥1400px) */
@media (min-width: 1400px) {
  .w-xxl-25 {
    width: 25% !important;
  }

  .w-xxl-50 {
    width: 50% !important;
  }

  .w-xxl-75 {
    width: 75% !important;
  }

  .w-xxl-100 {
    width: 100% !important;
  }
}

.login-wrapper img {
  width: 250px;
}

/* Make the company list scrollable inside the sign-up container */
/* Scrollable list container */
.sign-up .company-list {
  max-height: 40vh;
  /* Controls scroll area */
  overflow-y: auto;
  overflow-x: hidden;

  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  margin: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* Scrollbar styling */
.sign-up .company-list::-webkit-scrollbar {
  width: 6px;
}

.sign-up .company-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.sign-up .company-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Sticky header row */
.sign-up .company-header {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  font-size: 15px;
  color: #333;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  /* Keep above list items */
}

/* Company items */
.sign-up .company-item {
  color: #000;
  /* Black text */
  border-bottom: 1px dotted #bbb;
  transition: all 0.3s ease;
  cursor: pointer;
}

.sign-up .company-item div {
  font-size: 14px;
}

/* Hover effect for list */
.sign-up .company-item:hover {
  background: #f1f8ff;
  transform: translateX(4px);
}

/* Remove border for last item */
.sign-up .company-item:last-child {
  border-bottom: none;
}

/* Date Styling */
.sign-up .company-item p {
  margin: 0;
  font-size: 13px;
  color: black;
  font-weight: 500;
}

/* Alternate row background colors */
.sign-up .company-item:nth-child(odd) {
  background-color: rgb(238, 236, 236);
  /* Light beige background */
}

.sign-up .company-item:nth-child(even) {
  background-color: #fff;
  /* White background */
}

/* Remove default list dots */
.sidebar-menu ul li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* Tree-style submenu alignment */
.submenu ul li {
  position: relative;
  padding-left: 30px;
  /* space for vertical line and horizontal line */
}

/* Horizontal connector (-) */
.submenu ul li .submenu-line {
  position: absolute;
  left: 20px;
  /* aligns center with vertical line */
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 1px;
  background: #cbd5e1;
  /* soft gray */
}

/* Vertical connector (|) */
.submenu ul li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 1px;
  height: 100%;
  background: #cbd5e1;
  /* soft gray */
}

/* Stop vertical line at last child */
.submenu ul li:last-child::before {
  height: 50%;
}

/* Submenu link styling */
.submenu ul li a {
  display: inline-block;
  color: #e5e7eb;
  font-size: 14px;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.submenu ul li a:hover {
  color: #ffffff;
}

/* Fixed card height */
.sales-card {
  height: 420px;
  /* Adjust based on your UI needs */
  display: flex;
  flex-direction: column;
}

/* Make only inner data scroll */
.sales-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0.75rem;
}

/* Scrollable area for rows */
.sales-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Custom scrollbar styling */
.sales-scroll::-webkit-scrollbar {
  width: 3px;
}

.sales-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.sales-scroll::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Ellipsis for long text */
.sales-row .col-4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Amount column always fully visible */
.sales-row .col-4:last-child {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.bg-lightgray {
  background: #E6EAED;

}

.card .card-body {
  padding: 0.75rem;
}

.thead-light tr th {
  background: var(--light-gray-color) !important;
}

/* Fixed card height */
.team-leader-card {
  height: 420px;
  /* Adjust height as per your UI */
  display: flex;
  flex-direction: column;
}

/* Ensure body and scroll separation */
.team-leader-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem;
  overflow: hidden;
}

/* Scrollable content area */
.team-leader-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
}

/* Custom scrollbar */
.team-leader-scroll::-webkit-scrollbar {
  width: 6px;
}

.team-leader-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.team-leader-scroll::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Ellipsis for long text */
.team-leader-row .col-3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Styling */
.workshop-card {
  overflow: hidden;
  background-color: #fff;
}

.workshop-card .card-header {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 12px 16px;
}

.workshop-card .card-header h5 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.custom-table thead {
  background: #f1f5f9;
}

.custom-table th {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: #495057;
}

.custom-table td {
  font-size: 14px;
  vertical-align: middle;
}

.custom-table tfoot td {
  background: #e9ecef;
  font-weight: bold;
}

/* Switch Styling */
.card-footer .form-check-input {
  width: 40px;
  height: 20px;
  cursor: pointer;
}

.card-footer .form-check-label {
  font-size: 14px;
  margin-left: 4px;
}

/* Color Variations for Switches */
.hot-switch:checked {
  background-color: #007bff;
}

.warm-switch:checked {
  background-color: #fd7e14;
}

.cold-switch:checked {
  background-color: #20c997;
}

.booked-switch:checked {
  background-color: #ffc107;
}

.retailed-switch:checked {
  background-color: #6f42c1;
}

.lost-switch:checked {
  background-color: #dc3545;
}

.postponed-switch:checked {
  background-color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
  .card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Modern Form Styling */
.modern-form-card {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 20px 0 15px;
  color: #333;
  border-bottom: 2px solid #0d6efd;
  display: inline-block;
  padding-bottom: 4px;
}

.form-label {
  font-weight: 500;
  font-size: 14px;
}

.form-control,
.form-select {
  border-radius: 6px;
  box-shadow: none;
  border: 1px solid #ced4da;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.btn-primary {
  border-radius: 6px;
  font-weight: 500;
}

.btn-secondary {
  border-radius: 6px;
  font-weight: 500;
  background: #6c757d;
  border: none;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 16px;
  }
}

.card .card-header {
  background: var(--primary-color);
  color: white;
}

.card .card-title {
  color: white;

}

/* Card Styling */
.create-com .modern-form-card {
  border-radius: 12px;
  overflow: hidden;
}

/* Section Title */
.create-com .section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 15px 0 10px;
  color: var(--primary-color);
  padding-bottom: 5px;
}

/* Dark Border Inputs */
.dark-border {
  border: 1.5px solid #333;
  box-shadow: none !important;
}

.dark-border:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2) !important;
}

/* Calendar Icon */
.create-com .input-group-text.calendar-icon {
  background-color: #f8f9fa;
  border: 1.5px solid #333;
  border-left: 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.create-com .input-group-text.calendar-icon:hover {
  background-color: #e9ecef;
}

/* Labels */
.create-com .form-label {
  font-weight: 700;
  color: #222;
}

/* Responsive */
@media (max-width: 992px) {
  .create-com .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Parent class for purchase entry page */
.purchase-entry {
  background: #fff;
  font-family: 'Inter', sans-serif;
  padding: 20px;
}

.purchase-entry .section-title {
  background: #f7f9fc;
  font-weight: 700;
  font-size: 18px;
  border-bottom: 2px solid #003399;
  color: #003399;
  border-radius: 6px 6px 0 0;
}

/* Labels */
.purchase-entry .form-label {
  font-weight: 600;
  color: #333;
}

/* Inputs and selects */
.purchase-entry .form-control,
.purchase-entry .form-select {
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

/* Calendar icon */
.purchase-entry .calendar-icon {
  background: #f7f9fc;
  border: 1px solid #333;
  border-left: none;
  cursor: pointer;
}

/* Table styling */
.purchase-entry table {
  border: 1px solid #ccc;
  font-size: 14px;
}

.purchase-entry table thead {
  background: #f7f9fc;
}

/* Buttons */
.purchase-entry .btn-primary {
  background: #003399;
  border: none;
}

.purchase-entry .btn-primary:hover {
  background: #1a47b8;
}

.purchase-entry .btn-secondary {
  border: 1px solid #333;
  background: #fff;
  color: white;
}

.purchase-entry .btn-secondary:hover {
  background: #f0f0f0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .purchase-entry .section-title {
    font-size: 16px;
    text-align: center;
  }

  .purchase-entry table {
    font-size: 12px;
  }
}

.purchase-entry .btn-outline-primary {
  border: 1px solid #333;
  background: #f8f9fa;
}

.purchase-entry .btn-outline-primary:hover {
  background: #003399;
  color: #fff;
  border-color: #003399;
}

.purchase-entry .form-select-sm {
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.purchase-entry table thead th {
  vertical-align: middle;
  text-align: center;
  background-color: #f8f9fa;
  font-weight: 600;
}

.purchase-entry table td,
.purchase-entry table th {
  text-align: center;
  white-space: nowrap;
}

.purchase-entry .btn-success {
  background-color: #28a745;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.purchase-entry .btn-success:hover {
  background-color: #218838;
}

@media (max-width: 768px) {
  .purchase-entry table {
    font-size: 12px;
  }

  .purchase-entry .form-select-sm {
    font-size: 12px;
    padding: 3px 5px;
  }

  .purchase-entry table thead th select {
    min-width: 100px;
  }
}

/* Modal Custom UI */
#vehicleModal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#vehicleModal .modal-header {
  border-bottom: 2px solid #003399;
}

#vehicleModal .form-control {
  border: 1px solid #003399;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#vehicleModal .form-control:focus {
  border-color: #001a66;
  box-shadow: 0 0 5px rgba(0, 51, 153, 0.5);
}

#vehicleModal .form-label {
  font-weight: bold;
  color: #003399;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  #vehicleModal .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.modal-title {
  color: white;
}

.modal-title i {
  color: white;
}

/* Scrollable table container */
.custom-table-container {
  max-height: 400px;
  /* Show approx 10 rows */
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

/* Sticky header */
.custom-thead {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* GST input field styling */
.gst-input {
  width: 80px;
  text-align: center;
}

/* Action button column */
.action-col {
  width: 60px;
}

/* Table cells */
.custom-table th,
.custom-table td {
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}

.flex-row {
  flex-direction: row !important;
}

@media (max-width: 768px) {
  .workshop-card .card-footer {
    flex-direction: row !important;
  }
}

/* Table Container */

/* Table Header */
.custom-table thead th {
  background-color: #f8f9fa;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  vertical-align: middle;
}

/* Filter Row Styling */
.filter-row td {
  background: #fff;
  padding: 6px;
}

.filter-row .form-control,
.filter-row .form-select {
  font-size: 0.85rem;
  padding: 4px 6px;
}

/* Remove number input arrows */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner {
  -moz-appearance: textfield;
}

/* Scroll Bar Styling */
.custom-table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.custom-table-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

.custom-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.pd-20 {
  padding: 20px;
}

.modal-header {
  background: var(--primary-color);
  color: white;
}

.modal-header h4 {
  color: white;
}

.close.bg-danger span {
  margin-bottom: 3px;
}

.category-item .radio-tabs {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: max-content;
  background: #f0f0f0;
}

.category-item .radio-tabs input[type="radio"] {
  display: none;
}

.category-item .radio-tabs label {
  position: relative;
  padding: 10px;
  cursor: pointer;
  background-color: #ffffff;
  color: #333;
  transition: all 0.4s ease;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
}

.category-item .radio-tabs label::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #ddd;
  transform: skewX(-20deg);
  transition: all 0.3s;
}

.category-item .radio-tabs label:first-child::before {
  display: none;
}

.category-item .radio-tabs input[type="radio"]:checked+label {
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
  box-shadow: inset 0 -4px 10px rgba(0, 0, 0, 0.15);
}

.category-item .radio-tabs label:hover {
  background: #f1f1f1;
  color: #ff5f6d;
  transform: translateY(-2px);
}

.category-item .radio-tabs label:not(:last-child) {
  border-right: none;
  /* removed plain border to use skew cross effect */
}


.modern-card {
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.modern-table th {
  background: #f7f8fa;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px;
}

.modern-table td {
  padding: 14px;
  vertical-align: top;
  border-top: 1px solid #eee;
}

.full-name .info-line {
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mvc-info div,
.purchase-info div {
  font-size: 13px;
  margin-bottom: 4px;
}

.btn-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.btn-pill {
  background: #0ea5e9;
  border: none;
  color: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-pill:hover {
  background: #0284c7;
}

.icon-btns {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}

.icon-btn {
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  transition: 0.3s;
}

.icon-btn.green {
  background: #22c55e;
}

.icon-btn.red {
  background: #ef4444;
}

.icon-btn.orange {
  background: #f59e0b;
}

.icon-btn.blue {
  background: #0ea5e9;
}

.icon-btn.pink {
  background: #d946ef;
}

.badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  display: inline-block;
}

.badge.orange {
  background: #f59e0b;
}

.badge.red {
  background: #ef4444;
}

.badge.green {
  background: #22c55e;
}

.badge.blue {
  background: #0ea5e9;
}

.action-btns {
  display: flex;
  gap: 8px;
}

@media (max-width: 992px) {
  .modern-table {
    font-size: 12px;
  }

  .btn-pill {
    padding: 5px 10px;
    font-size: 11px;
  }

  .icon-btn {
    width: 28px;
    height: 28px;
  }
}

/* Step 1 Modal */
#stepModal1 {
  bottom: auto;
  height: auto !important;
}

/* Step 2 Modal */
#stepModal2 {
  bottom: auto;
  height: auto !important;
}

/* Step 3 Modal */
#stepModal3 {
  bottom: auto;
  height: auto !important;
}

/* Step 4 Modal */
#stepModal4 {
  bottom: auto;
  height: auto !important;
}

/* Step 5 Modal */
#stepModal5 {
  bottom: auto;
  height: auto !important;
}

/* Step 6 Modal */
#stepModal6 {
  bottom: auto;
  height: auto !important;
}

/* Table General */
.modern-table th,
.modern-table td {
  padding: 12px;
  vertical-align: middle;
}

/* Action Column */
.action-col {
  width: 100px;
  text-align: center;
}

/* Button Styling */
.btn-column .btn {
  width: 120px;
  font-size: 13px;
  border-radius: 20px;
  border: 1px solid #ccc;
}

/* Fix for equal row height */
.modern-table td,
.modern-table th {
  white-space: nowrap;
}

/* Status Badges */
.badge {
  font-size: 12px;
  padding: 5px 8px;
}

.btn-flex {
  flex-direction: column;
  display: flex;
  gap: 5px;
}

/* Style for label */
.status-label {
  min-width: 80px;
  /* Keeps all labels aligned */
  font-weight: 600;
  font-size: 14px;
  color: #333;
  display: inline-block;
}

/* Status row spacing */
.status-row {
  display: flex;
  align-items: center;
  gap: 0px;
  /* Space between label and badge */
}

/* Badge styling for consistency */
.status-row .badge {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 12px;
}

/* Basic Timeline Styling */
.timeline {
  position: relative;
  padding: 15px 0 0 0;
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  /* Adjust to align with dots */
  width: 2.5px;
  background-color: #dee2e6;
  /* Light gray line */
  z-index: 0;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 40px;
  /* Space for the dot and line */
}

.timeline-dot {
  position: absolute;
  top: 5px;
  /* Adjust vertical position */
  left: 8px;
  /* Align with the vertical line */
  width: 16px;
  height: 16px;
  background-color: var(--primary-color);
  /* Bootstrap primary blue */
  border-radius: 50%;
  border: 2px solid #fff;
  /* White border to make it stand out */
  z-index: 1;
}

.timeline-content {
  background-color: #f8f9fa;
  /* Light background for the cards */
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  /* Bootstrap default border-radius */
  padding: 15px;
  position: relative;
}

/* Optional: Adjust for smaller screens if needed */
@media (max-width: 767.98px) {
  .timeline::before {
    left: 10px;
  }

  .timeline-item {
    padding-left: 30px;
  }

  .timeline-dot {
    left: 3px;
  }
}

.modal-body .nav-tabs .nav-link.active {
  border: none;
  border-bottom: 3px solid var(--primary-color);
  border-radius: 0;
}

/* Dropdown styling */
.custom-dropdown-menu {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ccc;
  font-size: 14px;
  padding: 0;
}

/* Header for two columns */
.custom-dropdown-menu .dropdown-header {
  background: #f1f1f1;
  padding: 6px 12px;
  border-bottom: 1px solid #ccc;
}

/* Items in two-column format */
.custom-dropdown-menu .dropdown-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid #eee;
}

.custom-dropdown-menu .dropdown-item:hover {
  background: #f8f9fa;
}

.custom-dropdown-menu .dropdown-item span:first-child {
  text-align: left;
}

.custom-dropdown-menu .dropdown-item span:last-child {
  text-align: right;
  font-weight: 500;
  color: #555;
}

/* Main button styling */
.dark-border {
  border: 1px solid #495057;
  background-color: #fff;
}

.task-history .timeline::before {
  width: 0;
}

.form-control.flatpickr-time {
  padding: 18px;
}

.border-right {
  border-right: 1px solid gray;
}

.fs-14 {
  font-size: 14px;
}

.pd-plus {
  padding: 0 12px !important;
}

.nav-tabs .nav-link.active {
  border: none;
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 0;
}

.capsule-group input[type="radio"] {
  display: none;
}

/* Capsule group container */
.capsule-group {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}

/* Capsule labels */
.capsule-group label {
  padding: 5px 25px;
  cursor: pointer;
  font-weight: 500;
  background-color: #f9f9f9;
  color: #333;
  border-right: 1px solid #ccc;
  transition: all 0.3s ease;
}

/* Remove right border for last capsule */
.capsule-group label:last-child {
  border-right: none;
}

/* Hover effect */
.capsule-group label:hover {
  background-color: var(--main-color);
  color: #fff;
}

/* Active (checked) state */
.capsule-group input[type="radio"]:checked+label {
  background-color: var(--main-color);
  color: #fff;
}

.balance-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.balance-header {
  background: var(--primary-color);
  color: white;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 8px 8px 0 0;
}

.balance-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 15px;
}

.balance-footer {
  border-top: 1px solid #ddd;
  padding: 10px 15px;
  background: #f8f9fa;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.balance-title {
  color: white;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0;
}

.sub-title {
  color: var(--main-color);
  font-weight: 600;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 4px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.item-name {
  color: #000;
}

.item-amount {
  font-weight: 600;
  color: #000;
}

.balance-footer span {
  font-weight: 700;
  color: #000;
}

/* Scrollbar styling (optional) */
.balance-body::-webkit-scrollbar {
  width: 6px;
}

.balance-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.balance-body::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* === Global Loader Styles === */
#global-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loader wrapper */
.loader-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
}

/* Rotating circular border */
.loader-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #e0e0e0;
  border-top-color: #E20A17;
  /* red accent */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Centered logo/image */
.loader-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Rotation animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.form-control {
  border-left: 3px solid var(--main-color) !important;
}

.btn-flex .btn {
  width: 120px;
}

.sidebar-contact {
  display: none;
}

.jobcard-page .section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.jobcard-page .client-vehicle-box {
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background: #f9fbff;
}

.jobcard-page .info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #e2e2e2;
}

.jobcard-page .info-row label {
  font-weight: 600;
  color: var(--primary-color);
}

.jobcard-page .info-row span {
  font-weight: 500;
}

.jobcard-page .img-upload-box {
  width: 100%;
  height: 130px;
  border: 2px dashed var(--primary-color);
  border-radius: 10px;
  background: #f3f7ff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  color: var(--main-color);
  transition: 0.3s;
}

.jobcard-page .img-upload-box:hover {
  background: #e7efff;
  border-color: var(--main-color);
  color: var(--main-color);
}

.jobcard-page .img-upload-box i {
  font-size: 26px;
  color: inherit;
}

.jobcard-page label {
  font-weight: 600;
}

.img-upload-box {
  border: 1px solid #aaa;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
}

.client-vehicle-box {
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background: #f9fbff;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #e2e2e2;
}

/* RIGHT BORDER ONLY */
.lead-col {
  position: relative;
}

.lead-col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #dee2e6; /* Bootstrap border color */
}

/* Bullet container */
.lead-item {
  min-height: 60px;
}

/* Bullet styles */
.lead-bullet {
  position: relative;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-bullet .dot {
  width: 16px;
  height: 16px;
  background-color: #ff7a00;
  border-radius: 50%;
  z-index: 2;
}

.lead-bullet .line {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 55px;
  border-left: 2px dashed #ff7a00;
  transform: translate(-50%, -50%);
}

/* =========================================
   AUTOBOOK MARKETING PAGE CSS
========================================= */

.autobook-marketing-page {
  padding: 24px;
  background: #f4f7fb;
}

/* Header */
.autobook-marketing-page .abm-top-header {
  background: #003399;
  border-radius: 24px;
  padding: 45px;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
}

.autobook-marketing-page .abm-top-header::before {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  top: -120px;
  right: -120px;
}

.autobook-marketing-page .abm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  padding: 10px 16px;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
}

.autobook-marketing-page .abm-header-content h2 {
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 18px;
}

.autobook-marketing-page .abm-header-content p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  max-width: 650px;
  margin-bottom: 30px;
}

.autobook-marketing-page .abm-header-btns {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.autobook-marketing-page .abm-btn-primary {
  background: #fff;
  color: #111;
  border-radius: 14px;
  padding: 14px 24px;
  font-weight: 600;
  transition: 0.4s;
}

.autobook-marketing-page .abm-btn-primary:hover {
  transform: translateY(-4px);
}

.autobook-marketing-page .abm-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 14px;
  padding: 14px 24px;
  transition: 0.4s;
}

.autobook-marketing-page .abm-btn-outline:hover {
  background: #fff;
  color: #111;
}

/* Stats */
.autobook-marketing-page .abm-stats-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 25px;
}

.autobook-marketing-page .abm-stat-box {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.autobook-marketing-page .abm-stat-box:last-child {
  margin-bottom: 0;
}

.autobook-marketing-page .abm-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #003399, #60a5fa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

.autobook-marketing-page .abm-icon.purple {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.autobook-marketing-page .abm-icon.orange {
  background: linear-gradient(135deg, #ea580c, #fb923c);
}

.autobook-marketing-page .abm-stat-box h4 {
  color: #fff;
  margin-bottom: 3px;
}

.autobook-marketing-page .abm-stat-box p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Feature Card */
.autobook-marketing-page .abm-feature-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px;
  margin-bottom: 24px;
  transition: 0.4s;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.autobook-marketing-page .abm-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.autobook-marketing-page .abm-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  margin-bottom: 24px;
}

.autobook-marketing-page .gradient-1 {
  background: linear-gradient(135deg, #ec4899, #f97316);
}

.autobook-marketing-page .gradient-2 {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
}

.autobook-marketing-page .gradient-3 {
  background: linear-gradient(135deg, #14b8a6, #06b6d4);
}

.autobook-marketing-page .gradient-4 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.autobook-marketing-page .abm-feature-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.autobook-marketing-page .abm-feature-card p {
  color: #64748b;
  margin-bottom: 22px;
}

.autobook-marketing-page .abm-card-btn {
  color: #003399;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.autobook-marketing-page .abm-card-btn:hover {
  letter-spacing: 0.5px;
}

/* Quick Section */
.autobook-marketing-page .abm-quick-section {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  margin-top: 15px;
  margin-bottom: 30px;
}

.autobook-marketing-page .abm-small-title {
  color: #003399;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
}

.autobook-marketing-page .abm-quick-content h3 {
  font-size: 34px;
  font-weight: 800;
  margin: 16px 0 30px;
}

.autobook-marketing-page .abm-step-card {
  background: #f8fafc;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  transition: 0.4s;
  margin-bottom: 20px;
}

.autobook-marketing-page .abm-step-card:hover {
  transform: translateY(-6px);
  background: #eff6ff;
}

.autobook-marketing-page .abm-step-card span {
  width: 50px;
  height: 50px;
  background: #003399;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-weight: 700;
}

.autobook-marketing-page .abm-preview-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

.autobook-marketing-page .abm-preview-card img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: 0.5s;
}

.autobook-marketing-page .abm-preview-card:hover img {
  transform: scale(1.08);
}

.autobook-marketing-page .abm-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 30px;
  color: #fff;
}

/* Templates */
.autobook-marketing-page .abm-template-section {
  margin-top: 10px;
}

.autobook-marketing-page .abm-section-title {
  font-size: 30px;
  font-weight: 800;
}

.autobook-marketing-page .abm-section-subtitle {
  color: #64748b;
}

.autobook-marketing-page .abm-view-all {
  text-decoration: none;
  font-weight: 600;
  color: #003399;
}

.autobook-marketing-page .abm-template-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  transition: 0.4s;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.autobook-marketing-page .abm-template-card:hover {
  transform: translateY(-8px);
}

.autobook-marketing-page .abm-template-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.autobook-marketing-page .abm-template-content {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.autobook-marketing-page .abm-template-content h5 {
  margin-bottom: 4px;
  font-weight: 700;
}

.autobook-marketing-page .abm-template-content span {
  color: #64748b;
  font-size: 14px;
}

.autobook-marketing-page .abm-template-btn {
  background: #003399;
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.3s;
}

.autobook-marketing-page .abm-template-btn:hover {
  background: #1d4ed8;
}

/* Responsive */
@media(max-width:991px) {

  .autobook-marketing-page .abm-top-header {
    padding: 30px;
  }

  .autobook-marketing-page .abm-header-content h2 {
    font-size: 30px;
  }

  .autobook-marketing-page .abm-quick-content h3 {
    font-size: 28px;
  }

  .autobook-marketing-page .abm-preview-card {
    margin-top: 25px;
  }

}

@media(max-width:767px) {

  .autobook-marketing-page {
    padding: 15px;
  }

  .autobook-marketing-page .abm-top-header,
  .autobook-marketing-page .abm-quick-section {
    padding: 22px;
  }

  .autobook-marketing-page .abm-header-content h2 {
    font-size: 24px;
  }

  .autobook-marketing-page .abm-section-title {
    font-size: 24px;
  }

  .autobook-marketing-page .abm-template-content {
    flex-direction: column;
    align-items: start;
    gap: 15px;
  }

}


h2.section-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: #222;
  margin: 40px 0 16px;
  padding-left: 10px;
  border-left: 5px solid #e60012;
}

.cust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.col-card {
  flex: 1 1 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  min-width: 280px;
}

/* ================================================================
   ORIGINAL MARKETING CARD CSS — UNCHANGED
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&family=Poppins:wght@400;600;700;800;900&display=swap');

.suzuki-marketing-card {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  margin: 20px auto;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)),
    url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80');
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  font-family: 'Poppins', sans-serif;
}

.suzuki-marketing-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.suzuki-marketing-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.suzuki-marketing-card .top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 0;
}

.suzuki-marketing-card .date-badge {
  background-color: #ffffff;
  color: #000000;
  font-weight: 900;
  font-size: 1.2rem;
  padding: 8px 24px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.08);
}

.suzuki-marketing-card .brand-logo {
  height: 40px;
  width: auto;
}

.suzuki-marketing-card .main-content {
  text-align: center;
  padding: 0 40px;
  margin-top: -60px;
}

.suzuki-marketing-card .main-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 5.8rem;
  color: #1e4620;
  line-height: 0.95;
  font-weight: 600;
}

.suzuki-marketing-card .sub-title {
  font-size: 2.4rem;
  font-weight: 900;
  color: #0b3c5d;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin: 4px 0 14px 0;
}

.suzuki-marketing-card .tagline {
  font-size: 1.05rem;
  color: #111111;
  font-weight: 600;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.4;
}

.suzuki-marketing-card .footer-branding {
  display: flex;
  width: 100%;
  height: 65px;
  position: relative;
  background: transparent;
  overflow: hidden;
}

.suzuki-marketing-card .right-section {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #00478f;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 5px 0 0;
  gap: 4px;
  z-index: 1;
}

.suzuki-marketing-card .white-content-polygon {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 31%;
  background-color: #ffffff;
  margin-left: 10px;
  transform: skew(-20deg);
  z-index: 2;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.suzuki-marketing-card .unskew-content {
  transform: skew(20deg);
}

.suzuki-marketing-card .dealer-info {
  margin-top: -4px;
}

.suzuki-marketing-card .dealer-name {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.suzuki-marketing-card .dealer-name .red-text {
  color: #e60012;
}

.suzuki-marketing-card .dealer-name .blue-text {
  color: #003366;
}

.suzuki-marketing-card .web-link-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.suzuki-marketing-card .globe-icon {
  width: 14px;
  height: 14px;
  color: #003366;
  flex-shrink: 0;
}

.suzuki-marketing-card .dealer-link {
  font-size: 7px;
  color: #003366;
  text-decoration: none;
  font-weight: 700;
}

.suzuki-marketing-card .location-details {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  margin-right: 6px;
}

.suzuki-marketing-card .city {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.suzuki-marketing-card .address {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.95;
  letter-spacing: 0.2px;
}

.suzuki-marketing-card .contact-phone {
  background: #e60012;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(230, 18, 20, 0.24);
  text-decoration: none;
}

.suzuki-marketing-card .contact-phone svg {
  width: 14px;
  height: 14px;
}

.suzuki-marketing-card .premium-logo-wrapper {
  background: #ffffff;
  height: 56px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 4px;
}

.suzuki-marketing-card .premium-logo-wrapper img {
  height: 24px;
  width: auto;
}

.suzuki-marketing-card .premium-logo-wrapper span {
  font-size: 0.32rem;
  font-weight: 900;
  color: #000000;
  text-align: center;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}


/* ================================================================
   CONGRATULATIONS CARDS — NEW UNIQUE CSS
   ================================================================ */

/* --- Shared congrats card base --- */
.congrats-card {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  margin: 20px auto;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  font-family: 'Poppins', sans-serif;
}

.congrats-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.congrats-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* TOP HEADER (unchanged from marketing) */
.congrats-card .top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 0;
  position: relative;
  z-index: 10;
}

.congrats-card .date-badge {
  background-color: #ffffff;
  color: #000000;
  font-weight: 900;
  font-size: 1.2rem;
  padding: 8px 24px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.08);
}

.congrats-card .brand-logo {
  height: 40px;
  width: auto;
}

/* BOTTOM FOOTER (unchanged from marketing) */
.congrats-card .footer-branding {
  display: flex;
  width: 100%;
  height: 65px;
  position: relative;
  background: transparent;
  overflow: hidden;
  z-index: 10;
}

.congrats-card .right-section {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #00478f;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 5px 0 0;
  gap: 4px;
  z-index: 1;
}

.congrats-card .white-content-polygon {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 31%;
  background-color: #ffffff;
  margin-left: 10px;
  transform: skew(-20deg);
  z-index: 2;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.congrats-card .unskew-content {
  transform: skew(20deg);
}

.congrats-card .dealer-info {
  margin-top: -4px;
}

.congrats-card .dealer-name {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.congrats-card .dealer-name .red-text {
  color: #e60012;
}

.congrats-card .dealer-name .blue-text {
  color: #003366;
}

.congrats-card .web-link-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.congrats-card .globe-icon {
  width: 14px;
  height: 14px;
  color: #003366;
  flex-shrink: 0;
}

.congrats-card .dealer-link {
  font-size: 7px;
  color: #003366;
  text-decoration: none;
  font-weight: 700;
}

.congrats-card .location-details {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  margin-right: 6px;
}

.congrats-card .city {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.congrats-card .address {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.95;
  letter-spacing: 0.2px;
}

.congrats-card .contact-phone {
  background: #e60012;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(230, 18, 20, 0.24);
  text-decoration: none;
}

.congrats-card .contact-phone svg {
  width: 14px;
  height: 14px;
}

.congrats-card .premium-logo-wrapper {
  background: #ffffff;
  height: 56px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 4px;
}

.congrats-card .premium-logo-wrapper img {
  height: 24px;
  width: auto;
}

.congrats-card .premium-logo-wrapper span {
  font-size: 0.32rem;
  font-weight: 900;
  color: #000000;
  text-align: center;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}

/* ---- CONGRATS CARD 1 — Gold Ribbon Luxury ---- */
.congrats-c1 {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1200 40%, #2d1f00 70%, #0a0a0a 100%);
}

.congrats-c1 .congrats-bg-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.congrats-c1 .congrats-bg-orbs::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.congrats-c1 .congrats-bg-orbs::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
  bottom: 25%;
  left: 20%;
  border-radius: 50%;
}

/* Curved SVG arch for text */
.congrats-c1 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -30px;
}

.congrats-c1 .curve-text-svg {
  width: 90%;
  max-width: 320px;
  height: auto;
}

.congrats-c1 .congrats-word {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, #f5e642, #d4af37, #c8960c, #d4af37, #f5e642);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.5));
  margin-bottom: 6px;
}

.congrats-c1 .stars-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0;
}

.congrats-c1 .star-icon {
  width: 22px;
  height: 22px;
  color: #d4af37;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));
  animation: c1StarPulse 1.8s ease-in-out infinite alternate;
}

.congrats-c1 .star-icon:nth-child(2) {
  animation-delay: 0.3s;
  width: 30px;
  height: 30px;
}

.congrats-c1 .star-icon:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes c1StarPulse {
  from {
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.6));
    transform: scale(1);
  }

  to {
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 1));
    transform: scale(1.15);
  }
}

.congrats-c1 .achievement-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px 0;
}

.congrats-c1 .achievement-name {
  font-family: 'Dancing Script', cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 20px rgba(212, 175, 55, 0.4);
  line-height: 1.1;
}

.congrats-c1 .tagline-c1 {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-weight: 500;
  max-width: 280px;
  line-height: 1.5;
  margin-top: 8px;
}

/* Gold ribbon divider */
.congrats-c1 .gold-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  margin: 10px auto;
}

.congrats-c1 .gold-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

.congrats-c1 .gold-divider .diamond {
  width: 8px;
  height: 8px;
  background: #d4af37;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
}

/* ---- CONGRATS CARD 2 — Rose Gold Modern ---- */
.congrats-c2 {
  background: linear-gradient(160deg, #fff5f8 0%, #ffe4ec 35%, #ffd6e7 65%, #fff0f5 100%);
}

.congrats-c2 .congrats-ribbons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.congrats-c2 .congrats-ribbons::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 2px solid rgba(198, 100, 130, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

.congrats-c2 .congrats-ribbons::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 2px solid rgba(198, 100, 130, 0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

.congrats-c2 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  margin-top: -40px;
}

.congrats-c2 .c2-curve-badge {
  background: linear-gradient(135deg, #c0686e, #b84a74, #9d2558);
  border-radius: 50px;
  padding: 10px 32px;
  display: inline-block;
  box-shadow: 0 8px 25px rgba(184, 74, 116, 0.35);
  margin-bottom: 12px;
}

.congrats-c2 .c2-curve-badge span {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
}

.congrats-c2 .c2-stars-arc {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}

.congrats-c2 .c2-star {
  font-size: 1.4rem;
  animation: c2StarSpin 3s linear infinite;
}

.congrats-c2 .c2-star:nth-child(2) {
  animation-delay: 0.5s;
  font-size: 1.8rem;
}

.congrats-c2 .c2-star:nth-child(3) {
  animation-delay: 1s;
}

@keyframes c2StarSpin {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.2) rotate(20deg);
  }
}

.congrats-c2 .c2-main-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2.8rem;
  font-weight: 700;
  color: #7a1535;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(198, 100, 130, 0.2);
}

.congrats-c2 .c2-sub-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #b84a74;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 6px;
}

.congrats-c2 .c2-tagline {
  font-size: 0.8rem;
  color: #6b3a50;
  text-align: center;
  line-height: 1.5;
  max-width: 260px;
  margin-top: 10px;
}

.congrats-c2 .c2-curve-divider {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #b84a74, transparent);
  border-radius: 2px;
  margin: 10px auto;
}

.congrats-c2 .c2-floating-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.congrats-c2 .c2-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(184, 74, 116, 0.15);
  animation: c2DotFloat 4s ease-in-out infinite alternate;
}

.congrats-c2 .c2-dot:nth-child(1) {
  width: 12px;
  height: 12px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.congrats-c2 .c2-dot:nth-child(2) {
  width: 8px;
  height: 8px;
  top: 35%;
  right: 12%;
  animation-delay: 0.8s;
}

.congrats-c2 .c2-dot:nth-child(3) {
  width: 16px;
  height: 16px;
  top: 60%;
  left: 8%;
  animation-delay: 1.5s;
}

.congrats-c2 .c2-dot:nth-child(4) {
  width: 6px;
  height: 6px;
  top: 55%;
  right: 15%;
  animation-delay: 2s;
}

@keyframes c2DotFloat {
  from {
    transform: translateY(0);
    opacity: 0.5;
  }

  to {
    transform: translateY(-12px);
    opacity: 1;
  }
}

/* ---- CONGRATS CARD 3 — Teal Burst ---- */
.congrats-c3 {
  background: linear-gradient(145deg, #002b36 0%, #004d5a 40%, #003d49 70%, #001f28 100%);
}

.congrats-c3 .c3-burst {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.congrats-c3 .c3-burst svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 90%;
  opacity: 0.08;
}

.congrats-c3 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -30px;
}

.congrats-c3 .c3-arc-text {
  position: relative;
  width: 260px;
  height: 70px;
  margin-bottom: 4px;
}

.congrats-c3 .c3-arc-text svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.congrats-c3 .c3-confetti-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0;
}

.congrats-c3 .c3-confetti-piece {
  font-size: 1.4rem;
  animation: c3Confetti 2s ease-in-out infinite alternate;
}

.congrats-c3 .c3-confetti-piece:nth-child(1) {
  animation-delay: 0s;
}

.congrats-c3 .c3-confetti-piece:nth-child(2) {
  animation-delay: 0.4s;
}

.congrats-c3 .c3-confetti-piece:nth-child(3) {
  animation-delay: 0.8s;
}

.congrats-c3 .c3-confetti-piece:nth-child(4) {
  animation-delay: 1.2s;
}

.congrats-c3 .c3-confetti-piece:nth-child(5) {
  animation-delay: 1.6s;
}

@keyframes c3Confetti {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(-8px) rotate(15deg);
  }
}

.congrats-c3 .c3-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  color: #00e5ff;
  text-align: center;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.congrats-c3 .c3-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
  margin: 4px 0 10px;
}

.congrats-c3 .c3-tagline {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.5;
  max-width: 260px;
}

.congrats-c3 .c3-teal-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.2);
  pointer-events: none;
}

.congrats-c3 .c3-ring1 {
  width: 350px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.congrats-c3 .c3-ring2 {
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  border-color: rgba(0, 229, 255, 0.12);
}


/* ================================================================
   BIRTHDAY CARDS — NEW UNIQUE CSS
   ================================================================ */
.bday-card {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  margin: 20px auto;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
  font-family: 'Poppins', sans-serif;
}

.bday-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bday-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Top & bottom shared clones */
.bday-card .top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 0;
  position: relative;
  z-index: 10;
}

.bday-card .date-badge {
  font-weight: 900;
  font-size: 1.2rem;
  padding: 8px 24px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}

.bday-card .brand-logo {
  height: 40px;
  width: auto;
}

.bday-card .footer-branding {
  display: flex;
  width: 100%;
  height: 65px;
  position: relative;
  background: transparent;
  overflow: hidden;
  z-index: 10;
}

/* All birthday cards share same footer as marketing */
.bday-card .right-section {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 5px 0 0;
  gap: 4px;
  z-index: 1;
}

.bday-card .white-content-polygon {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 31%;
  background-color: #ffffff;
  margin-left: 10px;
  transform: skew(-20deg);
  z-index: 2;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.bday-card .unskew-content {
  transform: skew(20deg);
}

.bday-card .dealer-info {
  margin-top: -4px;
}

.bday-card .dealer-name {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.bday-card .dealer-name .red-text {
  color: #e60012;
}

.bday-card .dealer-name .blue-text {
  color: #003366;
}

.bday-card .web-link-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.bday-card .globe-icon {
  width: 14px;
  height: 14px;
  color: #003366;
  flex-shrink: 0;
}

.bday-card .dealer-link {
  font-size: 7px;
  color: #003366;
  text-decoration: none;
  font-weight: 700;
}

.bday-card .location-details {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  margin-right: 6px;
}

.bday-card .city {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.bday-card .address {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.95;
  letter-spacing: 0.2px;
}

.bday-card .contact-phone {
  background: #e60012;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(230, 18, 20, 0.24);
  text-decoration: none;
}

.bday-card .contact-phone svg {
  width: 14px;
  height: 14px;
}

.bday-card .premium-logo-wrapper {
  background: #ffffff;
  height: 56px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 4px;
}

.bday-card .premium-logo-wrapper img {
  height: 24px;
  width: auto;
}

.bday-card .premium-logo-wrapper span {
  font-size: 0.32rem;
  font-weight: 900;
  color: #000000;
  text-align: center;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}

/* ---- BDAY CARD 1 — Confetti Party ---- */
.bday-b1 {
  background: linear-gradient(160deg, #1a0533 0%, #2d0b5e 40%, #1a0533 100%);
}

.bday-b1 .date-badge {
  background: #ffffff;
  color: #2d0b5e;
}

.bday-b1 .right-section {
  background: #7b2ff7;
}

.bday-b1 .b1-confetti-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bday-b1 .b1-confetti-piece {
  position: absolute;
  font-size: 1.2rem;
  animation: b1Float 5s ease-in-out infinite alternate;
}

.bday-b1 .b1-confetti-piece:nth-child(1) {
  top: 8%;
  left: 5%;
  animation-delay: 0s;
  font-size: 1.4rem;
}

.bday-b1 .b1-confetti-piece:nth-child(2) {
  top: 12%;
  left: 80%;
  animation-delay: 0.5s;
  font-size: 1rem;
}

.bday-b1 .b1-confetti-piece:nth-child(3) {
  top: 25%;
  left: 15%;
  animation-delay: 1s;
}

.bday-b1 .b1-confetti-piece:nth-child(4) {
  top: 20%;
  right: 10%;
  animation-delay: 1.4s;
}

.bday-b1 .b1-confetti-piece:nth-child(5) {
  top: 40%;
  left: 3%;
  animation-delay: 2s;
  font-size: 0.9rem;
}

.bday-b1 .b1-confetti-piece:nth-child(6) {
  top: 35%;
  right: 5%;
  animation-delay: 2.5s;
}

.bday-b1 .b1-confetti-piece:nth-child(7) {
  top: 55%;
  left: 88%;
  animation-delay: 0.7s;
}

.bday-b1 .b1-confetti-piece:nth-child(8) {
  top: 60%;
  left: 2%;
  animation-delay: 1.8s;
}

@keyframes b1Float {
  from {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }

  to {
    transform: translateY(-14px) rotate(25deg);
    opacity: 1;
  }
}

.bday-b1 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -20px;
  text-align: center;
}

.bday-b1 .b1-wish-label {
  font-family: 'Righteous', cursive;
  font-size: 0.85rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #c084fc;
  margin-bottom: 4px;
}

.bday-b1 .b1-big-wish {
  font-family: 'Dancing Script', cursive;
  font-size: 3.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f0abfc, #c084fc, #818cf8, #c084fc, #f0abfc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  filter: drop-shadow(0 2px 12px rgba(192, 132, 252, 0.5));
}

.bday-b1 .b1-name-label {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  margin: 6px 0 4px;
  text-transform: uppercase;
}

.bday-b1 .b1-cake-row {
  font-size: 2rem;
  margin: 6px 0;
}

.bday-b1 .b1-tagline {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 250px;
  line-height: 1.5;
  text-align: center;
}

.bday-b1 .b1-glow-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.12) 0%, transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 2;
}

/* ---- BDAY CARD 2 — Warm Sunshine ---- */
.bday-b2 {
  background: linear-gradient(155deg, #fff8e7 0%, #fff0c8 40%, #ffe9a8 70%, #fff8e7 100%);
}

.bday-b2 .date-badge {
  background: #ff6b00;
  color: #ffffff;
}

.bday-b2 .right-section {
  background: #ff6b00;
}

.bday-b2 .b2-bg-circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bday-b2 .b2-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 107, 0, 0.06);
}

.bday-b2 .b2-circle:nth-child(1) {
  width: 300px;
  height: 300px;
  top: -80px;
  right: -80px;
}

.bday-b2 .b2-circle:nth-child(2) {
  width: 200px;
  height: 200px;
  bottom: 80px;
  left: -60px;
}

.bday-b2 .b2-circle:nth-child(3) {
  width: 120px;
  height: 120px;
  top: 40%;
  left: 30%;
  background: rgba(255, 107, 0, 0.04);
}

.bday-b2 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -30px;
  text-align: center;
}

.bday-b2 .b2-balloon-row {
  font-size: 2rem;
  margin-bottom: 8px;
}

.bday-b2 .b2-wishing-text {
  font-family: 'Righteous', cursive;
  font-size: 0.9rem;
  letter-spacing: 4px;
  color: #ff6b00;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bday-b2 .b2-main-title {
  font-family: 'Dancing Script', cursive;
  font-size: 3.8rem;
  font-weight: 700;
  color: #cc4400;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(204, 68, 0, 0.2);
}

.bday-b2 .b2-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ff6b00;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 8px 0;
}

.bday-b2 .b2-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff6b00, transparent);
  border-radius: 2px;
  margin: 6px auto;
}

.bday-b2 .b2-tagline {
  font-size: 0.8rem;
  color: #7a3800;
  line-height: 1.5;
  max-width: 250px;
  font-weight: 500;
}

/* ---- BDAY CARD 3 — Midnight Glam ---- */
.bday-b3 {
  background: linear-gradient(145deg, #080015 0%, #160028 40%, #0d001f 70%, #080015 100%);
}

.bday-b3 .date-badge {
  background: #ff1f7d;
  color: #ffffff;
}

.bday-b3 .right-section {
  background: #8b0050;
}

.bday-b3 .b3-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bday-b3 .b3-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff1f7d;
  animation: b3Spark 3s ease-in-out infinite alternate;
}

.bday-b3 .b3-spark:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
  background: #fff;
}

.bday-b3 .b3-spark:nth-child(2) {
  top: 18%;
  left: 70%;
  animation-delay: 0.4s;
  background: #ff1f7d;
  width: 4px;
  height: 4px;
}

.bday-b3 .b3-spark:nth-child(3) {
  top: 30%;
  left: 40%;
  animation-delay: 0.8s;
  background: #c084fc;
}

.bday-b3 .b3-spark:nth-child(4) {
  top: 25%;
  right: 20%;
  animation-delay: 1.2s;
  background: #fff;
  width: 2px;
  height: 2px;
}

.bday-b3 .b3-spark:nth-child(5) {
  top: 45%;
  left: 8%;
  animation-delay: 1.6s;
  background: #ff1f7d;
}

.bday-b3 .b3-spark:nth-child(6) {
  top: 50%;
  right: 8%;
  animation-delay: 2s;
  background: #c084fc;
  width: 4px;
  height: 4px;
}

.bday-b3 .b3-spark:nth-child(7) {
  top: 60%;
  left: 55%;
  animation-delay: 0.3s;
  background: #fff;
}

.bday-b3 .b3-spark:nth-child(8) {
  top: 65%;
  left: 30%;
  animation-delay: 1s;
  background: #ff1f7d;
}

@keyframes b3Spark {
  from {
    transform: scale(1);
    opacity: 0.4;
  }

  to {
    transform: scale(1.8);
    opacity: 1;
  }
}

.bday-b3 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -20px;
  text-align: center;
}

.bday-b3 .b3-topline {
  font-family: 'Righteous', cursive;
  font-size: 0.75rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #ff1f7d;
  margin-bottom: 6px;
}

.bday-b3 .b3-big-text {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff1f7d, #c084fc, #ff1f7d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  filter: drop-shadow(0 0 15px rgba(255, 31, 125, 0.4));
  line-height: 1.1;
}

.bday-b3 .b3-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 8px;
  margin: 4px 0;
}

.bday-b3 .b3-gems {
  font-size: 1.6rem;
  margin: 6px 0;
}

.bday-b3 .b3-subtitle {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0 20px rgba(255, 31, 125, 0.3);
}

.bday-b3 .b3-tagline {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 240px;
  line-height: 1.5;
  text-align: center;
  margin-top: 8px;
}


/* ================================================================
   FESTIVAL CARDS — NEW UNIQUE CSS
   ================================================================ */
.fest-card {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  margin: 20px auto;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
  font-family: 'Poppins', sans-serif;
}

.fest-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fest-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.fest-card .top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 0;
  position: relative;
  z-index: 10;
}

.fest-card .date-badge {
  font-weight: 900;
  font-size: 1.2rem;
  padding: 8px 24px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.12);
}

.fest-card .brand-logo {
  height: 40px;
  width: auto;
}

.fest-card .footer-branding {
  display: flex;
  width: 100%;
  height: 65px;
  position: relative;
  background: transparent;
  overflow: hidden;
  z-index: 10;
}

.fest-card .right-section {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 5px 0 0;
  gap: 4px;
  z-index: 1;
}

.fest-card .white-content-polygon {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 31%;
  background-color: #ffffff;
  margin-left: 10px;
  transform: skew(-20deg);
  z-index: 2;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.fest-card .unskew-content {
  transform: skew(20deg);
}

.fest-card .dealer-info {
  margin-top: -4px;
}

.fest-card .dealer-name {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.fest-card .dealer-name .red-text {
  color: #e60012;
}

.fest-card .dealer-name .blue-text {
  color: #003366;
}

.fest-card .web-link-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.fest-card .globe-icon {
  width: 14px;
  height: 14px;
  color: #003366;
  flex-shrink: 0;
}

.fest-card .dealer-link {
  font-size: 7px;
  color: #003366;
  text-decoration: none;
  font-weight: 700;
}

.fest-card .location-details {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  margin-right: 6px;
}

.fest-card .city {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.fest-card .address {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.95;
  letter-spacing: 0.2px;
}

.fest-card .contact-phone {
  background: #e60012;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(230, 18, 20, 0.24);
  text-decoration: none;
}

.fest-card .contact-phone svg {
  width: 14px;
  height: 14px;
}

.fest-card .premium-logo-wrapper {
  background: #ffffff;
  height: 56px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 4px;
}

.fest-card .premium-logo-wrapper img {
  height: 24px;
  width: auto;
}

.fest-card .premium-logo-wrapper span {
  font-size: 0.32rem;
  font-weight: 900;
  color: #000000;
  text-align: center;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}

/* ---- FEST CARD 1 — Diwali Glow ---- */
.fest-f1 {
  background: linear-gradient(145deg, #1a0800 0%, #3d1500 35%, #5c2400 60%, #3d1500 80%, #1a0800 100%);
}

.fest-f1 .date-badge {
  background: #ffb800;
  color: #3d1500;
}

.fest-f1 .right-section {
  background: #8b2400;
}

.fest-f1 .f1-mandala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 280px;
  height: 280px;
  z-index: 0;
  opacity: 0.07;
  pointer-events: none;
  animation: f1Rotate 30s linear infinite;
}

@keyframes f1Rotate {
  from {
    transform: translate(-50%, -60%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -60%) rotate(360deg);
  }
}

.fest-f1 .f1-diyas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.fest-f1 .f1-diya {
  position: absolute;
  font-size: 1.4rem;
  animation: f1Flicker 2s ease-in-out infinite alternate;
}

.fest-f1 .f1-diya:nth-child(1) {
  top: 15%;
  left: 5%;
  animation-delay: 0s;
}

.fest-f1 .f1-diya:nth-child(2) {
  top: 15%;
  right: 8%;
  animation-delay: 0.7s;
}

.fest-f1 .f1-diya:nth-child(3) {
  top: 40%;
  left: 3%;
  animation-delay: 1.4s;
  font-size: 1rem;
}

.fest-f1 .f1-diya:nth-child(4) {
  top: 40%;
  right: 4%;
  animation-delay: 0.3s;
  font-size: 1rem;
}

.fest-f1 .f1-diya:nth-child(5) {
  top: 60%;
  left: 8%;
  animation-delay: 1s;
  font-size: 1.1rem;
}

.fest-f1 .f1-diya:nth-child(6) {
  top: 60%;
  right: 6%;
  animation-delay: 1.7s;
  font-size: 1.1rem;
}

@keyframes f1Flicker {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 184, 0, 0.6));
  }

  to {
    transform: scale(1.15);
    filter: drop-shadow(0 0 12px rgba(255, 184, 0, 1));
  }
}

.fest-f1 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -20px;
  text-align: center;
}

.fest-f1 .f1-festival-type {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 6px;
  color: #ffb800;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fest-f1 .f1-title {
  font-family: 'Cinzel', serif;
  font-size: 3.4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ffb800, #ff8c00, #ffd700, #ff8c00, #ffb800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  filter: drop-shadow(0 2px 10px rgba(255, 184, 0, 0.4));
}

.fest-f1 .f1-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 200, 100, 0.8);
  letter-spacing: 3px;
  margin: 6px 0;
}

.fest-f1 .f1-gold-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px auto;
}

.fest-f1 .f1-gold-line span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffb800, transparent);
  max-width: 80px;
}

.fest-f1 .f1-lamp {
  font-size: 1.4rem;
}

.fest-f1 .f1-tagline {
  font-size: 0.78rem;
  color: rgba(255, 200, 100, 0.7);
  max-width: 250px;
  line-height: 1.5;
  text-align: center;
}

/* ---- FEST CARD 2 — Holi Color Splash ---- */
.fest-f2 {
  background: linear-gradient(145deg, #0d1a3e 0%, #1a2f6e 40%, #0d1a3e 100%);
}

.fest-f2 .date-badge {
  background: #ffffff;
  color: #0d1a3e;
}

.fest-f2 .right-section {
  background: #0d1a3e;
}

.fest-f2 .f2-color-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.fest-f2 .f2-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
  animation: f2BlobPulse 5s ease-in-out infinite alternate;
}

.fest-f2 .f2-blob:nth-child(1) {
  width: 180px;
  height: 180px;
  background: #ff4da6;
  top: -20px;
  left: -30px;
  animation-delay: 0s;
}

.fest-f2 .f2-blob:nth-child(2) {
  width: 160px;
  height: 160px;
  background: #ffcd3c;
  top: -30px;
  right: -20px;
  animation-delay: 1s;
}

.fest-f2 .f2-blob:nth-child(3) {
  width: 140px;
  height: 140px;
  background: #4dff91;
  top: 35%;
  left: -20px;
  animation-delay: 2s;
}

.fest-f2 .f2-blob:nth-child(4) {
  width: 150px;
  height: 150px;
  background: #ff7043;
  top: 30%;
  right: -25px;
  animation-delay: 0.5s;
}

.fest-f2 .f2-blob:nth-child(5) {
  width: 120px;
  height: 120px;
  background: #9c4dff;
  top: 60%;
  left: 30%;
  animation-delay: 1.5s;
}

@keyframes f2BlobPulse {
  from {
    transform: scale(1);
    opacity: 0.35;
  }

  to {
    transform: scale(1.15);
    opacity: 0.5;
  }
}

.fest-f2 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -30px;
  text-align: center;
}

.fest-f2 .f2-emoji-row {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.fest-f2 .f2-festival-label {
  font-family: 'Righteous', cursive;
  font-size: 0.8rem;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fest-f2 .f2-big-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5rem;
  letter-spacing: 4px;
  line-height: 1;
  background: linear-gradient(135deg, #ff4da6, #ffcd3c, #4dff91, #ff7043, #9c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.2));
}

.fest-f2 .f2-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 6px 0;
}

.fest-f2 .f2-tagline {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 240px;
  line-height: 1.5;
}

/* ---- FEST CARD 3 — Navratri Royal ---- */
.fest-f3 {
  background: linear-gradient(160deg, #1f0040 0%, #3a006b 40%, #1f0040 100%);
}

.fest-f3 .date-badge {
  background: #ffc53d;
  color: #1f0040;
}

.fest-f3 .right-section {
  background: #5c0080;
}

.fest-f3 .f3-geometric {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.fest-f3 .f3-geo-line {
  position: absolute;
  background: rgba(255, 197, 61, 0.08);
  transform-origin: center;
}

.fest-f3 .f3-geo-line:nth-child(1) {
  width: 2px;
  height: 100%;
  top: 0;
  left: 25%;
  transform: rotate(-15deg);
}

.fest-f3 .f3-geo-line:nth-child(2) {
  width: 2px;
  height: 100%;
  top: 0;
  left: 75%;
  transform: rotate(15deg);
}

.fest-f3 .f3-geo-line:nth-child(3) {
  width: 100%;
  height: 2px;
  top: 30%;
  left: 0;
  transform: rotate(-10deg);
}

.fest-f3 .f3-emojis {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.fest-f3 .f3-emoji-float {
  position: absolute;
  font-size: 1.3rem;
  animation: f3EmojiFloat 4s ease-in-out infinite alternate;
}

.fest-f3 .f3-emoji-float:nth-child(1) {
  top: 12%;
  left: 8%;
  animation-delay: 0s;
}

.fest-f3 .f3-emoji-float:nth-child(2) {
  top: 12%;
  right: 8%;
  animation-delay: 0.8s;
}

.fest-f3 .f3-emoji-float:nth-child(3) {
  top: 40%;
  left: 4%;
  animation-delay: 1.6s;
  font-size: 1rem;
}

.fest-f3 .f3-emoji-float:nth-child(4) {
  top: 40%;
  right: 4%;
  animation-delay: 2.4s;
  font-size: 1rem;
}

.fest-f3 .f3-emoji-float:nth-child(5) {
  top: 60%;
  left: 10%;
  animation-delay: 1.2s;
  font-size: 1.1rem;
}

.fest-f3 .f3-emoji-float:nth-child(6) {
  top: 60%;
  right: 8%;
  animation-delay: 2s;
  font-size: 1.1rem;
}

@keyframes f3EmojiFloat {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(-10px) rotate(5deg);
  }
}

.fest-f3 .main-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-top: -20px;
  text-align: center;
}

.fest-f3 .f3-top-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 6px;
  color: rgba(255, 197, 61, 0.7);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fest-f3 .f3-title {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ffc53d, #ff7043, #ffc53d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  filter: drop-shadow(0 0 14px rgba(255, 197, 61, 0.4));
}

.fest-f3 .f3-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 6px 0;
}

.fest-f3 .f3-diamond-row {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.fest-f3 .f3-diamond {
  width: 10px;
  height: 10px;
  background: #ffc53d;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(255, 197, 61, 0.7);
  animation: f3DiamondGlow 2s ease-in-out infinite alternate;
}

.fest-f3 .f3-diamond:nth-child(2) {
  animation-delay: 0.4s;
  background: #ff7043;
  box-shadow: 0 0 8px rgba(255, 112, 67, 0.7);
}

.fest-f3 .f3-diamond:nth-child(3) {
  animation-delay: 0.8s;
}

@keyframes f3DiamondGlow {
  from {
    transform: rotate(45deg) scale(1);
  }

  to {
    transform: rotate(45deg) scale(1.3);
  }
}

.fest-f3 .f3-tagline {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 240px;
  line-height: 1.5;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }

  .col-card {
    max-width: 100%;
  }
  .congrats-card .location-details {
        margin-right: 0;
  }
  .congrats-card .dealer-name {
    font-size: 8px;
  }
  .congrats-card .dealer-link {
    font-size: 5px;
  }
  .congrats-card .address {
    font-size: 9px;
  }
  .congrats-card .city {
    font-size: 14px;
  }
  .congrats-card .contact-phone {
    font-size: 8px;
  }
  .congrats-card .date-badge {
      font-size: 8px;
    padding: 5px;
}
  .bday-card .location-details {
    margin-right: 0;
}

.bday-card .dealer-name {
    font-size: 8px;
}

.bday-card .dealer-link {
    font-size: 5px;
}

.bday-card .address {
    font-size: 9px;
}

.bday-card .city {
    font-size: 14px;
}

.bday-card .contact-phone {
    font-size: 8px;
}
.fest-card .date-badge {
      font-size: 8px;
    padding: 5px;
}
.bday-card .date-badge {
      font-size: 8px;
    padding: 5px;
}
.fest-card .location-details {
    margin-right: 0;
}

.fest-card .dealer-name {
    font-size: 8px;
}

.fest-card .dealer-link {
    font-size: 5px;
}

.fest-card .address {
    font-size: 9px;
}

.fest-card .city {
    font-size: 14px;
}

.fest-card .contact-phone {
    font-size: 8px;
}
.suzuki-marketing-card .location-details {
    margin-right: 0;
}
.suzuki-marketing-card .date-badge {
      font-size: 8px;
    padding: 5px;
}
.suzuki-marketing-card .dealer-name {
    font-size: 8px;
}

.suzuki-marketing-card .dealer-link {
    font-size: 5px;
}

.suzuki-marketing-card .address {
    font-size: 9px;
}

.suzuki-marketing-card .city {
    font-size: 14px;
}

.suzuki-marketing-card .contact-phone {
    font-size: 8px;
}
}

/* ===== Global Search Modal (Light theme matching app) ===== */
.gs-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 9999;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8vh;
}
.gs-overlay.active {
    display: flex;
}
.gs-modal {
    width: 100%;
    max-width: 540px;
    background: #ffffff;
    border: 1px solid #e4e6ea;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    animation: gsPop .15s ease-out;
}
@keyframes gsPop {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.gs-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eceff2;
    background: #f8f9fb;
}
.gs-search-icon {
    color: #003399;
    font-size: 15px;
}
.gs-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #1c1f26;
    font-size: 15px;
}
.gs-input::placeholder {
    color: #9aa0aa;
}
.gs-esc {
    font-size: 11px;
    font-weight: 600;
    color: #6c7280;
    background: #eef1f5;
    border: 1px solid #dde1e7;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.gs-esc:hover {
    background: #e3e7ed;
}
.gs-results-wrap {
    max-height: 440px;
    overflow-y: auto;
    padding: 10px 8px 14px;
}
.gs-results-title {
    color: #9aa0aa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 4px 12px 6px;
}
.gs-section-heading {
    padding: 14px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #003399;
}
.gs-section-heading:first-child {
    padding-top: 4px;
}
.gs-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gs-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    color: #333a45;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.gs-result-item:hover,
.gs-result-item.active {
    background: #eef2ff;
    color: #003399;
}
.gs-result-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gs-result-left i.gs-item-icon {
    color: #9aa0aa;
    font-size: 15px;
    width: 18px;
    text-align: center;
}
.gs-result-item:hover .gs-item-icon,
.gs-result-item.active .gs-item-icon {
    color: #003399;
}
.gs-chevron {
    color: #c3c8d1;
    font-size: 13px;
}
.gs-result-item:hover .gs-chevron,
.gs-result-item.active .gs-chevron {
    color: #003399;
}
.gs-no-result {
    text-align: center;
    color: #9aa0aa;
    font-size: 13px;
    padding: 30px 10px;
    margin: 0;
}
.gs-results-wrap::-webkit-scrollbar { width: 6px; }
.gs-results-wrap::-webkit-scrollbar-thumb { background: #dde1e7; border-radius: 4px; }

/* ===== Header Search Trigger (clean pill, no conflicts) ===== */
li.gs-trigger-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 2px solid #e20a17 !important;
    border-radius: 30px !important;
    padding: 0 18px !important;
    height: 42px !important;
    min-width: 250px !important;
    margin: 0 10px !important;
    list-style: none !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* li.gs-trigger-wrap:hover {
    border-color: #c9ccd2 !important;
} */
li.gs-trigger-wrap:focus-within {
    border-color: #003399 !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.12) !important;
}
li.gs-trigger-wrap .gs-trigger-icon {
    color: #8a8f98 !important;
    font-size: 14px !important;
    flex-shrink: 0;
}
li.gs-trigger-wrap input.gs-trigger-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: normal !important;
    font-size: 14px !important;
    color: #1c1f26 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
li.gs-trigger-wrap input.gs-trigger-input::placeholder {
    color: #9aa0aa !important;
    opacity: 1 !important;
}
li.gs-trigger-wrap input.gs-trigger-input:required,
li.gs-trigger-wrap input.gs-trigger-input:invalid,
li.gs-trigger-wrap input.gs-trigger-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
@media (max-width: 991px) {
    li.gs-trigger-wrap {
        min-width: 160px !important;
    }
}