/* inc/base.css — shared palette + layout (Marriott style) */

/* ---------- Color system ---------- */
:root{
  --bg:#0b1220;
  --text:#e7edf7;
  --muted:#aeb0bf;

  --card:#121a2b;
  --border:#1e2942;

  --brand:#c8102e;
  --brand-hover:#df2a46;
  --brand-active:#ff3b57;

  --field-bg:#0e1525;
  --field-border:#2c3a57;

  --ok:#35d07f;    --ok-glow:rgba(53,208,127,0.18);
  --err:#ff6a6a;   --err-glow:rgba(255,106,106,0.18);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f8f8f8;  --text:#1e1e1e; --muted:#666;
    --card:#ffffff; --border:#e6e6e8;
    --brand:#c8102e; --brand-hover:#a40d25; --brand-active:#8e0b1f;
    --field-bg:#fff; --field-border:#cfd2d8;

    --ok:#2e7d32;    --ok-glow:rgba(46,125,50,0.12);
    --err:#c62828;   --err-glow:rgba(198,40,40,0.12);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::placeholder{color:rgba(255,255,255,.55)}
@media (prefers-color-scheme: light){ ::placeholder{color:#9aa3ae} }

/* ---------- Header ---------- */
.brand-header{
  width:100%; display:flex; justify-content:center;
  background:#0f1423; border-bottom:1px solid var(--border); padding:12px 0;
}
@media (prefers-color-scheme: light){
  .brand-header{ background:#f5f5f5; border-bottom:1px solid #e0e0e0; }
}
.brand-container{width:100%; max-width:1200px; display:flex; justify-content:center; align-items:center; padding:0 16px}
.brand-logos{width:100%; height:auto; display:block; object-fit:contain}
@media (max-width:767px){ .brand-logos{ max-height:min(56vh,340px); } }
@media (min-width:768px){ .brand-logos{ max-height:96px; } }

/* ---------- Card ---------- */
.content-wrapper{display:flex; justify-content:center; padding:20px}
.content-card{
  width:100%; max-width:420px; background:var(--card); padding:22px;
  border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.12);
  border:1px solid var(--border); text-align:center;
}
h1{margin:6px 0 14px; font-size:1.7rem; font-weight:800}
.lead{margin:0 0 18px; color:var(--muted)}

/* ---------- Form ---------- */
.tip-form .field{
  text-align:left; margin:14px 0;
}
.tip-form .field label{
  display:block; font-weight:700; margin:0 0 6px;
}
input[type=text], input[type=number], select{
  width:100%; padding:12px 14px; background:var(--field-bg); color:var(--text);
  border:1px solid var(--field-border); border-radius:10px; outline:none;
}

/* ---------- Pills (3 on a row) ---------- */
.tip-form .tip-buttons{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:12px !important;
  margin:14px 0 6px !important;
}
.tip-form .tip-btn{
  width:100% !important; min-width:0 !important; flex:none !important;
  border-radius:999px; padding:10px 0; font-weight:800;
  background:var(--brand); color:#fff; border:none; cursor:pointer;
  transition:background .15s ease;
}
.tip-form .tip-btn:hover{ background:var(--brand-hover); }
.tip-form .tip-btn.active{ background:var(--brand-active); }

/* ---------- Custom amount ---------- */
.custom-link{
  display:inline-block; margin-top:6px; color:var(--brand);
  text-decoration:underline; background:none; border:0; cursor:pointer; font-weight:700; 
  align-items:center; justify-content:center; 
  /* added to center link */
}
.custom-link-div{
  align-items:center; justify-content:center; text-align: center;
  /* added to center link */
}
.custom-wrap{ display:none; margin-top:10px; }
.custom-grid{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:420px){ .custom-grid{ grid-template-columns:1fr 1fr; } }

.amount-input{ display:flex; align-items:stretch; gap:8px }
.amount-input .prefix{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  padding:0 12px; border:1px solid var(--field-border); border-radius:10px;
  background:var(--field-bg); color:var(--text); font-weight:800;
}
.amount-input input{ flex:1 }

/* ---------- CTA ---------- */
.pay-btn{
  width:100%; padding:12px 16px; margin-top:18px; border:0; border-radius:12px;
  background:var(--brand); color:#fff; font-weight:800; cursor:pointer; transition:background .15s ease;
}
.pay-btn:hover{ background:var(--brand-hover); }

/* ---------- Validity helpers ---------- */
.is-valid{border-color:var(--ok)!important; box-shadow:0 0 0 3px var(--ok-glow)}
.is-invalid{border-color:var(--err)!important; box-shadow:0 0 0 3px var(--err-glow)}




/* Stacked field block (matches payment look) */
.form-field{ margin:16px 0; text-align:left; }
.form-field .label{ display:block; font-weight:700; margin:0 0 8px; }

/* Big rounded input, same vibe as payment */
.input-xl{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--field-border);
  border-radius:16px;
  background:var(--field-bg);
  color:var(--text);
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-xl::placeholder{ color:var(--muted); }
.input-xl:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(200,16,46,.15); /* soft brand glow */
}

/* Fix: center the card, but left-align everything inside the form */
.content-card form { text-align: left; }

/* Stacked field block */
.form-field { margin: 16px 0; }

/* Label matches payment look: small, left, muted */
.form-field .label{
  display:block;
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  text-align:left;
}

/* Big rounded input (same as payment) */
.input-xl{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--field-border);
  border-radius:16px;
  background:var(--field-bg);
  color:var(--text);
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-xl::placeholder{ color:var(--muted); }
.input-xl:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(200,16,46,.15);
}


/* ——— Fix: left-align labels/fields inside cards ——— */
.content-card form { text-align: left; }                 /* only the form area */
.content-card form label,
.content-card .form-field .label {
  display: block;
  text-align: left !important;                           /* override inherited center */
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* Keep the preset pill row centered */
.content-card .tip-buttons { justify-content: space-between; text-align: center; }

/* ==== Fix: left-align form labels/inputs inside cards ==== */
.content-card form,
.content-card .tip-form { text-align: left !important; }

.content-card form .field,
.content-card form .form-field { text-align: left !important; }

.content-card form label,
.content-card form .label,
.content-card .tip-form label,
.content-card .tip-form .label {
  display: block;
  text-align: left !important;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* Keep preset pill row visually centered */
.content-card .tip-buttons { 
  text-align: center; 
  justify-content: space-between; 
}


/* ==== Tip page alignment fix (scoped to #tipForm) ==== */
#tipForm { text-align: left !important; }                 /* stop inheriting center from .content-card */
#tipForm .form-field,
#tipForm .field { text-align: left !important; }

#tipForm label,
#tipForm .label {
  display: block;
  text-align: left !important;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* Keep pills and CTA visually centered */
#tipForm .tip-buttons,
#tipForm .custom-link,
#tipForm .pay-btn { text-align: center !important; }


/* Tip form: force left alignment (overrides card centering) */
#tipForm { text-align: left !important; }
#tipForm .form-field,
#tipForm .field { text-align: left !important; }
#tipForm label,
#tipForm .label { text-align: left !important; }

/* Re-center pills + CTA only */
#tipForm .tip-buttons,
#tipForm .custom-link,
#tipForm .pay-btn { text-align: center !important; }



/* ===== FINAL OVERRIDE: form alignment inside cards ===== */

/* Make left the default inside cards */
.content-card { text-align: left !important; }

/* Keep only these centered */
.content-card > h1,
.content-card > .lead,
.content-card .tip-buttons,
.content-card .custom-link,
.content-card .pay-btn {
  text-align: center !important;
}

/* Ensure any label-like element is left aligned */
.content-card form label,
.content-card form .label,
.content-card .form-field .label,
#tipForm label,
#tipForm .label {
  display:block;
  text-align:left !important;
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
}

/* Footer matches header spacing and alignment */
.brand-footer{
  width:100%;
  border-top:1px solid var(--border);
  background:transparent;
  margin-top:20px;
}
.brand-footer .footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; max-width:1200px; margin:0 auto;
}
.footer-copy{ color:var(--muted); }
.footer-back{
  color:var(--brand); text-decoration:none; font-weight:700;
}
.footer-back:hover{ color:var(--brand-hover); text-decoration:underline; }