/* ==========================================================================
   GSM THEME — refactored stylesheet
   Load AFTER Bootstrap / DataTables / Owl Carousel.
   All brand colors derive from --bs-primary, so changing the theme color
   re-skins buttons, links, focus rings, footer and checkout automatically.

   Index
   01 Tokens        06 Checkout (amount, gateways)   11 Auth modal
   02 Base         07 Tables (DataTables)            12 Footer
   03 Header       08 Cards & carousels              13 Responsive
   04 Utilities    09 Service page                   14 Reduced motion
   05 Forms        10 Order modal
   ========================================================================== */


/* ==========================================================================
   01 TOKENS
   ========================================================================== */
:root {
  /* Brand (follows Bootstrap theme) */
  --brand:        var(--bs-primary, #007878);
  --brand-rgb:    var(--bs-primary-rgb, 0, 120, 120);
  --brand-dark:   color-mix(in srgb, var(--brand) 78%, #000);
  --brand-soft:   color-mix(in srgb, var(--brand) 8%, #fff);
  --brand-ring:   0 0 0 .22rem rgba(var(--brand-rgb), .22);

  /* Neutrals */
  --ink:      #0f1419;
  --text:     #3c4043;
  --muted:    #5f6368;
  --dim:      #8a9099;
  --line:     #e7eaee;
  --line-soft:#f1f3f4;
  --surface:  #ffffff;
  --surface-2:#f7f8f9;
  --tint:     #f0fafa;

  /* Status */
  --success:  #198754;
  --warn:     #f59e0b;
  --warn-dark:#d97706;
  --danger:   #ef4444;
  --star:     #fbbc04;

  /* Glass (header / footer on brand color) */
  --glass-bg:     var(--bs-primary-glass-bg, rgba(255,255,255,.12));
  --glass-border: var(--bs-primary-glass-border, rgba(255,255,255,.22));
  --footer-bg:    var(--bs-primary-footer-bg, #0b1f24);
  --footer-text:  var(--bs-primary-footer-color, rgba(255,255,255,.72));
  --footer-hover: var(--bs-primary-footer-hover-color, #fff);

  /* Shape & depth */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(15,20,25,.05), 0 1px 8px rgba(15,20,25,.05);
  --shadow-2: 0 6px 20px rgba(15,20,25,.08);
  --shadow-3: 0 18px 48px rgba(15,20,25,.14);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .15s;
  --t-med: .28s;

  /* Layout */
  --header-h: 64px;
  --container: 1200px;

  /* Type */
  --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'Inter', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}


/* ==========================================================================
   02 BASE
   ========================================================================== */
img { max-width: 100%; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.ibm-font { font-family: var(--font-mono); }

.left-container :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.5rem !important;   /* kept: overrides CMS-generated headings */
  font-weight: 400 !important;
  letter-spacing: -.01em;
}

.dropdown-toggle::after { display: none; }

.text-truncate-1,
.text-truncate-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.text-truncate-2 { -webkit-line-clamp: 2; line-clamp: 2; }

.slim-scroll,
.group-list { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.slim-scroll::-webkit-scrollbar,
.group-list::-webkit-scrollbar { width: 4px; }
.slim-scroll::-webkit-scrollbar-thumb,
.group-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.slim-scroll::-webkit-scrollbar-track,
.group-list::-webkit-scrollbar-track { background: transparent; }


/* ==========================================================================
   03 HEADER
   ========================================================================== */
.gsm-header {
  height: var(--header-h);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    var(--brand);
  border-bottom: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 18px rgba(0,0,0,.10);
}

.gsm-theme-header {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 18px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo { max-width: 250px; max-height: 40px; }

.v-sep {
  width: 1px;
  height: 22px;
  margin-right: 4px;
  background: var(--glass-border);
  flex-shrink: 0;
}

.nav-container {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Scroll arrows */
.nav-arrow {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.nav-arrow.visible {
  opacity: 1;
  pointer-events: auto;
  margin: 0 10px;
  padding-bottom: 2px;
}
.nav-arrow:hover { transform: scale(1.08); }
.nav-arrow-left  { margin-right: 4px; }
.nav-arrow-right { margin-left: 4px; }

.nav-scroll-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--header-h);
  overflow: hidden;
}
.nav-track {
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 6px;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  transform: translateX(0);
  transition: transform .25s ease;
}
.nav-track.grabbing { cursor: grabbing; transition: none; will-change: transform; }
.nav-track.no-transition { transition: none; }

.nav-links {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links > li { position: relative; flex-shrink: 0; }
.nav-links > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--header-h);
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}
/* animated underline */
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-med) var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li.is-open > a { color: #fff; }
.nav-links > li > a:hover::after,
.nav-links > li.is-open > a::after { transform: scaleX(1); }

.chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.nav-links > li.is-open .chevron { transform: rotate(180deg); }

.nav-utility {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding-left: 12px;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--glass-border);
  border-radius: 9px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.notif-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: var(--danger);
}

.currency-btn {
  width: 80px;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-weight: 600;
  color: #fff;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-sm);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.currency-btn:hover { background: rgba(255,255,255,.2); }

.nav-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  flex-shrink: 0;
}
.login-btn {
  font-weight: 600;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border) !important;
}
.login-btn:hover { background: rgba(255,255,255,.2); }

/* Dropdown */
.gsm-dropdown {
  position: fixed;
  z-index: 99999;
  min-width: 190px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(.98);
  transition: opacity .16s ease, transform .2s var(--ease), visibility .16s;
}
.gsm-dropdown.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.gsm-dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--bs-secondary-color, var(--text));
  text-decoration: none;
  white-space: nowrap;
  border-radius: 7px;
  transition: background .12s, color .12s;
}
.gsm-dropdown a:hover {
  background: var(--pc-active-background, var(--brand-soft));
  color: var(--bs-dropdown-link-color, var(--brand));
}

.currency-dropdown { min-width: 80px; transform: translate(0, 58px) !important; }

.customer-auth-btn { height: 10px; margin: 0 2px; border-right: 1px solid rgba(255,255,255,.7); }
.customer-auth-menu { margin-top: 8px !important; }

.customer-header-auth .btn,
.order-history-btn {
  color: #fff;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.customer-header-auth .btn:hover,
.customer-header-auth .btn:focus,
.customer-header-auth .btn:active,
.customer-header-auth .btn.show,
.order-history-btn:hover,
.order-history-btn:focus,
.order-history-btn:active,
.order-history-btn.show {
  background: rgba(255,255,255,.2);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}


/* ==========================================================================
   04 UTILITIES
   ========================================================================== */
/* Dashed dividers */
.dashed-top    { border-top:    1px dashed var(--bs-border-color, var(--line)); }
.dashed-bottom { border-bottom: 1px dashed var(--bs-border-color, var(--line)); }
.dashed-left   { border-left:   1px dashed var(--bs-border-color, var(--line)); }
.dashed-right  { border-right:  1px dashed var(--bs-border-color, var(--line)); }

/* Responsive side borders (turned off in media queries) */
.custom-left-border,
.custom-lg-left-border,
.custom-xl-left-border   { border-left:  1px solid var(--line); }
.custom-right-border,
.custom-lg-right-border,
.custom-xl-right-border  { border-right: 1px solid var(--line); }

.custom-border-bottom { border-bottom: 1px solid var(--bs-border-color, var(--line)) !important; }

/* Short accent rule */
.sm-hr {
  width: 40px;
  margin: 0 0 1.5rem;
  border: 0;
  border-top: 4px solid var(--brand);
  border-radius: 20px;
  opacity: .55;
}

.custom-header-height { min-height: auto; padding: 70px 0; }

/* "or" separator  (was .saprator) */
.saprator,
.separator {
  position: relative;
  display: flex;
  align-self: center;
  justify-content: center;
}
.saprator::after,
.separator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: var(--bs-border-color, var(--line));
}
.saprator span,
.separator span {
  z-index: 5;
  padding: 8px 24px;
  font-size: .875rem;
  text-transform: capitalize;
  background: #f6f4fa !important;
  border-radius: 999px;
}

.spinner-xs { width: 14px; height: 14px; border-width: 2px; }
.rounded-icons { width: 80px; height: 80px; }
.rating-stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }

.service-icon { width: 105px; height: 70px; min-width: 105px; border-radius: var(--r-sm); }


/* ==========================================================================
   05 FORMS
   ========================================================================== */
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus   { border-color: var(--brand); box-shadow: var(--brand-ring); }
.form-check-label         { font-size: 13px; color: var(--text); }
.form-check-label a       { color: var(--brand); text-decoration: none; }
.form-check-label a:hover { text-decoration: underline; }

/* Tile checkbox */
.checkbox-wrapper-16 *,
.checkbox-wrapper-16 *::before,
.checkbox-wrapper-16 *::after { box-sizing: border-box; }

.checkbox-wrapper-16 .checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}
.checkbox-wrapper-16 .checkbox-tile {
  position: relative;
  width: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--bs-border-color, var(--line));
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.checkbox-wrapper-16 .checkbox-tile::before {
  content: "";
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--brand);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='216 72 104 184 48 128' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") 50% 50% / 12px no-repeat;
  transition: transform .25s var(--ease), opacity .25s;
}
.checkbox-wrapper-16 .checkbox-tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.checkbox-wrapper-16 .checkbox-tile:hover::before { opacity: 1; transform: scale(1); }

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile::before {
  opacity: 1;
  transform: scale(1);
  background-color: var(--brand);
}
.checkbox-wrapper-16 .checkbox-input:focus-visible + .checkbox-tile {
  border-color: var(--brand);
  box-shadow: var(--brand-ring);
}
.checkbox-wrapper-16 .checkbox-icon { color: #494949; transition: color .3s ease; }
.checkbox-wrapper-16 .checkbox-icon svg { width: 3rem; height: 3rem; }
.checkbox-wrapper-16 .checkbox-label { text-align: center; transition: color .3s ease; }
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label { color: var(--brand); }

.payment-getwaye-list,
.payment-gateway-list {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 25px 0 20px;
}

/* Select2 inside auth modal */
#gsmAuthModal .select2-container--bootstrap-5.select2-container--focus .select2-selection,
#gsmAuthModal .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--brand);
  box-shadow: var(--brand-ring);
}
#gsmAuthModal .select2-container--bootstrap-5 .select2-dropdown {
  border-color: var(--bs-border-color, var(--line));
  border-top: none;
  box-shadow: var(--shadow-2);
}
#gsmAuthModal .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  border-color: var(--brand);
  box-shadow: none;
}
.fs-select2 .select2-results__option,
.fs-select2 .select2-search__field,
.select2-container .fs-select2 .select2-selection__rendered { font-size: 15px; }


