/* ============================================================
   TimesPack Super App — Core Styles v3.0
   Vibrant · Mobile-First · Accessible · Bilingual BM/EN
   ============================================================ */

/* ---- Design Tokens ---- */
:root {

  /* Primary Purple */
  --purple:          #5b2bbf;

  --purple-light:    #9b7ef5;

  --purple-dark:     #32156f;

  --purple-soft:     #eee7ff;

  --purple-glow:     #e8dfff;


  /* Accent — Electric Blue */
  --blue:            #2e90fa;

  --blue-light:      #53b1fd;

  --blue-soft:       #eaf4ff;


  /* Accent — Coral Energy */
  --coral:           #f5415a;

  --coral-soft:      #fff0f2;


  /* Accent — Emerald */
  --emerald:         #12b76a;

  --emerald-soft:    #ecfdf3;


  /* Accent — Amber */
  --amber:           #f6a835;

  --amber-soft:      #fffbeb;


  /* Neutrals */
  --ink:             #101828;

  --ink-soft:        #344054;

  --muted:           #667085;

  --line:            #e4e7ec;

  --surface:         #ffffff;

  --bg:              #f9fafb;


  /* Gradients */
  --grad-primary:    linear-gradient(135deg, #5b2bbf 0%, #9b7ef5 100%);

  --grad-warm:       linear-gradient(135deg, #f5415a 0%, #f6a835 100%);

  --grad-cool:       linear-gradient(135deg, #2e90fa 0%, #12b76a 100%);

  --grad-hero:       linear-gradient(160deg, #eee7ff 0%, #eaf4ff 40%, #ecfdf3 100%);


  /* Shadows */
  --shadow-sm:       0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);

  --shadow-md:       0 4px 8px rgba(16,24,40,0.06), 0 2px 4px rgba(16,24,40,0.04);

  --shadow-lg:       0 12px 32px rgba(16,24,40,0.08), 0 4px 6px rgba(16,24,40,0.03);

  --shadow-xl:       0 20px 48px rgba(16,24,40,0.12), 0 8px 12px rgba(16,24,40,0.04);

  --shadow-glow:     0 8px 24px rgba(105,65,198,0.18);


  /* Radius */
  --radius-sm:       8px;

  --radius-md:       12px;

  --radius-lg:       18px;

  --radius-xl:       24px;

  --radius-2xl:      32px;


  /* Spacing */
  --space-xs:        4px;

  --space-sm:        8px;

  --space-md:        16px;

  --space-lg:        24px;

  --space-xl:        32px;

  --space-2xl:       48px;

}


/* ---- Reset & Base ---- */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }


html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

  -webkit-tap-highlight-color: transparent;

}


body {

  background: var(--bg);

  color: var(--ink);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  font-size: 16px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}


/* ---- Typography ---- */
h1, h2, h3, h4 {
 font-weight: 800;
 letter-spacing: -0.02em;
 line-height: 1.15;
 }

h1 {
 font-size: clamp(28px, 5vw, 44px);
 }

h2 {
 font-size: clamp(22px, 3.5vw, 36px);
 }

h3 {
 font-size: clamp(18px, 2.5vw, 24px);
 }


a {
 color: var(--purple);
 text-decoration: none;
 transition: color 0.2s;
 }

a:hover {
 color: var(--purple-dark);
 }


img {
 max-width: 100%;
 height: auto;
 display: block;
 }


/* ---- Navigation ---- */
nav {

  position: sticky;

  top: 0;

  z-index: 100;

  height: 68px;

  padding: 0 clamp(16px, 4vw, 32px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(20px) saturate(150%);

  -webkit-backdrop-filter: blur(20px) saturate(150%);

  border-bottom: 1px solid var(--line);

  box-shadow: 0 1px 3px rgba(16,24,40,0.04);

}


.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  flex-shrink: 0;

}

.brand img {

  width: 140px;

  height: auto;

}

.brand span {

  display: none;

  background: var(--grad-primary);

  color: #fff;

  padding: 4px 10px;

  border-radius: var(--radius-sm);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;

}

@media (min-width: 480px) {

  .brand span {
 display: inline-block;
 }

}


.nav-links {

  display: flex;

  align-items: center;

  gap: var(--space-xs);

}


.nav-links a,
.link {

  display: inline-flex;

  align-items: center;

  gap: var(--space-xs);

  color: var(--ink-soft);

  text-decoration: none;

  border: 0;

  background: none;

  font: inherit;

  font-weight: 600;

  font-size: 14px;

  padding: 8px 12px;

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: all 0.2s;

  white-space: nowrap;

}

.nav-links a:hover,
.link:hover {

  color: var(--purple);

  background: var(--purple-soft);

}


.nav-cta {

  background: var(--grad-primary) !important;

  color: #fff !important;

  font-weight: 700 !important;

  box-shadow: var(--shadow-glow);

}

.nav-cta:hover {

  color: #fff !important;

  transform: translateY(-1px);

  box-shadow: 0 12px 28px rgba(105,65,198,0.28);

}


.notification-link {

  position: relative;

}

.notification-link b {

  position: absolute;

  top: 2px;

  right: 2px;

  min-width: 18px;

  height: 18px;

  background: var(--coral);

  color: #fff;

  border-radius: 99px;

  font-size: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 4px;

}


.menu-toggle {

  display: none;

  border: 0;

  background: var(--purple-soft);

  color: var(--purple);

  border-radius: var(--radius-md);

  padding: 8px 12px;

  font-size: 22px;

  cursor: pointer;

  transition: all 0.2s;

}

.menu-toggle:hover {

  background: var(--purple-glow);

}


/* Language switcher */
.language-form {

  display: inline-flex;

  gap: 2px;

  background: var(--bg);

  border-radius: var(--radius-md);

  padding: 3px;

  border: 1px solid var(--line);

}

.language-form button {

  border: 0;

  background: transparent;

  padding: 6px 10px;

  border-radius: 6px;

  font-weight: 700;

  font-size: 12px;

  cursor: pointer;

  color: var(--muted);

  transition: all 0.2s;

}

.language-form button.active {

  background: var(--purple);

  color: #fff;

}

.language-form button:hover:not(.active) {

  color: var(--purple);

  background: var(--purple-soft);

}


/* ---- Main Content ---- */
main {

  max-width: 1200px;

  margin: 0 auto;

  padding: var(--space-xl) clamp(16px, 4vw, 32px);

  min-height: calc(100vh - 68px - 80px);

}


/* ---- Alerts / Messages ---- */
.alert {

  padding: 14px 18px;

  border-radius: var(--radius-lg);

  margin-bottom: var(--space-md);

  font-weight: 600;

  font-size: 14px;

  display: flex;

  align-items: center;

  gap: var(--space-sm);

}

.alert.success {

  background: var(--emerald-soft);

  color: #065f46;

  border-left: 4px solid var(--emerald);

}

.alert.error {

  background: var(--coral-soft);

  color: #981b2d;

  border-left: 4px solid var(--coral);

}

.alert.info {

  background: var(--blue-soft);

  color: #1e40af;

  border-left: 4px solid var(--blue);

}

.alert.warning {

  background: var(--amber-soft);

  color: #92400e;

  border-left: 4px solid var(--amber);

}


/* ---- Buttons ---- */
.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-sm);

  background: var(--grad-primary);

  color: #fff !important;

  border: 0;

  border-radius: var(--radius-md);

  padding: 12px 22px;

  font-weight: 700;

  font-size: 15px;

  text-decoration: none;

  cursor: pointer;

  box-shadow: var(--shadow-glow);

  transition: all 0.25s;

  white-space: nowrap;

}

.btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 12px 32px rgba(105,65,198,0.32);

}

.btn:active {

  transform: translateY(0);

}

.btn:disabled,
.btn.disabled {

  opacity: 0.5;

  pointer-events: none;

}


.btn.secondary {

  background: var(--surface);

  color: var(--purple) !important;

  border: 1.5px solid var(--purple-glow);

  box-shadow: var(--shadow-sm);

}

.btn.secondary:hover {

  border-color: var(--purple-light);

  background: var(--purple-soft);

}


.btn.danger {

  background: linear-gradient(135deg, var(--coral), #e03049);

  box-shadow: 0 8px 24px rgba(245,65,90,0.20);

}


.btn.small {

  padding: 8px 14px;

  font-size: 13px;

  border-radius: var(--radius-sm);

}


.btn.large {

  padding: 16px 28px;

  font-size: 17px;

  border-radius: var(--radius-lg);

}


/* ---- Cards ---- */
.tp-card,
.panel {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius-xl);

  padding: var(--space-lg);

  box-shadow: var(--shadow-sm);

  transition: all 0.25s;

}

.tp-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-lg);

  border-color: var(--purple-glow);

}

.panel {

  box-shadow: var(--shadow-md);

}


/* ---- Grids ---- */
.grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-md);

}


/* ---- Forms ---- */
label {

  display: block;

  font-weight: 700;

  font-size: 14px;

  margin-bottom: 6px;

  color: var(--ink-soft);

}


