/* =========================================================
   EKART CSS (v0.3.2)
   Purpose: Clean, elegant black/white UI for Itinerary + Checkout
   Notes:
   - All key styles are grouped and commented.
   - Edit variables in :root to quickly retheme.
   - Buttons (primary/secondary/ghost) share consistent size & hover grow.
   - Stepper controls are modern + crisp; default spinners removed.
   ========================================================= */

:root{
  /* -------------------------------
     THEME VARIABLES
     Adjust these only to retheme
     ------------------------------- */
  --ekart-bg:#F2F0E8;
  --ekart-text:#174A43;
  --ekart-muted:#6b7280;         /* slate-500 */
  --ekart-border:#e5e7eb;        /* gray-200 */
  --ekart-shadow:0 6px 24px rgba(0,0,0,.06);

  --ekart-primary:#Ffff;       /* black primary */
  --ekart-primary-text:#174A43;  /* white on black */

  --ekart-secondary:#F2F0E8;     /* white secondary */
  --ekart-secondary-text:#174A43;   /* black on white */
  --ekart-secondary-border:#174A43;

  --ekart-ghost-bg:#ffffff;      /* white ghost */
  --ekart-ghost-border:#174A43;  /* light gray border */

  --ekart-card:#Ffff;             /* card bg */
  --ekart-pill:#ffff;          /* subtle gray for steppers */
}

/* =========================================================
   CONTAINERS
   - The main summary card and its header/footer
   ========================================================= */
.ekart-summary{
  width:100%;
  max-width:1100px;
  margin:40px auto;
  padding:20px;
  background:var(--ekart-bg);
  color:var(--ekart-text);
  border-radius:16px;
  box-shadow:var(--ekart-shadow);
  border:1px solid var(--ekart-border);
}

.ekart-summary__header,
.ekart-summary__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.ekart-summary__header h2{
  letter-spacing:4px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ekart-muted);
  margin:0;
}

.ekart-summary__actions{
  display:flex;
  gap:10px; /* spacing between Back / Clear / Exit */
}

/* =========================================================
   LIST + ITEM CARDS
   - Clean spacing
   - Name, Type, Qty aligned with breathing room
   - Push mid column slightly right from image
   ========================================================= */
.ekart-list{ 
  margin:16px 0; 
  display:flex; 
  flex-direction:column; 
  gap:14px; 
}

.ekart-item{
  display:grid;
  grid-template-columns:100px 1fr auto; /* image | content | price/actions */
  gap:16px;
  align-items:center;
  padding:16px;
  border:1px solid var(--ekart-border);
  border-radius:14px;
  background:var(--ekart-card);
}

.ekart-item__left img{
  width:100px;
  height:80px;
  object-fit:cover;
  border-radius:10px;
}

.ekart-item__mid{
  display:flex;
  flex-direction:column;
  gap:10px;                 /* space between name, type, qty */
  padding-left:4px;         /* subtle push to the right */
}

.ekart-item__name{
  font-weight:800;
  font-size:1.05rem;        /* slightly larger name */
  color:var(--ekart-text);
  text-decoration:none;
  line-height:1.25;
}
.ekart-item__name:hover{ text-decoration:underline; }

.ekart-item__meta{
  color:var(--ekart-muted);
  font-size:.92rem;
  line-height:1.25;
}

.ekart-item__right{
  display:flex;
  align-items:center;
  gap:16px;
}

.ekart-item__price{ color:var(--ekart-muted); font-weight:700; }
.ekart-item__line{  font-weight:800; }

/* =========================================================
   STEPPER (modern qty control)
   - No default browser spinners
   - Rounded pill with +/- buttons
   ========================================================= */
.stepper{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ekart-pill);
  border-radius:999px;
  padding:2px;
  border:1px solid var(--ekart-border);
  width:max-content;
}
.stepper .qty-input{
  width:48px;               /* Larger for tap targets */
  text-align:center;
  border:none;
  background:transparent;
  font-weight:400;
  color:var(--ekart-text);
  font-size:0.95rem;
}
/* Remove default number spinners (Chrome/Edge/Safari) */
.stepper .qty-input::-webkit-outer-spin-button,
.stepper .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* Remove default number spinners (Firefox) */
.stepper .qty-input[type=number]{ -moz-appearance:textfield; }