/* ==========================================================================
   06 CHECKOUT — amount, gateways, pay button
   ========================================================================== */
.amt-group {
  background: var(--surface);
  border: 2px solid var(--bs-border-color, var(--line));
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.amt-group:focus-within { border-color: var(--brand); box-shadow: var(--brand-ring); }

.amt-sym {
  padding: 0 8px 0 18px;
  font-size: 20px;
  line-height: 1;
  color: #ced4da;
  user-select: none;
}
.amt-field {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.amt-field::-webkit-inner-spin-button,
.amt-field::-webkit-outer-spin-button { -webkit-appearance: none; }
.amt-unit { padding: 0 16px; font-weight: 600; letter-spacing: .06em; color: var(--dim); }

.gw-item {
  background: var(--surface);
  border: 1.5px solid #dee2e6;
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .12s;
}
.gw-item:hover {
  border-color: rgba(var(--brand-rgb), .45);
  background: rgba(var(--brand-rgb), .025);
}
.gw-item.active {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), .06);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
.gw-radio {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid #ced4da;
  border-radius: 50%;
  transition: all .12s;
}
.gw-item.active .gw-radio { background: var(--brand); border-color: var(--brand); }
.gw-radio svg { opacity: 0; transition: opacity .1s; }
.gw-item.active .gw-radio svg { opacity: 1; }

.total-amt {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.btn-pay { background: var(--brand); border-color: var(--brand); }
.btn-pay:hover,
.btn-pay:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 4px 14px rgba(var(--brand-rgb), .35);
}
.btn-pay:active { transform: scale(.987); }
.btn-pay.loading { opacity: .7; pointer-events: none; }
.btn-pay.done { background: var(--success); border-color: var(--success); pointer-events: none; }


/* ==========================================================================
   07 TABLES — DataTables
   ========================================================================== */
table.dataTable > tbody > tr { background: transparent !important; }

table.dataTable thead th,
table.dataTable thead td { padding: 12px 25px !important; }

table.dataTable thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-top: 1px solid var(--bs-card-border-color, var(--line)) !important;
  border-bottom: 1px solid var(--bs-card-border-color, var(--line)) !important;
}

