/* ============================================================
   SKINTHEORY — tokens for the skingenius page styles
   ------------------------------------------------------------
   assets/rdb/css/{cart,checkout,profile,pagination}.css are copied
   from skin-genius and read their colours/type/shape from the
   --sg-* and --ui-* custom properties below. Load THIS file after
   them: the palette is skintheory's brand colour #0a4550 with tints of it,
   the layout and component CSS stays identical to skingenius so
   future syncs stay a plain diff.
   ============================================================ */
:root {
  /* --- ink & paper --- */
  --sg-ink: #1c2b2e;
  --sg-body: #434343;
  --sg-muted: #6a7377;
  --sg-paper: #ffffff;
  --sg-hairline: #dde5e8;
  --sg-edge: rgb(28 43 46 / 0.62);

  /* --- brand field: a light tint of the brand colour #0a4550 (ink sits on it) --- */
  --sg-brand: #dfe9ea;
  --sg-popcorn: #dfe9ea;
  --sg-popcorn-soft: #eef3f4;
  --sg-sugar-swizzle: #f3ede9;
  --sg-buttercream: #f7eedd;
  --sg-lilac-snow: #dfe9ea;
  --sg-alluring-apricot: #f7eedd;
  --sg-misty-jade: #8faab1;

  /* --- action colour: theory green (white on it 10.5:1) --- */
  --sg-tosca: #5f8d96;
  --sg-tosca-slate: #8faab1;
  --sg-tosca-deep: #0a4550;
  --sg-tosca-deeper: #06303a;
  --sg-tosca-soft: #e8f0f2;

  /* skingenius's primary action in checkout/profile is "rose"; here it is the same green */
  --sg-rose: #0a4550;
  --sg-rose-deep: #06303a;
  --sg-rose-soft: #e8f0f2;

  --sg-bubblegum: #5f8d96;
  --sg-matcha: #8faab1;
  --sg-sky: #5f8d96;
  --sg-sky-deep: #0a4550;
  --sg-lavender: #dfe9ea;
  --sg-orchid: #5f8d96;
  --sg-orchid-deep: #0a4550;
  --sg-orchid-deeper: #06303a;
  --sg-orchid-soft: #e8f0f2;

  /* --- state (unchanged) --- */
  --sg-star: #e0a020;
  --sg-warning: #8a5a00;
  --sg-success: #1d7a52;
  --sg-danger: #c0331f;
  --sg-warning-soft: #fbf5ea;
  --sg-warning-soft-border: #ead9b8;
  --sg-danger-soft: #fbecea;
  --sg-danger-soft-border: #eabeb8;

  /* --- type: the faces skintheory already loads --- */
  --sg-display-face: "Frank Ruhl Libre", Georgia, serif;
  --sg-text-face: "Karma", system-ui, sans-serif;

  /* px, not rem: the theme sets html { font-size: 62.5% } so 1rem would be 10px here (16px in skingenius) */
  --sg-fs-micro: 14px;
  --sg-fs-body: 16px;
  --sg-fs-lead: 18px;
  --sg-fs-subtitle: 20px;
  --sg-fs-title: 24px;
  --sg-fs-title-lg: 28px;
  --sg-fs-headline: 36px;
  --sg-fs-headline-lg: 48px;
  --sg-fs-display: 64px;

  /* literal px sizes in cart.css / profile.css are multiplied by this (Karma runs smaller than Comfortaa) */
  --sg-px-scale: 1.2;

  /* --- shape / depth / motion / layout (as skingenius) --- */
  --sg-r-xs: 4px;
  --sg-r-sm: 10px;
  --sg-r: 14px;
  --sg-r-lg: 20px;
  --sg-r-xl: 28px;
  --sg-r-pill: 999px;

  --sg-lift: 0 6px 18px rgb(28 43 46 / 0.1);
  --sg-lift-lg: 0 14px 36px rgb(28 43 46 / 0.14);
  --sg-lift-card: 0 12px 20px -8px rgb(28 43 46 / 0.32);
  --sg-ring: 0 0 0 4px rgb(10 69 80 / 0.18);

  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-fast: 0.18s;
  --sg-slow: 0.4s;
  --sg-hover: 0.2s;

  --sg-container: 1280px;
  --sg-gutter: clamp(16px, 4vw, 32px);
  --sg-section: clamp(40px, 5.5vw, 72px);

  /* --- profile.css "ui" system: accent + focus ring + face --- */
  --ui-accent: #0a4550;
  --ui-accent-fg: #ffffff;
  --ui-ring: #5f8d96;
  --ui-focus-shadow: 0 0 0 3px rgba(10, 69, 80, 0.12);
  --ui-font: "Karma", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui-fs-xs: 13px;
  --ui-fs-sm: 14px;
  --ui-fs-base: 15px;
  --ui-fs-md: 16px;
  --ui-fs-lg: 18px;
  --ui-fs-xl: 20px;
  --ui-fs-2xl: 24px;
  --ui-fs-3xl: 30px;
  --option-bg-selected: var(--sg-tosca-deep);
  --option-bg-active: #0a455080;
}

