/* ─── Getai Grotesk Display font ───────────────────────────────────────────── */
@font-face {
  font-family: 'Getai';
  src: url('../fonts/GetaiGroteskDisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── SheekSA Theme ────────────────────────────────────────────────────────── */
:root {
  --bb-charcoal:  #2C3240;
  --bb-teal:      #5BBFB8;   /* soft elegant teal                */
  --bb-teal-dark: #449E97;   /* hover / deeper                   */
  --bb-teal-mid:  #7ECECA;   /* lighter mid tone                 */
  --bb-bg:        #F7F8FA;   /* warm light background            */
  --bb-teal-light:#EDF7F6;   /* soft tint for badges / fills     */
  --bb-surface:   #FFFFFF;
  --bb-border:    #E8EAED;
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
body {
  margin: 0;
  background-color: var(--bb-bg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--bb-charcoal);
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.fw-bold, .fw-semibold, .brand-text, .navbar-brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--bb-charcoal);
}

/* ─── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(180deg, #2B2D35 0%, #1D1F26 100%) !important;
  box-shadow: 0 3px 0 var(--bb-teal-mid), 0 4px 20px rgba(0,0,0,.25) !important;
}

/* Logo — original colours, stronger glow for visibility on dark bar */
.navbar-brand img {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.7))
          drop-shadow(0 0 16px rgba(255,255,255,.35))
          drop-shadow(0 2px 6px rgba(126,206,202,.3));
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.25rem;
  color: #E8ECF0 !important;
  letter-spacing: -0.3px;
}

.nav-link {
  color: rgba(210,215,225,.75) !important;
  font-weight: 500;
  font-size: .93rem;
  transition: color .15s;
}

.nav-link:hover,
.nav-link.fw-semibold {
  color: #fff !important;
}

/* Navbar toggler icon on dark bg */
.navbar-toggler {
  border-color: rgba(255,255,255,.25) !important;
}
.navbar-toggler-icon {
  filter: invert(1);
}

/* Login / Sign up buttons in navbar */
.navbar .btn-outline-primary {
  color: rgba(200,215,220,.9) !important;
  border-color: rgba(91,191,184,.5) !important;
}
.navbar .btn-outline-primary:hover {
  background-color: var(--bb-teal) !important;
  border-color: var(--bb-teal) !important;
  color: #fff !important;
}
.navbar .btn-primary {
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* User avatar badge in navbar */
.navbar .badge {
  background: rgba(91,191,184,.2) !important;
  color: var(--bb-teal-mid) !important;
}
.navbar .nav-link.dropdown-toggle span:not(.badge) {
  color: rgba(210,215,225,.85) !important;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--bb-teal-mid) 0%, var(--bb-teal) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 2px 8px rgba(91,191,184,.3);
  transition: transform .15s, box-shadow .15s, filter .15s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  filter: brightness(0.93) !important;
  box-shadow: 0 4px 14px rgba(91,191,184,.35) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-primary:disabled {
  opacity: .55;
  transform: none;
}

.btn-outline-primary {
  color:        var(--bb-teal-dark) !important;
  border-color: var(--bb-teal)      !important;
  font-weight: 600;
  border-radius: 12px;
  transition: all .15s;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--bb-teal)  !important;
  border-color:     var(--bb-teal)  !important;
  color: #fff !important;
}

.btn-outline-secondary {
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border-color: var(--bb-border) !important;
  color: #6B7280 !important;
}

.btn-outline-secondary:hover {
  background: var(--bb-teal-light) !important;
  border-color: var(--bb-teal) !important;
  color: var(--bb-teal-dark) !important;
}

/* ─── Forms ────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  font-family: 'Plus Jakarta Sans', sans-serif;
  border-radius: 12px;
  border-color: var(--bb-border);
  background: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bb-teal);
  box-shadow: 0 0 0 3px rgba(91,191,184,.18);
}

.form-label {
  font-size: .88rem;
  font-weight: 600;
  color: #4B5563;
}

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--bb-border);
  border-radius: 20px;
  box-shadow: 0 1px 8px rgba(44,50,64,.05);
  background: var(--bb-surface);
}

/* ─── Hover card lift ─────────────────────────────────────────────────────── */
.hover-card {
  transition: transform .18s, box-shadow .18s;
}
.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(44,50,64,.10) !important;
  border-color: var(--bb-teal-mid) !important;
}

/* ─── Store page tab pills ─────────────────────────────────────────────────── */
.bb-tab-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.bb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: .93rem;
  cursor: pointer;
  border: 1.5px solid var(--bb-border);
  transition: all .18s;
  background: #fff;
  color: #9CA3AF;
}

.bb-tab svg { flex-shrink: 0; }

.bb-tab.active {
  background: linear-gradient(135deg, var(--bb-teal-mid) 0%, var(--bb-teal) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(91,191,184,.35);
}

.bb-tab:not(.active):hover {
  border-color: var(--bb-teal);
  color: var(--bb-teal-dark);
  background: var(--bb-teal-light);
}

/* ─── Store banner ─────────────────────────────────────────────────────────── */
.store-banner {
  background: linear-gradient(140deg, #7ECECA 0%, #44A8A2 50%, #2E8880 100%);
  border-radius: 20px;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* ─── Service thumbnail ────────────────────────────────────────────────────── */
.svc-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bb-teal-mid) 0%, var(--bb-teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Section icon headers ─────────────────────────────────────────────────── */
.section-icon-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--bb-charcoal);
}

.section-icon-title svg { color: var(--bb-teal); }

/* ─── List group items ─────────────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--bb-border) !important;
}

/* ─── Alerts & price summary ───────────────────────────────────────────────── */
.alert-info {
  background: var(--bb-teal-light);
  border-color: var(--bb-teal-mid);
  color: var(--bb-teal-dark);
  border-radius: 12px;
}

/* ─── Footer ───────────────────────────────────────────────────────────────── */
footer {
  font-size: .875rem;
  color: #9CA3AF;
  border-top: 1px solid var(--bb-border);
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
}

/* ─── Badges ───────────────────────────────────────────────────────────────── */
.badge-teal {
  background: var(--bb-teal-light);
  color: var(--bb-teal-dark);
}

/* ─── Price colour ─────────────────────────────────────────────────────────── */
.price-text {
  color: var(--bb-teal-dark);
  font-weight: 700;
}

/* ─── Scrollbar subtle ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: var(--bb-teal-mid); border-radius: 999px; }

/* ─── Nav tabs (non-store pages) ───────────────────────────────────────────── */
.nav-tabs {
  border-color: var(--bb-border);
}

.nav-tabs .nav-link.active {
  color:        var(--bb-charcoal) !important;
  border-bottom: 2.5px solid var(--bb-teal) !important;
  font-weight: 700;
}

.nav-tabs .nav-link {
  color: #9CA3AF !important;
  font-weight: 500;
}

/* ─── AI Studio nav pill ───────────────────────────────────────────────────── */
.nav-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(10,186,181,.45);
  color: rgba(200,215,220,.85) !important;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s;
}
.nav-ai-pill:hover,
.nav-ai-pill.active {
  background: rgba(10,186,181,.15);
  border-color: rgba(10,186,181,.8);
  color: #fff !important;
}

/* ─── Dropdown menus ───────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(44,50,64,.10);
}

.dropdown-item:hover {
  background: var(--bb-teal-light);
  color: var(--bb-teal-dark);
  border-radius: 8px;
}