.table.dataTable tbody th,
table.dataTable tbody td { padding: 10px 25px; }

table.dataTable td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.dataTable.display tbody td { cursor: pointer; }
table.dataTable.display tbody tr { transition: background var(--t-fast); }
table.dataTable.display tbody tr:hover { background: var(--brand-soft) !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--bs-card-border-color, var(--line)) !important; }

.table-card .card-body .table tr th:first-child { padding-left: 25px !important; }

.dataTables_length   { padding-left: 18px !important; }
.dataTables_info,
.dataTables_paginate { padding: 18px !important; }
.dt-select-padding   { width: 90px !important; padding: 12px 25px !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
  border: 1px solid var(--brand) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus { box-shadow: none; }


/* ==========================================================================
   08 CARDS & CAROUSELS
   ========================================================================== */
.service-view-rcontent .card { border: 0; }

.section-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.section-header .title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.section-header .line {
  flex: 1;
  height: 1px;
  margin: 0 100px 0 15px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.owl-carousel .owl-stage-outer { border-radius: var(--r-sm) !important; }
.featured-slider .owl-nav { position: absolute; top: -50px; right: 0; }

.owl-nav button.owl-prev,
.owl-nav button.owl-next {
  width: 38px;
  height: 38px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  color: #fff !important;
  background: var(--brand) !important;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
  background: var(--brand-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.owl-nav button.owl-prev span,
.owl-nav button.owl-next span { background: none !important; border: none !important; }

.product {
  padding: 10px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med);
}
.product:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--line); }

.seller-card { position: relative; overflow: hidden; border-radius: var(--r-md); }
.seller-card .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 15px;
  display: block;
  text-align: center;
  color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.55));
  border-top: 1px solid rgba(255,255,255,.12);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.seller-card:hover .overlay,
