/* ============================================================
   TimesPack — Design v3.0
   Vibrant gradients · Hero enhancements · Auth pages · Mobile polish
   ============================================================ */

:root {
  --purple:          #6941c6;
  --purple-2:        #9b7ef5;
  --purple-deep:     #4a2898;
  --lavender:        #f3eeff;
  --cyan:            #2e90fa;
  --ink:             #101828;
  --muted:           #667085;
  --success:         #12b76a;
  --bg-gradient:     linear-gradient(180deg, #f3eeff 0%, #f9fafb 30%, #eaf4ff 70%, #ffffff 100%);
}

body {
  background: var(--bg-gradient);
  background-attachment: fixed;
}

nav {
  border-bottom-color: #e4e7ec;
}

.btn {
  background: linear-gradient(135deg, #6941c6, #7c5ce0);
  box-shadow: 0 8px 24px rgba(105,65,198,0.18);
}
.btn:hover {
  background: linear-gradient(135deg, #7c5ce0, #8f6ef0);
}

.panel, .card {
  border-color: #e4e7ec;
  box-shadow: 0 4px 12px rgba(16,24,40,0.04), 0 1px 2px rgba(16,24,40,0.02);
}
.panel:hover, .card:hover {
  box-shadow: 0 12px 32px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
}

.full { width: 100%; text-align: center; }

/* ---- Auth Pages ---- */
.auth-shell {
  min-height: 600px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 60px;
  align-items: center;
}
.auth-brand h1 {
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.05;
  letter-spacing: -3px;
  margin: 16px 0;
}
.auth-brand h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-brand p,
.auth-card > p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
}
.auth-card {
  margin: 0;
  padding: 36px;
  background: #fff;
  border-radius: var(--radius-2xl, 32px);
  border: 1px solid #e4e7ec;
  box-shadow: 0 20px 48px rgba(16,24,40,0.08);
}
.auth-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  color: #fff;
  font-weight: 800;
  font-size: 21px;
  margin-bottom: var(--space-md);
}
.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}
.auth-switch a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--purple-2);
  box-shadow: 0 0 0 4px var(--lavender);
}

/* ---- Booking Map ---- */
.booking-map {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(105,65,198,0.12);
  border: 1px solid #e4e7ec;
}

/* ---- Quote Card ---- */
.quote-card {
  background: var(--lavender);
  border: 1px solid #e8dfff;
}

/* ---- Mobile Bottom Tabs ---- */
.mobile-tabs {
  display: none;
}

@media (max-width: 860px) {
  main {
    padding: var(--space-lg) 16px 100px;
  }

  .auth-shell {
    display: block;
    min-height: auto;
  }
  .auth-brand {
    display: none;
  }
  .auth-card {
    padding: 28px;
    margin: 8px auto;
    border-radius: 24px;
  }

  .mobile-tabs {
    display: flex;
    position: fixed;
    z-index: 80;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 64px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(16,24,40,0.12);
    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;
  }
  .mobile-tabs a span {
    display: block;
    color: var(--purple);
    font-size: 20px;
    margin-bottom: 2px;
  }
  .mobile-tabs .tab-main {
    margin-top: -28px;
  }
  .mobile-tabs .tab-main span {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--purple), var(--purple-2));
    color: #fff;
    box-shadow: 0 10px 28px rgba(105,65,198,0.35);
  }

  footer { display: none; }
}