/* Checkout page styles */
.checkout-page{ padding:48px 0 84px; background-color: rgba(155, 66, 66, 0.847); background: #eeeee37e; text-transform:none; touch-action: manipulation; }
.checkout-head{ text-align:center; margin-bottom:28px; }
/* small lead under the main checkout title */
.checkout-head .lead{ font-size:14px; color:#6b6b6b; margin-top:8px; max-width:760px; margin-left:auto; margin-right:auto; line-height:1.4; text-transform:none; font-family: 'Roboto', sans-serif; font-weight:400; }

/* Premium hero and steps */
.checkout-hero{ margin-top:18px; display:flex; justify-content:center; }
.checkout-steps{ display:flex; gap:18px; background: rgba(11, 39, 70, 0.04); padding:8px; border-radius:12px; align-items:center; }
.checkout-steps .step{ display:flex; gap:10px; align-items:center; padding:8px 12px; border-radius:10px; color:#6b7280; }
.checkout-steps .step span{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:#fff; border-radius:50%; font-weight:800; color:#0b2746; border:1px solid rgba(11, 39, 70, 0.06); }
.checkout-steps .step.active{ background: linear-gradient(90deg, rgba(11, 39, 70, 0.06), rgba(11, 39, 70, 0.03)); color:#071d35; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02); }
.checkout-steps .step small{ display:block; font-size:12px; color:#6b7280; text-transform:none; }
.notice{ border-left:4px solid #fff; background:linear-gradient(180deg,#ffffff,#fbfbfd); margin-bottom:18px; border-radius:6px; overflow:hidden; box-shadow:0 6px 18px rgba(17,17,17,0.04); }
.notice .notice-toggle{ width:100%; background:transparent; border:none; padding:14px 18px; text-align:left; font-size:14px; cursor:pointer; outline:none; display:flex; gap:10px; align-items:center; }
.notice .notice-toggle i{ display:inline-block; width:20px; height:20px; background:#eef6ff; border-radius:4px; color:#1c66b1; font-size:12px; display:flex; align-items:center; justify-content:center; }
.notice.open{ border-left-color:#1c66b1; }
.notice.open .notice-toggle i{ background:#dbeeff; color:#0b4aa0; }
.notice .notice-content{ padding:14px 18px; border-top:1px solid rgba(0,0,0,0.04); }
.field-row{ display:flex; gap:12px; align-items:center; }
.field-row .btn{ margin-left:10px; }
.field-row input{ flex:1; }
.notice .muted{ color:#666; font-size:13px; }
.notice .hidden{ display:none; }

.checkout-grid{ display:grid; grid-template-columns: 0.75fr minmax(360px,520px); gap:36px; align-items:start; }
.checkout-left{ min-height:360px; }
.checkout-right{ padding:12px; min-width:420px; }

/* Shipping form */
/* Card wrapper for premium feel */
.card{ background: #ffffffc7; border-radius:12px; box-shadow: 0 14px 34px rgba(16,24,40,0.08); padding:22px; }
.shipping h3{ font-size:18px; margin-bottom:18px; color:#111; letter-spacing:0.6px; font-weight:700; }
label{ display:block; font-size:13px; margin-bottom:6px; color:#343434; }
input[type="text"], input[type="email"], input[type="tel"], select{ width:100%; padding:12px 14px; border:1px solid #e8e8ec; border-radius:10px; font-size:14px; margin-bottom:14px; background:#fff; transition: box-shadow .12s ease, border-color .12s ease; touch-action: manipulation; }

/* Prevent iOS/Android zoom when focusing inputs by ensuring a minimum font-size of 16px on mobile
   and disabling user text-size adjust. This preserves an app-like experience. */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 768px){
  .checkout-page input[type="text"],
  .checkout-page input[type="email"],
  .checkout-page input[type="tel"],
  .checkout-page textarea,
  .checkout-page select,
  .checkout-page .btn,
  .checkout-page button {
    font-size: 16px !important; /* prevent iOS auto-zoom on form focus */
    -webkit-text-size-adjust: 100%;
  }
  /* Make Place Order button consistent to avoid auto-zoom on tap */
  #placeOrder{ font-size:16px !important; }
}

/* Make all form labels and inputs in the shipping section use Roboto */
.shipping, .shipping label, .shipping input, .shipping select, .shipping button, .shipping .two-cols div{
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
}
.shipping input::placeholder{ font-family: 'Roboto', sans-serif !important; color: #9aa0a6; }

/* Success tick icon that sits inside the input field at the end */
.shipping .input-success-icon{ --success-size:28px; --success-gap:16px; position:relative; width:var(--success-size); height:var(--success-size); border-radius:50%; background:linear-gradient(90deg,#0bb17b,#0a8f5b); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:14px; box-shadow:0 4px 10px rgba(10,143,91,0.12); line-height:1; pointer-events:none; margin-left: calc(var(--success-gap) / 2); }
.shipping input.valid{ padding-right: calc(var(--success-size) + var(--success-gap)); }
/* Ensure icon SVG scales consistently and remains centered inside the circle */
.shipping .input-success-icon svg{ width: 16px; height: 16px; display:block; }
/* Ensure input wrapper can position the icon correctly */
.input-wrapper{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap: var(--success-gap, 16px); width:100%; background:#fff; border-radius:10px; border:1px solid #e8e8ec; padding:6px 12px; box-sizing:border-box; margin-bottom:14px; }
.input-wrapper.inline{ display:inline-flex; }
/* Make the input within the wrapper fill available space without shrinking past content */
.input-wrapper input{ flex:1 1 auto; min-width:0; border:none; background:transparent; padding:8px 0; margin:0; outline:none; color:inherit; }
.input-wrapper:focus-within{ box-shadow:0 0 0 3px rgba(11,163,109,0.08); border-color: #1db66a; }
/* Success state: show green border for wrapper */
.input-wrapper.valid{ border-color: #1db66a !important; box-shadow: 0 0 0 4px rgba(11,163,109,0.08) !important; }
.input-wrapper.valid input{ background:transparent !important; }

/* Invalid wrapper state (red) — already present elsewhere in inputs, keep it consistent */
.input-wrapper.invalid{ border-color: #f59797 !important; box-shadow: 0 0 0 4px rgba(176,0,0,0.08) !important; }
.input-wrapper.invalid input{ background:transparent !important; }

/* Make the inner background white on focus explicitly (helps when dark mode or other background rules are applied) */
.input-wrapper input:focus{ background: transparent; border-color: transparent; box-shadow: none; outline: none; }

input:focus, select:focus{ outline:none; border-color:#c8d9ff; box-shadow:0 0 0 3px rgba(46,98,165,0.06); }
.two-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.order-summary{ background: #b5b9be7e; padding:22px; border-radius:12px; box-shadow:0 8px 24px rgba(11, 39, 70, 0.04); position:sticky; top:94px; width:100%; box-sizing:border-box; }
.order-summary h3{ font-size:18px; letter-spacing:1px; margin-top:0; color:#111; font-weight:700; text-transform:none; }
.order-summary, .order-summary h3, .order-summary .summary-row, .order-summary .item-title, .order-summary .item-total, .order-summary .summary-row.headers, .order-summary .btn{
  font-family: 'Roboto', sans-serif !important;
}
.order-summary h3{ font-weight:700; }
.order-summary .summary-row.headers{ font-weight:600; }
.order-summary .item-title{ font-weight:500; }
.order-summary .summary-row, .order-summary .summary-row *{ font-weight:400; }
.order-summary .summary-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.order-summary .summary-header small{ color:#6b7280; font-size:13px; }
.summary-row{ display:flex; justify-content:space-between; border-top:1px solid #f0f0f0; padding:12px 0; align-items:center; }
.summary-row.headers{ font-weight:600; border-top:none; color:#7a7a7a; }
.summary-row.headers span{ font-size:13px; }
.order-summary .large{ width:100%; margin-top:16px; }
.btn{ display:inline-block; padding:10px 12px; border-radius:10px; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-weight:700; }
.btn.btn-add, .btn.add-to-cart{ background: linear-gradient(90deg,#0b2746,#071d35); color:#fff; border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 20px rgba(11, 39, 70, 0.12); }
.btn.btn-add:active{ transform: translateY(1px); }
.btn.btn-add:hover{ filter: brightness(.96); transform: translateY(-1px); }
.btn.secondary{ background:#fff; color:#111; border-color:#ddd; }

.btn.large{ padding:14px 18px; font-size:15px; border-radius:12px; }

/* success state for main call to action — green with white text */
.btn.btn-add.success{ background: linear-gradient(90deg,#01e72c,#1e6b1b); color:#fff !important; border-color: rgba(5,150,105,0.12); box-shadow: 0 8px 20px rgba(6, 95, 70, 0.12); }
/* generating / processing (blue) state for Place Order button */
.btn.btn-add.processing{ background: linear-gradient(90deg,#076bdd,#044386); color:#fff !important; border-color: rgba(5,50,70,0.12); box-shadow: 0 8px 20px rgba(11, 39, 70, 0.12); }

.summary-row.item{ border-top:none; padding:12px 0; color:#4b5563; font-size:14px; }
/* Order item styles */
.summary-row.item{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
.summary-row.item .item-left{ display:flex; gap:12px; align-items:center; }
.summary-row.item .item-left img{ width:64px; height:64px; object-fit:cover; border-radius:8px; box-shadow: 0 6px 18px rgba(17, 24, 40, 0.06); }
.summary-row.item .item-title{ font-size:13px; color:#111; letter-spacing:0.6px; text-transform:none; line-height:1.2; max-width:220px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Allow titles to wrap and break long words on mobile/tablet to prevent overflow */
.summary-row.item .item-title{ word-break: break-word; overflow-wrap: anywhere; }

/* Make each order item look like a small card so quantity controls don't overlap and elements are visually separated */
.order-summary #orderItems .summary-row.item{
  background: #ffffff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(11, 39, 70, 0.04);
  box-shadow: 0 8px 24px rgba(11, 39, 70, 0.06);
  transition: transform 160ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease;
}
.order-summary #orderItems .summary-row.item:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 39, 70, 0.08);
}

.order-summary #orderItems .summary-row.item .item-actions{ align-items:flex-end; }
.summary-row.item .item-actions{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.qty-controls{ display:flex; align-items:center; gap:8px; background:#fff; padding:4px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.qty-controls .qty-btn{ padding:6px 8px; background:transparent; border:1px solid rgba(0,0,0,0.06); border-radius:6px; min-width:36px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.btn-remove{ background:transparent; color:#b00; border:1px solid transparent; padding:2px 6px; font-size:12px; }
/* Clear Cart specific strong black border + shadow for prominence */
#clearCart{
  background: #fff;
  color: #da1010;
  
  box-shadow: 0 8px 24px rgba(161, 159, 159, 0.45);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Cancel Order button state (converted Clear Cart while invoice is generating) */
.btn.cancel-order, .btn.btn-remove.cancel-order, #clearCart.cancel-order{ background: linear-gradient(90deg,#f7f7f7,#ffffff); color:#f71515 !important; border-color: transparent; box-shadow: 0 8px 24px rgba(176, 0, 0, 0.18); }
.cancel-icon{ width:16px; height:16px; display:inline-block; vertical-align:middle; margin-right:8px; }
#clearCart.cancel-order:active, .btn.cancel-order:active{ transform: translateY(1px); }
#clearCart.cancel-order:hover, .btn.cancel-order:hover{ filter: brightness(.96); transform: translateY(-1px); }
#clearCart:active{ transform: translateY(1px); }
#clearCart:hover{ box-shadow: 0 12px 34px rgba(0,0,0,0.48); }
.item-total{ font-weight:700; color:#111; margin-left:12px; }
.summary-row.total strong{ font-size:16px; }
.summary-row.total span{ font-weight:700; color:#0b2746; }

/* Help text and subtle UI enhancements */
.notice .notice-toggle{ font-weight:500; color:#444; }
.notice .notice-content p{ margin:0 0 10px 0; color:#666; }

/* Small helper text used under form inputs */
.form-help{ font-size:0.72rem; color: rgba(107,114,128,0.9); display:block; margin-top:-8px; margin-bottom:12px; }
.form-help.hidden { display:none !important; opacity:0 !important; height:0 !important; overflow:hidden !important; }

/* Order error (shown under Place Order button) */
.form-error{ color:#b00; font-weight:700; margin-top:8px; display:block; font-size:14px; }
.form-error.hidden{ display:none; }

/* Shipping (inline field) error visuals — lighter inline form errors close to the input */
.shipping .form-error{ display:block !important; margin-top:6px; margin-bottom:6px; padding:0; border-radius:0; background: transparent; border: none; font-weight:400; font-size:13px; color: #b00; line-height:1.2; font-family: 'Roboto', sans-serif; }
.shipping .form-error::before{ content:'⚠️'; display:inline-block; margin-right:6px; }

/* Input styling for invalid state */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]{ border-color:#f59797 !important; box-shadow: 0 0 0 3px rgba(176,0,0,0.06) !important; }
/* When an input is within a wrapper, neutralize input-level invalid visual changes — wrapper displays invalid state */
.input-wrapper input[aria-invalid="true"]{ border-color: transparent !important; box-shadow: none !important; }
/* Success state for valid inputs */
.shipping input.valid, .shipping textarea.valid, .shipping select.valid{ background: rgb(255, 255, 255); border-color: #ffffff !important; box-shadow: 0 0 0 3px rgb(255, 255, 255) !important; }
/* Neutralize input-level success styling when input is inside wrapper — wrapper uses .input-wrapper.valid */
.input-wrapper input.valid{ background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.form-success{ color:#0a8f5b; font-weight:700; margin-top:8px; display:block; font-size:14px; background: rgba(10,143,91,0.04); padding:8px 10px; border-radius:8px; border: 1px solid rgba(10,143,91,0.08); }
.form-success.hidden{ display:none; }

input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus{ outline:none; box-shadow: 0 0 0 4px rgba(176,0,0,0.08) !important; }
.form-error.hidden{ display:none; }


.muted{ color:#999; font-size:13px; }
.notice .notice-toggle:hover{ background:rgba(0,0,0,0.02); }

/* Required star */
.required::after{ content:' *'; color:#d23; margin-left:4px; }

/* Disable text caret by default in the checkout page to reduce blinky cursor distraction,
   but keep caret enabled for the header search and essential form inputs (full name, phone, address). */
/* Hide caret globally for checkout inputs (use !important to override other rules if present) */
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page textarea,
.checkout-page [contenteditable],
.checkout-page input[type="text"]:focus,
.checkout-page input[type="email"]:focus,
.checkout-page input[type="tel"]:focus,
.checkout-page textarea:focus,
.checkout-page [contenteditable]:focus {
  caret-color: transparent !important; /* hide caret even when focused */
}

/* As a fallback: hide caret on all non-editable elements within the checkout page
   to suppress accidental blinking caret on focus for non-input elements. */
.checkout-page *:not(input):not(textarea):not([contenteditable]){
  caret-color: transparent !important;
}

/* Explicitly hide caret for anchors and headings in the checkout page (nav and mega menu) */
.checkout-page a, .checkout-page .main-nav a, .checkout-page .brand-links .small-link, .checkout-page .collections-link,
.checkout-page h1, .checkout-page h2, .checkout-page h3, .checkout-page h4, .checkout-page .mega-col h4 {
  caret-color: transparent !important;
}
.checkout-page a:focus, .checkout-page .main-nav a:focus, .checkout-page .brand-links .small-link:focus, .checkout-page .collections-link:focus,
.checkout-page h1:focus, .checkout-page h2:focus, .checkout-page h3:focus, .checkout-page h4:focus, .checkout-page .mega-col h4:focus,
.checkout-page a:focus-visible, .checkout-page .main-nav a:focus-visible, .checkout-page .brand-links .small-link:focus-visible, .checkout-page .collections-link:focus-visible,
.checkout-page h1:focus-visible, .checkout-page h2:focus-visible, .checkout-page h3:focus-visible, .checkout-page h4:focus-visible, .checkout-page .mega-col h4:focus-visible{
  caret-color: transparent !important;
}

/* Allow caret in the header search and checkout's key fields */
/* Allow caret explicitly for the header search and specific checkout fields (both default and focused states) */
#search,
#search:focus,
.checkout-page #fullName,
.checkout-page #fullName:focus,
.checkout-page #phone,
.checkout-page #phone:focus,
.checkout-page #address,
.checkout-page #address:focus {
  caret-color: currentColor !important; /* show caret for these fields */
  pointer-events: auto !important; /* ensure these fields are clickable/focusable */
}

/* Also show caret when these fields use :focus-visible (keyboard focus) */
.checkout-page #fullName:focus-visible,
.checkout-page #phone:focus-visible,
.checkout-page #address:focus-visible,
#search:focus-visible {
  caret-color: currentColor !important;
}

/* Prevent I-beam text cursor from appearing on non-input elements in the
   shipping form and generally in the checkout page where text is static
   (labels, help text, static headings). It keeps text selectable but stops
   showing the blinking caret outside real form controls. */
.checkout-page label { cursor: pointer !important; user-select: none; pointer-events: auto !important; } /* label looks clickable and doesn't select text */
.checkout-page .form-help,
.checkout-page .shipping h3,
.checkout-page .shipping p,
.checkout-page .shipping *:not(input):not(textarea):not(select):not(button):not(label) {
  cursor: default !important; /* avoid text caret on hover */
  user-select: none; /* help text and static headings don't need to be selected */
  pointer-events: none; /* disable pointer to avoid accidental focus/caret on static elements */
}

/* Responsive */
@media (max-width: 1200px){
  .checkout-grid{ grid-template-columns: 1fr 440px; }
  .checkout-right{ min-width:380px; }
}

@media (max-width: 1100px){
  .checkout-grid{ grid-template-columns: 1fr 380px; }
  .checkout-right{ min-width:340px; }
}
/* Stack layout earlier for tablets & small laptops to avoid cramped sidebars */
@media (max-width: 1024px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-right{ min-width:0 !important; order:-1; margin-bottom:22px; }
  .order-summary{ position:static; width:100% !important; }
  /* Ensure product titles wrap on tablet widths and images scale */
  .summary-row.item .item-title{ white-space:normal; max-width:none; }
  .checkout-page img{ max-width:100%; height:auto; }
}
@media (max-width: 900px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-right{ order: -1; margin-bottom: 30px; }
  .field-row{ flex-direction:column; align-items:stretch; }
  .order-summary{ position:static; top:auto; }
  .summary-row.item .item-title{ font-size:13px; white-space:normal; max-width:none; }
}

/* Stronger override for medium & small screens to avoid overflow from sticky right pane */
@media (max-width: 900px){
  .checkout-right{ min-width: 0 !important; padding-left: 0 !important; padding-right:0 !important; }
  .checkout-grid{ gap:18px; padding:0; }
  .order-summary{ width:100% !important; max-width:100% !important; }
  .checkout-page .container{ padding-left:12px; padding-right:12px; }
}

@media (max-width: 820px){
  .checkout-right{ padding:8px 0 !important; }
  .order-summary{ padding:12px; }
  .topbar-inner{ padding:8px 10px; }
}

/* Tablet-specific (including iPad mini) improvements:  display slightly more compact than desktop
   but slightly roomier than phone sizes — caters for screens ~768px. */
@media (max-width: 820px) and (min-width: 641px){
  /* Add breathing room around the left column */
  .checkout-left{ padding: 0 14px; }

  /* Slightly reduce the shipping card's internal padding and adjust fonts */
  .shipping.card{ padding:14px; border-radius:11px; }
  .shipping h3{ font-size:16px; margin-bottom:10px; }
  .shipping label{ font-size:13px; margin-bottom:6px; }
  .shipping input[type="text"], .shipping input[type="tel"], .shipping select, .shipping textarea{ padding:10px 12px; font-size:14px; border-radius:9px; }

  /* Order summary — slightly smaller than desktop but larger than phone */
  .order-summary{ padding:14px; border-radius:11px; }
  .order-summary h3{ font-size:17px; }
  .order-summary #orderItems .summary-row.item .item-left img{ width:52px; height:52px; }
  .order-summary .item-title{ font-size:14px; }
  .order-summary .large{ padding:12px 14px; font-size:15px; }

  /* Tighter qty controls for tablet while keeping them comfy for touch */
  .qty-controls{ padding:3px 6px; gap:8px; }
  .qty-controls .qty-btn{ padding:6px 8px; min-width:32px; min-height:32px; font-size:13px; }
  .btn-remove{ padding:6px 8px; font-size:13px; }
  .item-total{ font-size:15px; }
}

@media (prefers-reduced-motion: reduce){
  .order-summary #orderItems .summary-row.item,
  .order-summary #orderItems .summary-row.item:hover { transform: none !important; transition: none !important; }
}

/* Modal / Backdrop for Clear Cart confirmation */
.modal-backdrop{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal-backdrop.hidden{ display:none; }
.modal-backdrop::before{ content:''; position:absolute; inset:0; background: rgba(0,0,0,0.36); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-dialog{ position:relative; background:#fff; border-radius:12px; padding:26px; width:min(520px, 92%); box-shadow:0 30px 80px rgba(0,0,0,0.45); z-index:1; text-align:center; }
.modal-dialog, .modal-dialog h3, .modal-dialog p, .modal-dialog .modal-actions .btn { font-family: 'Roboto', sans-serif !important; text-transform: none; }
/* no WhatsApp modal */
.success-tick{ margin-bottom:8px; }
.success-tick svg{ width:88px; height:88px; display:block; margin:0 auto 6px auto; }
.success-tick circle{ stroke-dasharray: 160; stroke-dashoffset: 160; transform-origin: center; animation: circle-draw 0.6s ease forwards; }
.success-tick path{ stroke-dasharray: 40; stroke-dashoffset: 40; animation: check-draw 0.45s 0.5s ease forwards; }
@keyframes circle-draw{ to{ stroke-dashoffset:0; } }
@keyframes check-draw{ to{ stroke-dashoffset:0; } }
.modal-dialog h3{ margin:0 0 8px 0; font-size:20px; font-weight:700; color:#0b2746; letter-spacing:0.2px; }
.modal-dialog p{ color:#6b7280; margin:8px 0 18px 0; font-size:15px; line-height:1.4; }
.modal-actions{ display:flex; gap:12px; justify-content:center; align-items:center; }
.modal-actions .btn{ min-width:140px; padding:10px 14px; border-radius:10px; font-weight:700; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.modal-actions .btn:focus{ outline:none; }
.modal-actions .btn:focus-visible{ box-shadow: 0 0 0 4px rgba(11,39,70,0.08); }
/* Danger primary: filled red */
.modal-actions .btn.btn-remove{ background:#b00; color:#fff; border:1px solid rgba(176,0,0,0.9); box-shadow:0 10px 30px rgba(176,0,0,0.18); }
.modal-actions .btn.btn-remove:hover{ transform: translateY(-1px); background:#9a0000; }
.modal-actions .btn.btn-remove:active{ transform: translateY(1px); }
/* Secondary cancel */
.modal-actions .btn.secondary{ background:#f6f7fb; border:1px solid #e6e9f0; color:#0b2746; }
.modal-actions .btn.secondary:hover{ transform: translateY(-1px); background:#eef1f8; }

/* Make dialog more prominent on small screens */
@media (max-width:420px){
  .modal-dialog{ padding:18px; width:92%; }

/* Special layout for the PDF share dialog — larger to accomodate preview */
#pdfShareModal .modal-dialog{ width:min(980px, 96%); padding:18px 20px; }
#pdfShareModal .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
#pdfShareModal .modal-body{ text-align:left; }
#pdfShareModal .modal-actions{ justify-content:flex-end; gap:10px; }
#pdfShareModal .modal-actions .btn{ min-width:110px; }
  .modal-actions .btn{ min-width:120px; }
}

/* Mobile-first improvements for the checkout page */
@media (max-width: 640px){
  /* Reduce page padding and center content for smaller screens */
  .checkout-page{ padding:18px 12px 36px; }
  .checkout-head .lead{ font-size:13px; max-width: 100%; padding:0 6px; }
  .checkout-head h1{ font-size:20px; margin-bottom:6px; }

  /* Stack grid into a single column and remove min-widths to avoid horizontal scroll */
  .checkout-grid{ grid-template-columns: 1fr; gap:18px; }
  .checkout-right{ order: -1; margin-bottom: 18px; min-width:0; padding:8px; }
  /* Add horizontal padding for the left column on mobile so the shipping card isn't flush to the edge */
  .checkout-left{ padding: 0 12px; }

  /* Make the order summary full width and remove sticky behavior */
  .order-summary{ position: static; top: auto; width:100%; padding:16px; }
  .order-summary .large{ width:100%; padding:12px 14px; }

  /* Improve form controls for smaller screens */
  .card{ padding:16px; }
}

/* Mobile: improve form and order summary layout */
@media (max-width: 768px){
  .shipping h3{ font-size:16px; }
  label{ font-size:13px; }
  /* Ensure inputs are at least 16px so mobile browsers (iOS Safari) don't auto-zoom on focus */
  .shipping input[type="text"], .shipping input[type="email"], .shipping input[type="tel"], .shipping textarea, .shipping select{
    padding:10px 12px; font-size:16px; line-height:1.15;
  }

  /* Turn two-column forms into single column
     (eg phone/address or name + something) */
  .two-cols{ grid-template-columns: 1fr; gap:12px; }
  .field-row{ flex-direction:column; gap:8px; }

  /* Make item thumbnails smaller and text wrap for better vertical flow */
  .order-summary #orderItems .summary-row.item .item-left img{ width:48px; height:48px; }
  .summary-row.item .item-title{ max-width: none; white-space: normal; }
  .summary-row.item{ grid-template-columns: 1fr auto; }

  /* Buttons should be full-width for easy tapping */
  .order-summary .btn.large{ width:100%; display:block; }


  /* Shrink top header paddings to avoid overlap with mobile; topbar handled elsewhere */
  .topbar-inner{ padding:10px 12px; }

  /* Reduce margins for the checkout hero steps */
  .checkout-hero{ margin-top:8px; }
  .checkout-steps{ gap:10px; padding:6px; }
  .checkout-steps .step span{ width:28px; height:28px; }
}


/* Make shipping card more compact on smaller devices */
@media (max-width: 640px){
  /* Reduce card padding and scale down fonts and inputs specifically for the shipping section */
  .shipping.card{ padding: 10px; border-radius:10px; }
  .shipping h3{ font-size:15px; margin-bottom:10px; }
  .shipping label{ font-size:12px; margin-bottom:6px; }
  .shipping input[type="text"],
  .shipping input[type="tel"],
  .shipping textarea,
  .shipping select{ padding:8px 10px; font-size:13px; border-radius:8px; }
  .shipping .form-help{ font-size:12px; margin-top:-6px; margin-bottom:10px; }
  .input-wrapper{ padding:4px 8px; }
  .shipping .input-success-icon{ --success-size:20px; --success-gap:10px; width:var(--success-size); height:var(--success-size); font-size:12px; }
  .shipping input.valid{ padding-right: calc(var(--success-size) + var(--success-gap) + 6px); }
  /* Compact order summary */
  .order-summary{
    padding:12px; /* slightly smaller than desktop */
    border-radius:10px;
  }
  .order-summary h3{ font-size:16px; margin-bottom:8px; }
  .order-summary .summary-header small{ font-size:12px; }
  .summary-row{ padding:10px 0; }
  .order-summary .summary-row.item{ padding:8px 0; }
  .order-summary #orderItems .summary-row.item{ padding:8px 10px; margin-bottom:10px; }
  .order-summary #orderItems .summary-row.item .item-left img{ width:44px; height:44px; }
  .order-summary .item-title{ font-size:13px; }
  .order-summary .large{ padding:12px 14px; font-size:14px; }
  /* Compact qty controls & actions for added products */
  .summary-row.item .item-actions{ gap:6px; align-items:center; }
  .qty-controls{ padding:2px; gap:6px; }
  .qty-controls .qty-btn{ padding:4px 6px; min-width:28px; min-height:28px; font-size:13px; }
  .qty-controls .qty{ font-size:13px; }
  .btn-remove{ padding:6px 8px; font-size:13px; }
  .item-total{ font-size:14px; }
}

/* Extra compact rules for very small devices */
@media (max-width: 380px){
  .shipping.card{ padding:8px; }
  /* Reduce container padding a touch more on very small devices */
  .checkout-left{ padding: 0 8px; }
  /* Extra compact order summary on smallest screens */
  .order-summary{ padding:10px; border-radius:8px; }
  .order-summary h3{ font-size:15px; }
  .order-summary .summary-header small{ font-size:11px; }
  .summary-row{ padding:8px 0; }
  .order-summary .summary-row.item{ padding:6px 0; }
  .order-summary #orderItems .summary-row.item{ padding:6px 8px; margin-bottom:8px; }
  .order-summary #orderItems .summary-row.item .item-left img{ width:36px; height:36px; }
  .order-summary .large{ padding:10px 12px; font-size:13px; }
  .summary-row.item .item-actions{ gap:6px; align-items:center; }
  .qty-controls{ padding:2px; gap:4px; }
  .qty-controls .qty-btn{ padding:3px 6px; min-width:24px; min-height:24px; font-size:12px; }
  .qty-controls .qty{ font-size:12px; }
  .btn-remove{ padding:4px 6px; font-size:12px; }
  .item-total{ font-size:13px; }
  .shipping h3{ font-size:14px; margin-bottom:8px; }
  .shipping label{ font-size:12px; }
  /* Preserve 16px font-size even for extra small screens to avoid zoom; reduce padding to fit better */
  .shipping input[type="text"],
  .shipping input[type="tel"],
  .shipping textarea,
  .shipping select{ padding:7px 10px; font-size:16px; }
  .shipping .input-success-icon{ --success-size:18px; --success-gap:8px; width:var(--success-size); height:var(--success-size); font-size:11px; }
  .shipping input.valid{ padding-right: calc(var(--success-size) + var(--success-gap) + 4px); }
}

/* Extra compact view for very small devices */
@media (max-width: 380px){
  .checkout-page{ padding:12px 10px 28px; }
  .checkout-head h1{ font-size:18px; }
  .checkout-head .lead{ font-size:12px; }
  .checkout-steps .step small{ font-size:10px; }
  .brand .logo img{ width:86px; }
  .search-wrap input{ width:120px; }
  .search-wrap{ margin-right:8px; }
  .notif-btn{ margin-right:6px; }

/* Ensure header uses compact layout on devices <= 500px, matching the site rules but local for checkout page */
@media (max-width: 500px){
  .topbar-inner{ max-width:500px; width:calc(100% - 20px); margin:0 auto; padding:8px 10px; gap:8px; position:relative; }
  .brand .logo img{ height:36px; width:auto; max-width:140px; }
  .brand-links{ display:none; }
  .search-wrap{ display:none; }
  .top-actions .notif-btn{ margin-right:0; padding:6px; }
  .main-nav ul{ gap:8px; padding:6px 6px; overflow-x:auto; }
  /* Hide desktop navigation on checkout page for small screens */
  .main-nav{ display:none; }
  .hamburger{ display:inline-flex; flex-direction:column; min-width:var(--site-hamburger-button-size); min-height:var(--site-hamburger-button-size); align-items:center; justify-content:center; }
  /* Center logo inside header */
  .topbar-inner .brand .logo{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index:4; }
  .brand .hamburger{ position:absolute; left:12px; top:50%; transform: translateY(-50%); z-index:5; }
  .top-actions{ position:relative; }
  /* Add padding to the topbar on small screens to give additional breathing room */
  .topbar{ padding-top:30px; }
}
}

/* WhatsApp UI removed */
.modal-dialog .modal-actions .btn.btn-add{ background: linear-gradient(90deg,#0b2746,#071d35); color:#fff; border:1px solid rgba(0,0,0,0.06); }
.modal-dialog .modal-actions .btn.secondary{ background:#fff; border:1px solid #e2e6ef; color:#0b2746; }
.modal-dialog p{ margin-top:10px; margin-bottom:16px; }

/* WhatsApp styles removed */

/* Shaky animation for proceed state */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.btn.order-now{
  background: linear-gradient(90deg,#22c55e,#16a34a); /* green */
  color: #fff !important;
  border: 1px solid rgba(6,95,70,0.12);
  box-shadow: 0 8px 20px rgba(16,185,129,0.12);
  cursor: pointer; /* Make it obvious the button is clickable */
}
.btn.order-now:active{ transform: translateY(1px); }
.btn.order-now:hover{ filter: brightness(.98); }
/* Disabled / unclickable appearance */
.btn.order-now[disabled], .btn.order-now[aria-disabled="true"]{
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}
.order-summary #orderNow{ display:block; margin:10px 0; width:100%; }
.btn.shaky{ animation: shake 0.6s ease-in-out infinite; }

@media (max-width: 500px) {
  main.checkout-page {
    padding-top: 50px;
  }
}

/* Keep mobile menu links in sentence case to match modern UI */
.mobile-menu .brand-links .small-link,
.mobile-menu .mobile-main-nav a,
.mobile-menu .mobile-main-nav .collections-link {
  text-transform: none;
}

/* Make checkout footer links look exactly like index.html footer on mobile — remove all padding/margin stress */
.checkout-page .site-footer.site-footer-modern .footer-links-mobile .col a,
.checkout-page .site-footer.site-footer-modern .footer-links .col a {
  padding: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  display: inline !important;
}

.checkout-page .site-footer.site-footer-modern .footer-links-mobile ul,
.checkout-page .site-footer.site-footer-modern .footer-links ul {
  gap: 0 !important;
}

.checkout-page .site-footer.site-footer-modern .footer-links-mobile ul li,
.checkout-page .site-footer.site-footer-modern .footer-links ul li {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove padding from footer links on mobile to match other footers */
@media (max-width: 640px) {
  .checkout-page .site-footer.site-footer-modern .footer-links-mobile .col a,
  .checkout-page .site-footer.site-footer-modern .footer-links .col a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}