.seller-card:focus-within .overlay { opacity: 1; transform: none; pointer-events: auto; }

.recent-card { height: 672px; }

.menu-card { transition: border-color .4s ease, box-shadow .4s ease; }
.menu-card:hover { border: 1px dotted var(--brand) !important; box-shadow: var(--shadow-1); }
.menu-card i,
.menu-card .menu-card-text { transition: background-color .4s ease, color .4s ease; }
.menu-card:hover i { background-color: var(--brand) !important; color: #fff !important; }
.menu-card:hover .menu-card-text { color: var(--brand) !important; }

.new-live-badge { transition: background-color 1s ease; }

/* Resources list (was .resounce-link-section) */
.resounce-link-section,
.resource-link-section {
  display: flex;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--bs-border-color, var(--line));
}
.resounce-link-section:last-child,
.resource-link-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.resource-url a { width: 150px; }


/* ==========================================================================
   09 SERVICE PAGE
   ========================================================================== */
.breadcrumb-item a { font-size: 13px; color: var(--brand); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { font-size: 13px; color: var(--muted); }
.breadcrumb-item + .breadcrumb-item::before { color: #bdc1c6; }

.svc-logo {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: #111;
  background: #ffcc00;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-md);
}

.stat-cell { flex: 1; padding: 14px 5px; border-right: 1px solid var(--line-soft); }
.stat-cell:last-child { border-right: none; }
.stat-lbl {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);       /* was #9aa0a6 (contrast 2.6:1) */
}
.stat-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.g-divider { margin: 20px 0; border: 0; border-top: 1px solid var(--line-soft); }

/* Shared button base */
.btn-place,
.btn-download,
.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-place { width: 100%; height: 48px; font-size: 14px; background: var(--brand); }
.btn-download { height: 38px; padding: 0 18px; font-size: 13px; background: var(--brand); }
.btn-login { height: 38px; padding: 0 18px; font-size: 13px; background: var(--warn); }

.btn-place:hover,
.btn-download:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 4px 14px rgba(var(--brand-rgb), .3); }
.btn-login:hover { background: var(--warn-dark); color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.3); }
.btn-place:active,
.btn-download:active,
.btn-login:active { transform: scale(.985); }