.stepper button{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:var(--ekart-secondary);
  color:var(--ekart-text);
  font-size:18px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  border:1px solid var(--ekart-border);
  transition:transform 160ms ease, filter 160ms ease;
}
.stepper button:hover{
  transform:scale(1.06);
  filter:brightness(0.98);
}

/* Remove button */
.ekart-remove{
  background:transparent;
  border:1px solid #174A43;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  color:#174A43;
  transition:transform 160ms ease, filter 160ms ease;
}
.ekart-remove:hover{
  transform:scale(1.03);
  background:#174A43;
}

/* =========================================================
   TOTALS + CTA
   ========================================================= */
.ekart-summary__footer{ padding-top:6px; }
.ekart-total{ display:flex; align-items:center; gap:8px; color:var(--ekart-text); }
.ekart-total span{ color:var(--ekart-muted); }
.ekart-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   BUTTONS (Unified)
   - Primary, Secondary, Ghost
   - All same height/shape; subtle grow on hover
   ========================================================= */
.ekart-btn{
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  border:1px solid transparent;
  min-height:44px;          /* Consistent height */
  line-height:1;
  transition:transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
	color:#174A43;
}
.ekart-btn:hover{
  transform:scale(1.03);
  filter:brightness(0.97);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  color:#174A43;
}

/* Use primary for Login / Logout / Proceed / Create Account */
.ekart-btn--primary{ background:var(--ekart-primary); color:var(--ekart-primary-text); }

/* Secondary for fallback alternative actions */
.ekart-btn--secondary{ background:var(--ekart-secondary); color:var(--ekart-secondary-text); border-color:var(--ekart-secondary-border); }

