/*
 * app.css — CUSTOMER theme (/buy, /login, /cafe…) = Tabler 1.6.1 markup with the "light & airy" skin:
 * Plus Jakarta Sans, soft grey page, white borderless cards with big radius and soft shadow, white sidebar
 * with pill-shaped active links. Components still output Tabler markup; the skin lives only here. Rules: design.md.
 */

:root {
  /* Light & airy skin. */
  --tblr-font-sans-serif: "Plus Jakarta Sans", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Tokens read by components.css (dropzone, tool workspace, filter bar…) — mapped to Tabler colours. */
  --cc-primary: var(--tblr-primary);
  --cc-primary-rgb: var(--tblr-primary-rgb);
  --cc-primary-hover: var(--tblr-primary-darken);
  --cc-primary-soft: var(--tblr-primary-lt);
  --cc-accent: var(--tblr-orange);
  --cc-accent-hover: var(--tblr-orange);
  --cc-success: var(--tblr-green);  --cc-success-soft: var(--tblr-green-lt);
  --cc-warning: var(--tblr-yellow); --cc-warning-soft: var(--tblr-yellow-lt);
  --cc-danger: var(--tblr-red);     --cc-danger-soft: var(--tblr-red-lt);
  --cc-info: var(--tblr-azure);     --cc-info-soft: var(--tblr-azure-lt);
  --cc-muted: var(--tblr-secondary); --cc-muted-soft: var(--tblr-bg-surface-secondary);
  --cc-body-bg: var(--tblr-body-bg);
  --cc-surface: var(--tblr-bg-surface);
  --cc-border: var(--tblr-border-color);
  --cc-text: var(--tblr-body-color);
  --cc-radius: var(--tblr-border-radius);
  --cc-radius-lg: var(--tblr-border-radius-lg);
  --cc-shadow: var(--tblr-shadow-card);
  --cc-shadow-lg: var(--tblr-shadow-dropdown);

  --tblr-body-bg: #f5f6fa;
  --tblr-border-radius: .625rem;
  --tblr-border-radius-lg: 1rem;
  --tblr-card-border-radius: 1rem;
  --cafe-soft-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
  --cafe-lift-shadow: 0 10px 30px rgba(16, 24, 40, .10);
}
body { background: var(--tblr-body-bg); }

/* Cards: borderless, rounded, soft shadow. */
.card {
  --tblr-card-border-color: transparent;
  --tblr-card-border-radius: 1rem;
  --tblr-card-inner-border-radius: 1rem;
  --tblr-card-cap-bg: transparent;
  box-shadow: var(--cafe-soft-shadow);
}
.card-header { border-bottom-color: var(--tblr-border-color-translucent); }
.card-title { font-weight: 700; }
.card-link-pop { transition: box-shadow .18s ease; }
/* Clickable cards don't move on hover: a primary ring appears, the icon square fills, the title turns primary. */
.card.card-link-pop:hover { transform: none; box-shadow: var(--cc-shadow), 0 0 0 2px var(--tblr-primary); }
.card-link-pop .avatar, .card-link-pop .card-title { transition: background-color .18s ease, color .18s ease; }
.card-link-pop:hover .avatar { background: var(--tblr-primary) !important; color: #fff !important; }
.card-link-pop:hover .card-title { color: var(--tblr-primary); }
.card.card-link-pop.opacity-75:hover { box-shadow: var(--cc-shadow), 0 0 0 2px var(--tblr-orange); }
.card-link-pop.opacity-75:hover .avatar { background: var(--tblr-orange) !important; }
.card-link-pop.opacity-75:hover .card-title { color: inherit; }
.card .avatar { border-radius: .75rem; }
.cafe-stat-value { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--tblr-body-color); }

/* Buttons and inputs: softer, rounder. */
.btn { border-radius: .625rem; font-weight: 600; }
.btn-primary { box-shadow: 0 4px 12px rgba(var(--tblr-primary-rgb), .25); }
.form-control, .form-select { border-radius: .625rem; }
.badge { border-radius: 999px; font-weight: 600; }

/* Page header. */
.page-pretitle { letter-spacing: .08em; }
.page-title { font-size: 1.5rem; font-weight: 800; }
@media (max-width: 575.98px) { .page-title { font-size: 1.25rem; } }

/* Sidebar: white, hairline border, pill-shaped links. */
.cafe-sidebar {
  --tblr-navbar-bg: #fff;
  --tblr-navbar-border-color: var(--tblr-border-color-translucent);
  background: #fff !important;
  border-right: 1px solid var(--tblr-border-color-translucent);
  box-shadow: none;
}
.cafe-sidebar .navbar-collapse { flex-direction: column; align-items: stretch; }
@media (min-width: 992px) { .cafe-sidebar .navbar-collapse { height: calc(100vh - 4.5rem); } }
.cafe-sidebar .navbar-brand { font-size: 1.125rem; }
.cafe-sidebar .navbar-nav { padding-inline: .75rem; gap: .125rem; }
.cafe-sidebar .nav-link {
  border-radius: 999px;
  padding: .55rem .9rem;
  color: var(--tblr-secondary);
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.cafe-sidebar .nav-link:hover { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.cafe-sidebar .nav-item.active > .nav-link {
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}
.cafe-sidebar .nav-item.active > .nav-link::after { display: none; }
.cafe-sidebar .nav-item.active > .nav-link .nav-link-icon { color: var(--tblr-primary); }
.cafe-sidebar .dropdown-menu { background: transparent; border: 0; box-shadow: none; }
.cafe-sidebar .dropdown-item { border-radius: 999px !important; font-weight: 500; }
.cafe-sidebar .dropdown-item.active { background: var(--tblr-primary-lt); color: var(--tblr-primary); font-weight: 700; }
.cafe-sidebar .dropdown-header { font-size: .6875rem; letter-spacing: .08em; }
.cafe-plan-card {
  margin: 1rem .75rem 1.25rem;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--tblr-primary-lt), var(--tblr-green-lt));
  color: var(--tblr-body-color);
}
.cafe-plan-card .ti, .cafe-plan-card i { color: var(--tblr-primary); font-size: 1.125rem; }