.qi-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  background: var(--surface-2);
  border: 1px solid #dadce0;
  border-radius: 999px;
}
.qi-tag i { font-size: 11px; color: var(--dim); }

.desc-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  border-bottom: 1px solid var(--surface-2);
}
.desc-line:last-child { border-bottom: none; }
.desc-line i { margin-top: 2px; font-size: 14px; flex-shrink: 0; color: var(--brand); }

.order-panel { position: sticky; top: 16px; }

.panel-title {
  display: inline-block;
  margin-bottom: 16px;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
}

.btn-imei {
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid #dadce0;
  border-radius: var(--r-sm);
  transition: background .13s, border-color .13s, color .13s;
}
.btn-imei:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.tool-desc { margin-bottom: 16px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* API docs layout + service list sidebar */
.api-docs-content {
  width: calc(100% - 10px);
  height: 100%;
  padding-right: 30px;
  border-right: 1px solid var(--line);
}

.service-group {
  position: sticky;
  top: 0;
  width: 300px;
  height: 100vh;
  margin-bottom: 30px;
  padding-bottom: 10px;
  background: var(--surface);
}
.group-search { position: sticky; top: 0; z-index: 10; background: var(--surface); }
.group-list { height: calc(100% - 125px); overflow-y: auto; }
.group-list a:first-child { margin-top: 0 !important; padding-top: 25px !important; border-top: 0 !important; }
.group-img { width: 90px; }
.group-title { width: calc(100% - 90px); font-size: 13px; }


/* ==========================================================================
   10 ORDER MODAL
   ========================================================================== */
#orderDetailsModal .modal-header {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--brand-rgb), .35), transparent 55%),
    linear-gradient(0deg, #061324 0%, #0b1f3a 35%, #132f5f 60%, #1e4fa3 100%);
}
.modal-header-content { border-top: 1px solid rgba(67,86,111,.31); }
.order-modal-title { font-size: 18px; }
.order-modal-status { width: 130px; }
.order-id-text,
.order-history-modal-title { color: #fff; }
.order-history-modal-close { filter: invert(1); opacity: 1; }
.order-modal-close { color: #fff; background: transparent; border: 1px solid rgba(153,153,153,.48); }
.order-modal-close:hover { background: rgba(255,255,255,.12); }
.order-comments-section { background: #f8f9fa; }


/* ==========================================================================
   11 AUTH MODAL
   ========================================================================== */
#gsmAuthModal .auth-illus-panel {
  background-color: #f8fbfa;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(255,255,255,.95) 0%, transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(var(--brand-rgb), .18) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0%, transparent 58%);
}

.auth-error-banner {
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity .32s var(--ease),
    transform .32s var(--ease),
    max-height .32s var(--ease),
    margin-bottom .32s var(--ease);
}
.auth-error-banner.show { max-height: 5rem; margin-bottom: 1rem; opacity: 1; transform: none; }

.auth-error-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, rgba(var(--bs-danger-rgb, 220,53,69), .08), rgba(var(--bs-danger-rgb, 220,53,69), .03));
  border: 1px solid rgba(var(--bs-danger-rgb, 220,53,69), .16);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.auth-error-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; color: var(--bs-danger, #dc3545); }
.auth-error-text { font-size: .8125rem; font-weight: 500; line-height: 1.45; color: var(--bs-body-color); }

#regPasswordRulesPanel .progress { background: #e9e9e9; }

/* OTP */
.custom-otp-verification,
.custom-otp-verification div { padding-left: 5px; padding-right: 5px; }

/* Success / check-email states */
.auth-swal-view { --swal-color: var(--bs-success, var(--success)); }
#view-register-check-email.auth-swal-view { --swal-color: var(--brand); }

#view-register-check-email.verify-email-view {
  min-height: 26rem;
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#view-register-check-email .verify-email-body { width: 100%; max-width: 18.5rem; }
#view-register-check-email .verify-email-card {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  text-align: left;
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .07), rgba(var(--brand-rgb), .02));
  border: 1px solid rgba(var(--brand-rgb), .14);
  border-radius: .875rem;
  box-shadow: 0 4px 18px rgba(var(--brand-rgb), .08);
}
#view-register-check-email .verify-email-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--brand);
  background: rgba(var(--brand-rgb), .12);
  border-radius: .625rem;
}
#view-register-check-email .verify-email-card-text {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bs-body-color);
  word-break: break-word;
}