/* ============================================================
   Wrapper for every redesigned page (Checkout, Payment, Profile,
   Transaction, Order). The bare Bootstrap names (.card, .card-body,
   .form-label) are only restyled inside it.
   ============================================================ */
.sg-app {
  font-family: var(--sg-text-face);
  color: var(--sg-ink);
}

.sg-app h1,
.sg-app h2,
.sg-app h3,
.sg-app h4,
.sg-app h5,
.sg-app h6 {
  font-family: var(--sg-display-face);
  color: var(--sg-ink);
}

/* ── shared subset of skingenius-style.css used by these views ── */
.sg-band {
  padding-block: var(--sg-section);
}

.sg-band--paper {
  background: var(--sg-paper);
}

.sg-band--hairline {
  background: var(--sg-hairline);
}

.sg-app .container {
  max-width: var(--sg-container);
}

.size-6 {
  font-size: 6px;
  width: 24px;
  height: 24px;
}

.genius-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--sg-r-pill);
  border: 1.5px solid var(--sg-ink);
  background: transparent;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  color: var(--sg-ink) !important;
  cursor: pointer;
  transition: background var(--sg-fast) var(--sg-ease), color var(--sg-fast) var(--sg-ease), transform var(--sg-fast) var(--sg-ease);
}

.genius-button:hover {
  background: var(--sg-ink);
  color: #fff !important;
  transform: translateY(-2px);
}

.genius-card {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r-lg);
  padding: 20px;
}

.sg-field {
  display: block;
  margin-bottom: 18px;
}

.sg-label {
  display: block;
  font-size: var(--sg-fs-body);
  font-weight: 700;
  color: var(--sg-ink);
  margin-bottom: 6px;
}

.sg-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: var(--sg-text-face);
  font-size: var(--sg-fs-body);
  color: var(--sg-ink);
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-hairline);
  border-radius: var(--sg-r);
  outline: none;
}

.sg-input:focus {
  border-color: var(--sg-tosca-deep);
  box-shadow: var(--sg-ring);
}

/* Cart drawer sits above the sticky theme header. */
#offcanvasCart {
  z-index: 9999999;
  background: transparent;
  border: 0;
}

#offcanvasCart .cart-panel {
  font-family: var(--sg-text-face);
}

/* Bootstrap 5.0 switch (dropshipper toggle) in the action colour. */
.sg-app .form-check-input:checked {
  background-color: var(--sg-tosca-deep);
  border-color: var(--sg-tosca-deep);
}

.sg-app .form-check-input:focus {
  border-color: var(--sg-tosca-deep);
  box-shadow: var(--sg-ring);
}

/* .card & co. set display in places; keep the hidden attribute authoritative. */
.sg-app [hidden] {
  display: none !important;
}

/* Form helpers the skingenius guest-checkout / profile forms rely on. */
.sg-label--required::after {
  content: "*";
  color: var(--sg-danger);
  margin-left: 3px;
}

.sg-input::placeholder {
  color: var(--sg-muted);
  opacity: 1;
}

.sg-input.error,
.sg-input[aria-invalid="true"] {
  border-color: var(--sg-danger);
}

.sg-help {
  font-size: var(--sg-fs-micro);
  color: var(--sg-body);
  margin: 6px 0 0;
}

/* jquery-validate's inline message */
.sg-app label.error {
  display: block;
  margin-top: 4px;
  font-size: var(--sg-fs-micro);
  font-weight: 600;
  color: var(--sg-danger);
}

/* Modals of the redesigned pages: rounded like skingenius (.modal-content there is global). */
.modal.sg-app .modal-content {
  border: none;
  border-radius: var(--sg-r-xl);
  overflow: hidden;
}

/* Standalone payment page (DoPaymentView) has no theme stylesheet behind it. */
.pay-body {
  font-family: var(--sg-text-face);
  color: var(--sg-ink);
  margin: 0;
}

.pay-body h1,
.pay-body h2,
.pay-body h3 {
  font-family: var(--sg-display-face);
  color: var(--sg-ink);
}

/* Profile sidebar: Karma at 16px needs a wider column than skingenius's 220px so
   "Alamat Pengiriman" stays on one line. */
@media (min-width: 769px) {
  .ui-profile-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}