/* Top bar: transparent, blurred, sticks while scrolling. */
.cafe-topbar {
  --tblr-navbar-bg: transparent;
  --tblr-navbar-border-color: transparent;
  background: rgba(245, 246, 250, .8) !important;
  backdrop-filter: saturate(180%) blur(10px);
  position: sticky; top: 0; z-index: 1020;
  box-shadow: none;
}

/* Footer: quiet. */
.footer { border-top: 0; }

/* Brand mark (no logo image yet): Tabler avatar used as the logo. */
.navbar-brand .avatar, .brand-logo .avatar { --tblr-avatar-size: 2rem; }

/* Live India clock (<x-live-clock>) — dashboard header, right side. */
.cafe-clock { display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: 16px; padding: .6rem 1rem; box-shadow: var(--cc-shadow); }
.cafe-clock-time { font-size: 1.375rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tblr-body-color); }
.cafe-clock-date { font-size: .8125rem; color: var(--tblr-secondary); }

/* Tool search (<x-tool-search>) — big white pill on the dashboard. */
.cafe-tool-search .form-control { border: 0; border-radius: 16px; box-shadow: var(--cc-shadow); background: #fff; }
.cafe-tool-search .form-control:focus { box-shadow: var(--cc-shadow), 0 0 0 2px var(--tblr-primary); }
.cafe-tool-search kbd { background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); border: 1px solid var(--tblr-border-color); box-shadow: none; font-size: .75rem; }

/* Public site (<x-layouts.site>, <x-layouts.policy>, homepage) — 2026-10-11. Same skin: white bar, soft grey page, big radius. */
.cafe-site-nav { background: rgba(255, 255, 255, .85) !important; backdrop-filter: saturate(180%) blur(10px); position: sticky; top: 0; z-index: 1020;
  border-bottom: 1px solid var(--tblr-border-color-translucent); box-shadow: none; min-height: 4rem; }
.cafe-site-links a { color: var(--tblr-secondary); font-weight: 600; }
.cafe-site-links a:hover { color: var(--tblr-body-color); text-decoration: none; }
.cafe-hero { padding: 5rem 0 4rem; background: radial-gradient(60rem 26rem at 85% -10%, var(--tblr-primary-lt), transparent 70%), radial-gradient(40rem 20rem at 0% 110%, var(--tblr-green-lt), transparent 70%); }
.cafe-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.cafe-hero .lead { font-size: 1.15rem; color: var(--tblr-secondary); max-width: 34rem; }
.cafe-hero-shot { background: #fff; border-radius: 1.25rem; box-shadow: var(--cafe-lift-shadow); padding: 1.25rem; }
.cafe-hero-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; background: var(--tblr-bg-surface-secondary); border-radius: .75rem; padding: .75rem; }
.cafe-hero-sheet span { aspect-ratio: 35 / 45; border-radius: .25rem; background: linear-gradient(180deg, #dbe7ff 0 100%); position: relative; overflow: hidden; }
.cafe-hero-sheet span::before { content: ""; position: absolute; left: 50%; top: 22%; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #c8a58a; }
.cafe-hero-sheet span::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: 86%; height: 38%; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: #2f3b52; }
.cafe-section { padding: 4.5rem 0; }
.cafe-section-white { background: #fff; }
.cafe-section-head { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
.cafe-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin-bottom: .5rem; }
.cafe-section-head p { color: var(--tblr-secondary); font-size: 1.05rem; margin: 0; }
.cafe-site-pagehead { padding: 3rem 0 1.5rem; }
.cafe-site-pagehead .page-title { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.cafe-policy { max-width: 52rem; }
.cafe-policy .markdown { font-size: .95rem; line-height: 1.7; }
.cafe-policy .markdown h2 { font-size: 1.125rem; font-weight: 700; margin-top: 1.75rem; }
.cafe-site-footer { background: #fff; border-top: 1px solid var(--tblr-border-color-translucent); padding: 3rem 0 1.5rem; margin-top: 2rem; }
.cafe-site-footer a { display: block; color: var(--tblr-secondary); padding: .2rem 0; }
.cafe-site-footer a:hover { color: var(--tblr-primary); text-decoration: none; }
.cafe-site-footer-title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.cafe-site-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--tblr-border-color-translucent);
  margin-top: 2rem; padding-top: 1.25rem; font-size: .8125rem; color: var(--tblr-secondary); }
.cafe-site-footer-base a { display: inline; padding: 0; }
@media (max-width: 767.98px) { .cafe-hero { padding: 3rem 0 2.5rem; } .cafe-section { padding: 3rem 0; } }