.auth-swal-view .auth-swal-icon,
.auth-swal-view .auth-swal-pulse,
.auth-swal-view .auth-swal-icon-wrap { width: 5rem; height: 5rem; }

.auth-swal-view .auth-swal-pulse {
  border: 2px solid var(--swal-color);
  opacity: 0;
  animation: authSwalPulse 1.8s ease-out .35s infinite;
}
.auth-swal-view .auth-swal-icon-wrap {
  transform: scale(0);
  animation: authSwalPop .5s cubic-bezier(.175,.885,.32,1.275) forwards;
}
.auth-swal-view .auth-swal-icon-wrap svg { display: block; width: 100%; height: 100%; }

.auth-swal-view .auth-swal-ring {
  fill: none;
  stroke: var(--swal-color);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: authSwalRing .55s ease-in-out forwards;
}
.auth-swal-view .auth-swal-fill {
  fill: var(--swal-color);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: authSwalFill .35s ease-out .35s forwards;
}
.auth-swal-view .auth-swal-check {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: authSwalCheck .35s ease-out .55s forwards;
}
.auth-swal-view .auth-swal-mail {
  opacity: 0;
  transform: scale(.82);
  transform-box: fill-box;
  transform-origin: center;
  animation: authSwalMail .4s ease-out .55s forwards;
}
.auth-swal-view .auth-swal-step { opacity: 0; animation: authSwalContent .45s ease forwards; }
.auth-swal-view .auth-swal-step-1 { animation-delay: .72s; }
.auth-swal-view .auth-swal-step-2 { animation-delay: .82s; }
.auth-swal-view .auth-swal-step-3 { animation-delay: .92s; }
.auth-swal-view .auth-swal-step-4 { animation-delay: 1.02s; }

/* Standalone success circle */
.success-circle .circle-bg { stroke-dasharray: 207; stroke-dashoffset: 207; animation: draw-circle .5s ease-out forwards; }
.success-circle .check     { stroke-dasharray: 50;  stroke-dashoffset: 50;  animation: draw-check .3s .5s forwards; }

@keyframes draw-circle   { to { stroke-dashoffset: 0; } }
@keyframes draw-check    { to { stroke-dashoffset: 0; } }
@keyframes authSwalRing  { to { stroke-dashoffset: 0; } }
@keyframes authSwalCheck { to { stroke-dashoffset: 0; } }
@keyframes authSwalPop   { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes authSwalFill  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes authSwalMail  { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes authSwalContent { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes authSwalPulse {
  from { transform: translate(-50%, -50%) scale(.85); opacity: .55; }
  to   { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}


/* ==========================================================================
   12 FOOTER
   ========================================================================== */
.top-footer {
  padding: 30px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    var(--brand);
}
.top-footer-content,
.footer-main { max-width: 1230px; margin: 0 auto; padding: 0 20px; }
.top-footer-title { font-size: 14px; }

.footer {
  position: relative;
  padding: 48px 0 0;
  overflow: hidden;
  background: var(--footer-bg);
}

.foot-grid {
  display: grid;
  grid-template-columns: 300px 1fr 1fr 1fr 200px;
  gap: 30px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.first-footer { max-width: 260px; }

/* Brand column */
.brand-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.brand-logo img { width: auto; height: 35px; }
.brand-logo-name { font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.brand-desc { margin: 15px 0; font-size: 14px; line-height: 1.75; color: var(--footer-text); }

.ct { display: flex; flex-direction: column; }
.ct-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--footer-text);
  transition: color .13s;
}
.ct-item i { width: 14px; flex-shrink: 0; font-size: 13px; text-align: center; color: var(--footer-text); transition: color .13s; }
.ct-item a { color: var(--footer-text); }
.ct-item:hover,
.ct-item:hover i,
.ct-item a:hover { color: var(--footer-hover); }

.socs { display: flex; align-items: center; gap: 6px; }
.sc {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--footer-text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  transition: all .14s;
}
.sc:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); transform: translateY(-1px); }

/* Link columns */
.col-title {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}
.col-links { display: flex; flex-direction: column; }
.col-link {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--footer-text);
  transition: color .13s, transform .13s;
}
.col-link:hover { color: var(--footer-hover); transform: translateX(3px); }

/* App buttons */
.app-col-desc { margin-bottom: 18px; font-size: 13px; line-height: 1.65; color: var(--footer-text); }
.app-btns { display: flex; flex-direction: column; gap: 10px; }
.abt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--footer-text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all .16s;
}
.abt:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.1); }
.abt i { flex-shrink: 0; font-size: 22px; }
.abt-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}
.abt-text strong { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; }