input, textarea, select {

  width: 100%;

  padding: 12px 14px;

  border: 1.5px solid var(--line);

  border-radius: var(--radius-md);

  background: var(--surface);

  font: inherit;

  font-size: 15px;

  color: var(--ink);

  outline: none;

  transition: all 0.2s;

  -webkit-appearance: none;

}

input:focus, textarea:focus, select:focus {

  border-color: var(--purple-light);

  box-shadow: 0 0 0 4px var(--purple-soft);

}


input::placeholder, textarea::placeholder {

  color: var(--muted);

  opacity: 0.7;

}


/* ---- Tags / Badges ---- */
.tag {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: var(--purple);

  text-transform: uppercase;

}

.tag::before {

  content: '';

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--emerald);

  box-shadow: 0 0 0 4px var(--emerald-soft);

}


.status {

  display: inline-flex;

  align-items: center;

  padding: 4px 10px;

  border-radius: 99px;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.3px;

}

.status.active,
.status.AVAILABLE,
.status.COMPLETED,
.status.PAID {

  background: var(--emerald-soft);

  color: #065f46;

}

.status.pending,
.status.PENDING,
.status.SEARCHING,
.status.PLACED {

  background: var(--amber-soft);

  color: #92400e;

}

.status.cancelled,
.status.CANCELLED,
.status.REJECTED,
.status.FAILED {

  background: var(--coral-soft);

  color: #981b2d;

}

.status.info,
.status.IN_PROGRESS,
.status.ASSIGNED {

  background: var(--blue-soft);

  color: #1e40af;

}


/* ---- Details Grid ---- */
.details {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 4px var(--space-lg);

  margin: var(--space-lg) 0;

}

.details p {

  font-size: 14px;

  padding: var(--space-sm) 0;

}

.details b {

  display: block;

  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 4px;

}


/* ---- Payment Box ---- */
.payment-box,
.paid-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-md);

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-lg);

  margin-bottom: var(--space-md);

}

.payment-box {

  background: var(--amber-soft);

  border: 1px solid #fde68a;

}

.paid-box {

  background: var(--emerald-soft);

  border: 1px solid #6ee7b7;

  color: #065f46;

  font-weight: 700;

}


/* ---- Waiting / Loading ---- */
.waiting-box {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: var(--space-md) var(--space-lg);

  background: var(--purple-soft);

  border-radius: var(--radius-lg);

  border: 1px solid var(--purple-glow);

  margin-bottom: var(--space-md);

}

.waiting-box span {

  width: 20px;

  height: 20px;

  border: 3px solid var(--purple-glow);

  border-top-color: var(--purple);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

}


@keyframes spin {

  to {
 transform: rotate(360deg);
 }

}


/* ---- Rating ---- */
.star-rating {

  display: flex;

  flex-direction: row-reverse;

  justify-content: flex-end;

  gap: 2px;

}

.star-rating input {
 display: none;
 }

.star-rating label {

  font-size: 28px;

  cursor: pointer;

  color: #d1d5db;

  transition: color 0.15s;

  padding: 0 2px;

}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {

  color: var(--amber);

}


/* ---- Footer ---- */
footer {

  text-align: center;

  padding: var(--space-lg);

  color: var(--muted);

  border-top: 1px solid var(--line);

  background: var(--surface);

  font-size: 13px;

}

footer img {

  width: 110px;

  margin: 0 auto var(--space-sm);

}

footer p {

  font-size: 12px;

}


/* ---- Quote Card ---- */
.quote-tp-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: var(--space-md) var(--space-lg);

  background: var(--purple-soft);

  border: 1px solid var(--purple-glow);

  border-radius: var(--radius-lg);

  margin: var(--space-md) 0;

}

.quote-tp-card span {

  color: var(--muted);

  font-size: 13px;

}

.quote-tp-card b {

  color: var(--purple-dark);

}


/* ---- Driver Card ---- */
.driver-tp-card {

  display: flex;

  align-items: center;

  gap: var(--space-md);

  padding: var(--space-md) var(--space-lg);

  border-radius: var(--radius-xl);

  background: var(--purple-soft);

  border: 1px solid var(--purple-glow);

  margin-top: var(--space-lg);

}

.driver-tp-card h3, .driver-tp-card p {

  margin: 2px 0;

}


/* ---- OTP ---- */
.otp-code {

  display: inline-block;

  font-size: 32px;

  font-weight: 900;

  letter-spacing: 8px;

  background: var(--purple-soft);

  color: var(--purple-dark);

  padding: 12px 24px;

  border-radius: var(--radius-lg);

  border: 2px dashed var(--purple-light);

}