/* Ghost for "Back / Clear / Exit" trio */
.ekart-btn--ghost{ background:var(--ekart-ghost-bg); color:#174A43; border-color:color:#174A43; }

/* =========================================================
   TOAST
   ========================================================= */
#ekart-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:24px;
  background:#111; color:#fff;
  padding:10px 14px; border-radius:10px;
  display:none; z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
#ekart-toast.err{ background:#b91c1c; }

/* =========================================================
   HEADER BADGE
   ========================================================= */
a.ekart-badge-link{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  background:#174A43; color:#fff!important; border-radius:999px; text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  transition:transform 160ms ease, filter 160ms ease;
}
a.ekart-badge-link:hover{ transform:scale(1.03); filter:brightness(0.96); }
.ekart-badge-label{ color:#F2F0E8!important; font-weight:700; line-height:1; letter-spacing:.5px; }
.ekart-badge-count{ background:#fff; color:#174A43; font-weight:800; padding:2px 10px; min-width:26px; line-height:20px; font-size:13.5px; border-radius:999px; border-color:#174A43; text-align:center; }

/* =========================================================
   CHECKOUT FORM (Step 2)
   - Larger inputs, textarea height
   - Date RANGE layout (From / To) when JS enhancement is active
   ========================================================= */
.ekart-form{
  max-width:1100px;
  margin:28px auto;
  background:#F2F0E8;
  border:1px solid var(--ekart-border);
  border-radius:16px;
  box-shadow:var(--ekart-shadow);
  padding:18px;
}

/* Title matches the itinerary header style */
.ekart-form-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.ekart-form-header h2{
  letter-spacing:4px; font-weight:800; text-transform:uppercase; color:#174A43;
  margin:0;
}

/* NOTE: If you want the form hidden until "Proceed to Checkout",
   let JS add body.ekart-show-checkout; CSS below will respect it. */
.ekart-form{ display:none; }                    /* default hidden (step behavior) */
body.ekart-show-checkout .ekart-form{ display:block; }

.ekart-form-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.ekart-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--ekart-text); }
.ekart-form label span{ color:#174A43; margin-left:4px; }

.ekart-form input[type="text"],
.ekart-form input[type="email"],
.ekart-form input[type="tel"],
.ekart-form input[type="date"],
.ekart-form input[type="number"],
.ekart-form textarea{
  border:1px solid var(--ekart-border);
  border-radius:10px;
  padding:12px 14px;          /* bigger tap area */
  font-size:0.98rem;
}

/* Date range block (injected by JS) */
.ekart-date-range{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%;
}
.ekart-date-range label{ margin:0; }

.ekart-form textarea{
  min-height:150px;           /* room for writing */
  resize:vertical;            /* allow manual resize */
}

.ekart-form-actions{ margin-top:14px; display:flex; justify-content:flex-end; gap:10px; }

/* Subtle “you’re in step 2” emphasis */
body.ekart-show-checkout .ekart-summary{
  outline: 1px dashed var(--ekart-border);
  opacity:.98;
}
body.ekart-show-checkout .ekart-form{
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  border-color:#dfe3e8;
}
/* ======================================================
   FINAL CSS PATCH: asterisks alignment, date polish (WebKit),
   title spacing, and textarea (Enter/new-lines) — v0.3.3
   ====================================================== */

/* Notes: allow new lines and good wrapping */
.ekart-form textarea{
  display:block;
  width:100%;
  min-height:160px;
  line-height:1.4;
  white-space:pre-wrap;   /* keeps Enter/newlines AND wraps long lines */
  overflow:auto;
  word-break:break-word;
}

/* Title spacing above the form */
.ekart-form-header{ margin-bottom:18px; }
.ekart-form-header h2{ margin:0 0 8px 0; }

/* Required asterisks — keep them inline with the label title */
.ekart-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* If your label starts with a title span, align the star next to it */
.ekart-form label .ekart-labelline{
  display:inline-flex;
  align-items:baseline;
  gap:6px;                 /* space between title and star */
  line-height:1.2;
}

/* The red star (wrapped into .ekart-labelline via JS patch below) */
.ekart-form label .ekart-labelline .ekart-star{
  color:#b91c1c;
  font-weight:700;
  line-height:1;
  transform:translateY(-1px); /* nudge upward so it feels top-right */
}

/* Date range: WebKit polish so the preview text looks even */
.ekart-form input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  line-height:1.2;
  min-height:44px;          /* match other inputs */
}
.ekart-form input[type="date"]::-webkit-datetime-edit { padding:0 0 0 2px; }
.ekart-form input[type="date"]::-webkit-calendar-picker-indicator { opacity:.85; }

/* Keep two-column date range on desktop; stack on small screens */
.ekart-date-range{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
@media (max-width:560px){
  .ekart-date-range{ grid-template-columns:1fr; }
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px){
  .ekart-item{ grid-template-columns:80px 1fr; }
  .ekart-item__right{ grid-column:1/-1; justify-content:space-between; }
  .ekart-item__left img{ width:80px; height:64px; }
  .ekart-form-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .ekart-form-row{ grid-template-columns:1fr; }
  .ekart-date-range{ grid-template-columns:1fr; }
}

/* ================================================
   Fallback buttons — ensure anchors look like buttons
   even if classes are missing or stripped by a theme.
   ================================================ */
a#ekart-checkout,
a#ekart-login,
a#ekart-register,
a#ekart-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  min-height:44px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  background:var(--ekart-primary);
  color:var(--ekart-primary-text);
  line-height:1;
  transition:transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
a#ekart-checkout:hover,
a#ekart-login:hover,
a#ekart-register:hover,
a#ekart-logout:hover{
  transform:scale(1.03);
  filter:brightness(0.97);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* If you prefer Register or Logout to be white-outline (secondary), uncomment: */
/*
a#ekart-register,
a#ekart-logout{
  background:var(--ekart-secondary);
  color:var(--ekart-secondary-text);
  border-color:var(--ekart-secondary-border);
}
*/

/* Hide the bottom “Please login to checkout” block if JS already
   put the page into 'step 1' mode (logged out UI only): */
body:not(.ekart-show-checkout) .ekart-empty{
  display:none;
}