/* Trust + payment strip */
.mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.trust { display: flex; flex-wrap: wrap; gap: 6px; }
.tp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sub, var(--muted));
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  user-select: none;
  transition: all .13s;
}
.tp i { font-size: 11px; color: var(--brand); }
.tp:hover { color: var(--brand); border-color: var(--brand); }

.pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pay-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.55);
}
.pay-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pc {
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  transition: all .13s;
}
.pc:hover { color: #fff; border-color: #fff; }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0 22px;
}
.foot-copy { font-family: var(--font-mono); font-size: 13px; color: var(--footer-text); }
.foot-copy a { padding-bottom: 3px; color: #fff; border-bottom: 1px solid #fff; transition: opacity .13s; }
.foot-copy a:hover { opacity: .8; }
.foot-pol { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-pol a { font-size: 12px; color: rgba(255,255,255,.6); transition: color .13s; }
.foot-pol a:hover { color: #fff; }


/* ==========================================================================
   13 RESPONSIVE  (Bootstrap breakpoints, largest → smallest)
   ========================================================================== */
@media (max-width: 1399px) {
  .gsm-theme-header { max-width: 1120px; }
  .footer-main,
  .top-footer-content { max-width: 1150px; }
}

@media (max-width: 1250px) {
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

@media (max-width: 1199px) {
  .gsm-theme-header { max-width: 940px; }
  .footer-main,
  .top-footer-content { max-width: 970px; }
  .custom-xl-left-border  { border-left: 0; }
  .custom-xl-right-border { border-right: 0; }
  .recent-card { height: auto; }
  .api-docs-content {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    padding: 0 0 26px;
    border-right: 0;
    border-bottom: 2px solid #d1d6dd;
  }
}

@media (max-width: 991px) {
  .gsm-header { height: auto; padding: 15px 0; }
  .gsm-theme-header { max-width: 695px; }
  .nav-container,
  .customer-header-auth { display: none; }
  .footer-main,
  .top-footer-content { max-width: 730px; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .custom-header-height { padding: 50px 0; }
  .m-border-top { border-top: 1px solid var(--line); }
  .custom-lg-left-border  { border-left: 0; }
  .custom-lg-right-border { border-right: 0; }
}

@media (max-width: 767px) {
  .gsm-theme-header { max-width: 520px; }
  .footer-main,
  .top-footer-content { max-width: 550px; }
  .foot-grid { grid-template-columns: 1.6fr 1fr; }
  .service-list { width: 100%; }
  .h-md-auto { height: auto !important; }
  .custom-left-border  { border-left: 0; }
  .custom-right-border { border-right: 0; }
}

@media (max-width: 575px) {
  .gsm-theme-header { max-width: 574px; padding: 0 15px; }
  .footer-main,
  .top-footer-content { max-width: 574px; }
  .custom-otp-verification { padding: 0 10px !important; }
}

@media (max-width: 450px) {
  .foot-grid { grid-template-columns: 1fr; }
  .mid,
  .foot-bar { justify-content: center; }
}

@media (max-width: 440px) {
  .service-icon { width: auto; height: auto; }
}

@media (max-width: 400px) {
  .login-otp { overflow-x: auto; }
  .otp-section-inputs { width: 450px; }
  .resounce-link-section,
  .resource-link-section { display: block; }
  .resource-url { margin-top: 12px; }
  .resource-url a { width: 100%; }
  .top-footer-title { font-size: 12px; }
}

@media (max-width: 330px) {
  .logo { max-width: 150px; }
}


/* ==========================================================================
   14 REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .auth-swal-view .auth-swal-step,
  .auth-swal-view .auth-swal-mail { opacity: 1; }
}