/* ---- Mobile Bottom Tabs ---- */
.mobile-tabs {

  display: none;

}


@media (max-width: 860px) {

  /* Mobile nav */
  body {
 padding-bottom: 80px;
 }


  nav {

    height: auto;

    min-height: 60px;

    padding: 10px 16px;

  }

  .brand img {

    width: 110px;

  }

  .brand span {

    display: inline-block;

    font-size: 8px;

    padding: 3px 7px;

  }


  .menu-toggle {
 display: block;
 }


  .nav-links {

    display: none;

    position: absolute;

    left: 12px;

    right: 12px;

    top: 68px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: var(--radius-xl);

    padding: var(--space-sm);

    box-shadow: var(--shadow-xl);

    flex-direction: column;

    align-items: stretch;

    z-index: 200;

  }

  .nav-links.open {
 display: flex;
 }

  .nav-links a,
  .nav-links .link {

    text-align: left;

    width: 100%;

    padding: 12px 14px;

    border-radius: var(--radius-md);

  }


  main {

    padding: var(--space-lg) 16px 100px;

  }


  /* Mobile bottom tabs */
  .mobile-tabs {

    display: flex;

    position: fixed;

    z-index: 80;

    left: 8px;

    right: 8px;

    bottom: 8px;

    height: 64px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-xl);

    align-items: center;

    justify-content: space-around;

    padding: 4px 8px;

  }

  .mobile-tabs a {

    color: var(--muted);

    font-size: 10px;

    text-decoration: none;

    text-align: center;

    font-weight: 700;

    min-width: 44px;

    padding: 2px;

    transition: color 0.2s;

  }

  .mobile-tabs a span {

    display: block;

    font-size: 20px;

    margin-bottom: 2px;

    color: var(--muted);

    transition: color 0.2s;

  }

  .mobile-tabs .tab-main {

    margin-top: -28px;

  }

  .mobile-tabs .tab-main span {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: var(--grad-primary);

    color: #fff;

    box-shadow: var(--shadow-glow);

  }

  .mobile-tabs .tab-main:hover span {

    transform: scale(1.05);

  }


  footer {
 display: none;
 }


  .details {
 grid-template-columns: 1fr 1fr;
 }


  .tp-card {
 padding: var(--space-md);
 }

}


@media (max-width: 480px) {

  main {
 padding: var(--space-md) 12px 100px;
 }

  .details {
 grid-template-columns: 1fr;
 }

  .grid {
 grid-template-columns: 1fr;
 }


  h1 {
 font-size: 24px;
 }

  h2 {
 font-size: 20px;
 }


  .btn {
 padding: 10px 16px;
 font-size: 14px;
 width: 100%;
 }

  .btn.small {
 width: auto;
 }

}


/* TimesPack Premium Purple marketplace finish */
.tp-food-public-main{
  background:
    radial-gradient(circle at 8% 0%, rgba(117,68,220,.13), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(91,43,191,.10), transparent 24%),
    #eee7ff!important;
}
.tp-food-subnav{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(91,43,191,.12);
  box-shadow:0 3px 18px rgba(50,21,111,.07);
}
.tp-food-hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(154,115,239,.30), transparent 30%),
    linear-gradient(118deg,#32156f 0%,#4b1fa5 48%,#7544dc 100%);
  box-shadow:0 12px 32px rgba(50,21,111,.18);
}
.tp-food-search{
  box-shadow:0 8px 28px rgba(50,21,111,.14);
}
.tp-food-search button{
  background:linear-gradient(135deg,#5b2bbf,#7544dc);
  box-shadow:0 6px 16px rgba(91,43,191,.25);
}
.tp-food-filterbar,
.tp-food-benefits{
  border:1px solid rgba(91,43,191,.10);
  box-shadow:0 8px 24px rgba(50,21,111,.07);
}
.tp-food-dish-card,
.tp-food-restaurant-card,
.tp-food-empty{
  border:1px solid rgba(91,43,191,.08);
  box-shadow:0 8px 24px rgba(50,21,111,.07);
}
.tp-food-dish-card:hover,
.tp-food-restaurant-card:hover{
  border-color:rgba(91,43,191,.20);
  box-shadow:0 12px 30px rgba(50,21,111,.12);
  transform:translateY(-2px);
}
.tp-food-location span,
.tp-food-section-head>div>span,
.tp-food-dish-copy span,
.tp-food-meta span:first-child{
  color:#5b2bbf;
}
.tp-food-logo-placeholder{
  background:linear-gradient(135deg,#e5d9ff,#f7f4ff);
  border:1px solid rgba(91,43,191,.10);
}