/*
 * Managed Accounts — shared design tokens.
 *
 * Derived from the Figma "Design System v2" (Hızlı Öde file) via the
 * pages/ prototypes. Every token is prefixed `--ma-` to avoid clashing
 * with theme variables. `:root { --var }` is rewritten onto the component
 * wrapper at build time, so these inherit down every section subtree.
 *
 * Nearly every colour here is merchant-facing. `surfaceStyle` (brand-style.ts)
 * turns the shared "Görünüm" props into inline custom properties on each
 * section's root element (`.ma-surface`), which outrank these and inherit
 * down the subtree; the values below are what an untouched theme gets.
 * Read that file for which prop drives which token. Every colour token is
 * driven by a prop or derived from one — `scripts/check-token-surface.ts`
 * asserts it: a token nothing drives is an error there.
 *
 * Tokens computed FROM another token (--ma-primary-hover and friends) must
 * be declared on `.ma-surface` rather than at :root: :root is rewritten
 * onto an ancestor wrapper at build time, where the derivation would
 * resolve against the default and inherit down already frozen.
 *
 * The typeface is NOT one of them — this package declares no family
 * anywhere, see --ma-font below.
 */

:where([data-cc-scope~="ikas"]) :where([data-cc-scope~="ikas"]),
:where([data-cc-scope~="ikas"]):where([data-cc-scope~="ikas"]){
  /* Notice boxes — a fill, its border, and the text on it, in each of the four status tones.
     Named for the ROLE, not the hue: a merchant whose "olumlu" colour is teal still gets a
     `--ma-notice-positive-bg`, where the old `--ma-green-100` would have been lying about it.

     Each one has a prop of its own, and the hand-picked value below is what it ships with. There
     was a design where these were computed from the four status colours instead; it could not
     work, and the docblock in brand-style.ts records why.

     The Figma zinc/brand ramp that used to sit here is gone: half was never referenced, and the
     half that was turned out to be a second spelling of a semantic token that already existed —
     `--ma-red-600` WAS `--ma-danger`, `--ma-zinc-900` WAS `--ma-text-strong`, to the byte. Two
     names for one colour means the next author picks one at random and the prop drives half the
     page. `--ma-divider` and `--ma-text-strong` went the same way for the same reason. */
  --ma-notice-positive-bg: #dcfce7;
  --ma-notice-positive-border: #bbf7d0;
  --ma-notice-positive-text: #052e16;
  --ma-notice-progress-bg: #fef3c7;
  --ma-notice-progress-border: #fde68a;
  --ma-notice-progress-text: #451a03;
  --ma-notice-danger-bg: #fee2e2;
  --ma-notice-danger-border: #fecaca;
  --ma-notice-danger-text: #450a0a;
  --ma-notice-info-bg: #dbeafe;
  --ma-notice-info-border: #bfdbfe;
  --ma-notice-info-text: #172554;

  /* The family is the host theme's, never ours. `inherit` hands every typography role below
     to whatever the surrounding page already sets — a generated theme applies its default text
     style through a `*` rule and falls back to the base reset — so these sections read as part
     of the store rather than as a widget dropped into it. There is deliberately no font prop:
     a section that could disagree with the theme's own typography is a section that will. */
  --ma-font: inherit;

  /* semantic — one prop each, overridden inline on `.ma-surface`. See COLOR_TOKENS in
     brand-style.ts for the prop → token map. Tokens with no prop of their own are NOT here:
     they are computed from their parent on `.ma-surface` below. */
  --ma-surface: #ffffff;
  --ma-surface-subtle: #fafaf8;
  --ma-surface-sunken: #f5f4f1;
  --ma-page-bg: #f4f3f0;
  --ma-border: #ecebe7;
  --ma-border-strong: #dddcd7;
  --ma-border-input: #d6d5d0;
  --ma-text: #141414;
  --ma-text-secondary: #6e6e6a;
  --ma-text-muted: #8a8a85;
  --ma-text-disabled: #b5b4af;
  --ma-status-positive: #2e7d46;
  --ma-status-progress: #b07818;
  --ma-status-neutral: #8a8a85;
  --ma-status-refund: #6e5bc6;
  --ma-danger: #dc2626;
  /* The two dimming layers carry their opacity IN the colour — the picker's opacity slider is
     the control, no ratio is baked in here. The modal backdrop dims the page behind a dialog;
     the visual scrim darkens the auth visual so the caption over it stays readable. */
  --ma-overlay: #1a1a1a59;
  --ma-visual-scrim: #1a1a1a8c;
  /* Text over the auth visual's scrim. Driven as a PAIR with that scrim (visualTextColor /
     visualScrimColor): the caption is readable only against its own scrim, so whichever side a
     merchant lightens, the other is there to compensate. The caption once followed the surface
     colour instead and vanished on dark cards — that wiring must not come back. */
  --ma-on-visual: #fff;

  /* spacing */
  --ma-sp-2: 2px;
  --ma-sp-4: 4px;
  --ma-sp-6: 6px;
  --ma-sp-8: 8px;
  --ma-sp-12: 12px;
  --ma-sp-16: 16px;
  --ma-sp-20: 20px;
  --ma-sp-24: 24px;
  --ma-sp-32: 32px;
  --ma-sp-40: 40px;
  --ma-sp-48: 48px;
  --ma-sp-64: 64px;

  /* type scale */
  --ma-fs-2xs: 12px;
  --ma-lh-2xs: 18px;
  --ma-fs-sm: 14px;
  --ma-lh-sm: 20px;
  --ma-fs-lg: 16px;
  --ma-lh-lg: 24px;
  --ma-fs-xl: 18px;
  --ma-lh-xl: 28px;
  --ma-fs-2xl: 24px;
  --ma-lh-2xl: 32px;
  --ma-fw-regular: 400;
  --ma-fw-medium: 500;
  --ma-fw-semibold: 600;

  /* shadows */
  --ma-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --ma-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --ma-shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08);
}

/*
 * Section root — the element `surfaceStyle` writes its inline custom properties onto.
 *
 * A token whose value REFERENCES another token has to be declared here rather than at :root:
 * the inline override lands on this element, and a derivation resolved one level up would have
 * already frozen at the default before inheriting down. `--ma-primary-hover` below is the case.
 */
:where([data-cc-scope~="ikas"]) .ma-surface,
:where([data-cc-scope~="ikas"]).ma-surface{
  /* radius — kademe 2 (Yumuşak) fallback değerleri. Canlı değerler her
     section'ın "Köşe stili" (cornerStyle) ENUM prop'una göre surfaceStyle()
     (_shared/brand-style.ts) tarafından section kökünde inline set edilir; prop
     yoksa bu fallback'ler geçerlidir ve kademe 2 tablosuyla birebir aynıdır
     (cornerStyle defaultValue = "2"). */
  --ma-radius-xs: 3px;
  --ma-radius-sm: 4px;
  --ma-radius: 8px;
  --ma-radius-md: 10px;
  --ma-radius-lg: 12px;
  --ma-radius-pill: 8px;
  /* primaryColor prop'u --ma-primary'yi inline ezer; hover/soft ondan
     türetilir ki tek prop tüm primary tonlarını sürsün. */
  --ma-primary: #141414;
  --ma-primary-contrast: #ffffff;
  --ma-primary-hover: color-mix(in srgb, var(--ma-primary) 85%, #000);
  --ma-primary-soft: color-mix(in srgb, var(--ma-primary) 15%, #fff);
  --ma-focus-ring: var(--ma-primary);

  /* Tokens with no control of their own: each is one step off a token that HAS one, and the step
     is the whole point of it existing. Declared here rather than at :root because :root is
     rewritten onto the wrapper one level up, where the reference would resolve against the
     default and inherit down already frozen — the same reason --ma-primary-hover sits here.

     Derived here rather than in `brand-style.ts` because nothing about them is a choice a merchant
     makes: with no control of their own there is no picked value to protect, so the ratio belongs
     next to the token it modifies, written once. A token that DOES have a control is never derived
     at all — see the docblock in brand-style.ts for why a derivation there could not run. */
  --ma-text-body: color-mix(in srgb, var(--ma-text) 87%, #fff);
  --ma-border-dashed: color-mix(in srgb, var(--ma-border-strong) 90%, #000);
  --ma-skeleton-sheen: color-mix(in srgb, var(--ma-surface-sunken) 97%, #000);
  --ma-checker-tile: color-mix(in srgb, var(--ma-page-bg) 55%, #fff);

  /* Typography: the .ma-t-<role> classes below. A built-in section carries no theme text style,
     so the roles fix size/weight/leading themselves and take the family from --ma-font, which
     inherits from the host page. Roles are applied through src/utils/typography.ts. */
  color: var(--ma-text);
  -webkit-font-smoothing: antialiased;
}

/* Native controls do not inherit the page font from the UA stylesheet — they would sit at the
   browser's own 13.33px Arial while every label beside them followed the theme. These pages are
   mostly forms, so the exception is the rule here.

   Written with :where() so it carries no specificity: it outranks the UA stylesheet, which is the
   whole point, while a .ma-t-<role> class on the same control still wins. Those roles resolve the
   family to `inherit` too, so every path ends at the theme's font. */
:where([data-cc-scope~="ikas"]) :where(.ma-surface) :where(input, select, textarea, button),
:where([data-cc-scope~="ikas"]):where(.ma-surface) :where(input, select, textarea, button){
  font-family: inherit;
}

:where([data-cc-scope~="ikas"]) .ma-surface *,
:where([data-cc-scope~="ikas"]).ma-surface *,
:where([data-cc-scope~="ikas"]) .ma-surface *::before,
:where([data-cc-scope~="ikas"]).ma-surface *::before,
:where([data-cc-scope~="ikas"]) .ma-surface *::after,
:where([data-cc-scope~="ikas"]).ma-surface *::after{
  box-sizing: border-box;
}

/*
 * NOTE ON CASE: hiçbir rol text-transform taşımaz — metinler yazıldığı
 * gibi (mixed case) render edilir. (Eski uppercase overline/button
 * davranışı bilinçli olarak kaldırıldı.)
 */

/*
 * Typography roles — src/utils/typography.ts typeClass() bunlara çözümlenir.
 * Değerler eski "Type/*" text style'larından birebir taşındı (spec §C).
 */
:where([data-cc-scope~="ikas"]) .ma-t-display,
:where([data-cc-scope~="ikas"]).ma-t-display{
  font-family: var(--ma-font);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
:where([data-cc-scope~="ikas"]) .ma-t-heading,
:where([data-cc-scope~="ikas"]).ma-t-heading{
  font-family: var(--ma-font);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
:where([data-cc-scope~="ikas"]) .ma-t-subheading,
:where([data-cc-scope~="ikas"]).ma-t-subheading{
  font-family: var(--ma-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
:where([data-cc-scope~="ikas"]) .ma-t-title,
:where([data-cc-scope~="ikas"]).ma-t-title{
  font-family: var(--ma-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
:where([data-cc-scope~="ikas"]) .ma-t-body,
:where([data-cc-scope~="ikas"]).ma-t-body{
  font-family: var(--ma-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
:where([data-cc-scope~="ikas"]) .ma-t-bodyStrong,
:where([data-cc-scope~="ikas"]).ma-t-bodyStrong{
  font-family: var(--ma-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
:where([data-cc-scope~="ikas"]) .ma-t-bodySmall,
:where([data-cc-scope~="ikas"]).ma-t-bodySmall{
  font-family: var(--ma-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
:where([data-cc-scope~="ikas"]) .ma-t-label,
:where([data-cc-scope~="ikas"]).ma-t-label{
  font-family: var(--ma-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
:where([data-cc-scope~="ikas"]) .ma-t-caption,
:where([data-cc-scope~="ikas"]).ma-t-caption{
  font-family: var(--ma-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
:where([data-cc-scope~="ikas"]) .ma-t-overline,
:where([data-cc-scope~="ikas"]).ma-t-overline{
  font-family: var(--ma-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
:where([data-cc-scope~="ikas"]) .ma-t-button,
:where([data-cc-scope~="ikas"]).ma-t-button{
  font-family: var(--ma-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
}


.cc_ikas_account_orders .ma-empty, .cc_ikas_account_favorites .ma-empty, .cc_ikas_account_addresses .ma-empty, .cc_ikas_account_order_detail .ma-empty {
  text-align: center;
  padding: var(--ma-sp-40) var(--ma-sp-24);
  color: var(--ma-text-secondary);
  border: 1px solid var(--ma-border);
  border-radius: calc(var(--ma-radius) + 4px);
  background: var(--ma-surface);
}

.cc_ikas_account_orders .ma-empty__ic, .cc_ikas_account_favorites .ma-empty__ic, .cc_ikas_account_addresses .ma-empty__ic, .cc_ikas_account_order_detail .ma-empty__ic {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--ma-text-disabled);
}

.cc_ikas_account_orders .ma-empty__title, .cc_ikas_account_favorites .ma-empty__title, .cc_ikas_account_addresses .ma-empty__title, .cc_ikas_account_order_detail .ma-empty__title {
  display: inline-block;
  margin: 0 0 4px;
  color: var(--ma-text);
}

.cc_ikas_account_orders .ma-empty__text, .cc_ikas_account_favorites .ma-empty__text, .cc_ikas_account_addresses .ma-empty__text, .cc_ikas_account_order_detail .ma-empty__text {
  margin: 0;
}

.cc_ikas_account_orders .ma-empty__action, .cc_ikas_account_favorites .ma-empty__action, .cc_ikas_account_addresses .ma-empty__action, .cc_ikas_account_order_detail .ma-empty__action {
  display: flex;
  justify-content: center;
  margin-top: var(--ma-sp-16);
}


/* Section roots start `visibility:hidden` until hydrated — this shell must
   stay visible immediately to avoid a flash of blank content. */
.cc_ikas_account_orders .ma-acc, .cc_ikas_account_info .ma-acc, .cc_ikas_account_favorites .ma-acc, .cc_ikas_account_addresses .ma-acc, .cc_ikas_account_order_detail .ma-acc {
  visibility: visible !important;
}

.cc_ikas_account_orders .ma-acc__bar, .cc_ikas_account_info .ma-acc__bar, .cc_ikas_account_favorites .ma-acc__bar, .cc_ikas_account_addresses .ma-acc__bar, .cc_ikas_account_order_detail .ma-acc__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  /* `space-between` alone leaves the three groups flush against each other the moment the bar
     runs out of free space, and every label in here is a merchant prop — there is no set of
     widths that cannot run out. A gap is what keeps "Favorilerim" off "← Mağazaya dön". */
  gap: 32px;
  height: 72px;
  padding: 0 48px;
  border-bottom: 1px solid var(--ma-border);
  box-sizing: border-box;
}

.cc_ikas_account_orders .ma-acc__brand, .cc_ikas_account_info .ma-acc__brand, .cc_ikas_account_favorites .ma-acc__brand, .cc_ikas_account_addresses .ma-acc__brand, .cc_ikas_account_order_detail .ma-acc__brand {
  flex: 0 0 auto;
  align-self: center;
}

/* Hesap barı auth barından sıkışık — görseli 28px'e sınırla (spec §A). */
.cc_ikas_account_orders .ma-acc__brand .ma-brand__img, .cc_ikas_account_info .ma-acc__brand .ma-brand__img, .cc_ikas_account_favorites .ma-acc__brand .ma-brand__img, .cc_ikas_account_addresses .ma-acc__brand .ma-brand__img, .cc_ikas_account_order_detail .ma-acc__brand .ma-brand__img {
  max-height: 28px;
}

.cc_ikas_account_orders .ma-acc__nav, .cc_ikas_account_info .ma-acc__nav, .cc_ikas_account_favorites .ma-acc__nav, .cc_ikas_account_addresses .ma-acc__nav, .cc_ikas_account_order_detail .ma-acc__nav {
  display: flex;
  align-items: stretch;
  gap: 32px;
  /* The nav gives way instead of pushing the bar past the page: a flex item's automatic minimum
     is its content — here a row of `nowrap` merchant labels — until its overflow stops being
     `visible`, which is what this does. Left alone, the default label set overflowed a 768px
     tablet and put a horizontal scrollbar under the whole storefront. The mobile bar has always
     scrolled its nav; this is the same answer one breakpoint up.

     Scrollbar hidden because this one is 72px tall: a persistent bar (Windows, and any macOS set
     to "always show") would eat 15px of it and sit across the tab underlines. The partly-visible
     last item is the affordance, same as the mobile row. */
  overflow-x: auto;
  scrollbar-width: none;
  /* The extra pixel is the active tab's underline overlapping the bar's own 1px border, which
     used to be a `margin-bottom: -1px` on the links themselves. It has to live on the nav now:
     an overflow container clips what pokes out of it, and what poked out was exactly that pixel
     of the 2px underline. Inside a 72px content box the links reach the border on their own. */
  height: calc(100% + 1px);
}

.cc_ikas_account_orders .ma-acc__nav::-webkit-scrollbar, .cc_ikas_account_info .ma-acc__nav::-webkit-scrollbar, .cc_ikas_account_favorites .ma-acc__nav::-webkit-scrollbar, .cc_ikas_account_addresses .ma-acc__nav::-webkit-scrollbar, .cc_ikas_account_order_detail .ma-acc__nav::-webkit-scrollbar {
  display: none;
}

.cc_ikas_account_orders .ma-acc__nav > a, .cc_ikas_account_info .ma-acc__nav > a, .cc_ikas_account_favorites .ma-acc__nav > a, .cc_ikas_account_addresses .ma-acc__nav > a, .cc_ikas_account_order_detail .ma-acc__nav > a, .cc_ikas_account_orders .ma-acc__nav > button, .cc_ikas_account_info .ma-acc__nav > button, .cc_ikas_account_favorites .ma-acc__nav > button, .cc_ikas_account_addresses .ma-acc__nav > button, .cc_ikas_account_order_detail .ma-acc__nav > button {
  appearance: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ma-text-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.cc_ikas_account_orders .ma-acc__nav > a[aria-current="page"], .cc_ikas_account_info .ma-acc__nav > a[aria-current="page"], .cc_ikas_account_favorites .ma-acc__nav > a[aria-current="page"], .cc_ikas_account_addresses .ma-acc__nav > a[aria-current="page"], .cc_ikas_account_order_detail .ma-acc__nav > a[aria-current="page"] {
  color: var(--ma-primary);
  border-bottom-color: var(--ma-primary);
}

.cc_ikas_account_orders .ma-acc__meta, .cc_ikas_account_info .ma-acc__meta, .cc_ikas_account_favorites .ma-acc__meta, .cc_ikas_account_addresses .ma-acc__meta, .cc_ikas_account_order_detail .ma-acc__meta {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cc_ikas_account_orders .ma-acc__meta a, .cc_ikas_account_info .ma-acc__meta a, .cc_ikas_account_favorites .ma-acc__meta a, .cc_ikas_account_addresses .ma-acc__meta a, .cc_ikas_account_order_detail .ma-acc__meta a, .cc_ikas_account_orders .ma-acc__meta button, .cc_ikas_account_info .ma-acc__meta button, .cc_ikas_account_favorites .ma-acc__meta button, .cc_ikas_account_addresses .ma-acc__meta button, .cc_ikas_account_order_detail .ma-acc__meta button {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--ma-text-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.cc_ikas_account_orders .ma-acc__back-short, .cc_ikas_account_info .ma-acc__back-short, .cc_ikas_account_favorites .ma-acc__back-short, .cc_ikas_account_addresses .ma-acc__back-short, .cc_ikas_account_order_detail .ma-acc__back-short {
  display: none;
}

.cc_ikas_account_orders .ma-acc__content, .cc_ikas_account_info .ma-acc__content, .cc_ikas_account_favorites .ma-acc__content, .cc_ikas_account_addresses .ma-acc__content, .cc_ikas_account_order_detail .ma-acc__content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 48px 96px;
  box-sizing: border-box;
}

/* Only when the merchant asks for it — see .ma-auth--full for why this is off by
   default. The 72px is .ma-acc__bar, which always renders here (it carries the
   account nav and sign-out), so the subtraction holds in both bar states. */
.cc_ikas_account_orders .ma-acc--full .ma-acc__content, .cc_ikas_account_info .ma-acc--full .ma-acc__content, .cc_ikas_account_favorites .ma-acc--full .ma-acc__content, .cc_ikas_account_addresses .ma-acc--full .ma-acc__content, .cc_ikas_account_order_detail .ma-acc--full .ma-acc__content {
  min-height: calc(100vh - 72px);
}

@media (max-width: 767px) {
  .cc_ikas_account_orders .ma-acc__bar, .cc_ikas_account_info .ma-acc__bar, .cc_ikas_account_favorites .ma-acc__bar, .cc_ikas_account_addresses .ma-acc__bar, .cc_ikas_account_order_detail .ma-acc__bar {
    flex-wrap: wrap;
    height: auto;
    padding: 0;
  }

  .cc_ikas_account_orders .ma-acc__brand, .cc_ikas_account_info .ma-acc__brand, .cc_ikas_account_favorites .ma-acc__brand, .cc_ikas_account_addresses .ma-acc__brand, .cc_ikas_account_order_detail .ma-acc__brand {
    order: 1;
    height: 60px;
    margin: 0 20px;
  }

  .cc_ikas_account_orders .ma-acc__meta, .cc_ikas_account_info .ma-acc__meta, .cc_ikas_account_favorites .ma-acc__meta, .cc_ikas_account_addresses .ma-acc__meta, .cc_ikas_account_order_detail .ma-acc__meta {
    order: 2;
    height: 60px;
    margin: 0 20px;
  }

  .cc_ikas_account_orders .ma-acc__nav, .cc_ikas_account_info .ma-acc__nav, .cc_ikas_account_favorites .ma-acc__nav, .cc_ikas_account_addresses .ma-acc__nav, .cc_ikas_account_order_detail .ma-acc__nav {
    order: 3;
    flex: 1 1 100%;
    /* `height: auto` drops the base rule's `calc(100% + 1px)`, so the underline overlap the links
       no longer carry has to be restated here. */
    height: auto;
    margin-bottom: -1px;
    white-space: nowrap;
    gap: 24px;
    padding: 0 20px;
  }

  .cc_ikas_account_orders .ma-acc__nav > a, .cc_ikas_account_info .ma-acc__nav > a, .cc_ikas_account_favorites .ma-acc__nav > a, .cc_ikas_account_addresses .ma-acc__nav > a, .cc_ikas_account_order_detail .ma-acc__nav > a, .cc_ikas_account_orders .ma-acc__nav > button, .cc_ikas_account_info .ma-acc__nav > button, .cc_ikas_account_favorites .ma-acc__nav > button, .cc_ikas_account_addresses .ma-acc__nav > button, .cc_ikas_account_order_detail .ma-acc__nav > button {
    padding-bottom: 14px;
  }

  .cc_ikas_account_orders .ma-acc__back-full, .cc_ikas_account_info .ma-acc__back-full, .cc_ikas_account_favorites .ma-acc__back-full, .cc_ikas_account_addresses .ma-acc__back-full, .cc_ikas_account_order_detail .ma-acc__back-full {
    display: none;
  }

  .cc_ikas_account_orders .ma-acc__back-short, .cc_ikas_account_info .ma-acc__back-short, .cc_ikas_account_favorites .ma-acc__back-short, .cc_ikas_account_addresses .ma-acc__back-short, .cc_ikas_account_order_detail .ma-acc__back-short {
    display: inline;
  }

  .cc_ikas_account_orders .ma-acc__content, .cc_ikas_account_info .ma-acc__content, .cc_ikas_account_favorites .ma-acc__content, .cc_ikas_account_addresses .ma-acc__content, .cc_ikas_account_order_detail .ma-acc__content {
    padding: 28px 24px 56px;
  }
}


.cc_ikas_login .ma-divider, .cc_ikas_register .ma-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ma-text-secondary);
}

.cc_ikas_login .ma-divider::before, .cc_ikas_register .ma-divider::before, .cc_ikas_login .ma-divider::after, .cc_ikas_register .ma-divider::after {
  content: "";
  height: 1px;
  background: var(--ma-border);
  flex: 1;
}

.cc_ikas_login .ma-check, .cc_ikas_register .ma-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ma-sp-8);
  cursor: pointer;
}

.cc_ikas_login .ma-check__native, .cc_ikas_register .ma-check__native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cc_ikas_login .ma-check__box, .cc_ikas_register .ma-check__box {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: var(--ma-radius-xs);
  border: 1px solid var(--ma-border-input);
  background: var(--ma-surface);
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

/* danger border while erring and still unchecked; checking it resolves the error visually */
.cc_ikas_login .ma-check--error .ma-check__native:not(:checked) + .ma-check__box, .cc_ikas_register .ma-check--error .ma-check__native:not(:checked) + .ma-check__box {
  border-color: var(--ma-danger);
}

.cc_ikas_login .ma-check__native:checked + .ma-check__box, .cc_ikas_register .ma-check__native:checked + .ma-check__box {
  background: var(--ma-primary);
  border-color: var(--ma-primary);
}

.cc_ikas_login .ma-check__native:checked + .ma-check__box::after, .cc_ikas_register .ma-check__native:checked + .ma-check__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--ma-primary-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cc_ikas_login .ma-check__native:focus-visible + .ma-check__box, .cc_ikas_register .ma-check__native:focus-visible + .ma-check__box {
  box-shadow: 0 0 0 3px var(--ma-focus-ring);
}

.cc_ikas_login .ma-check__text, .cc_ikas_register .ma-check__text {
  color: var(--ma-text-body);
  user-select: none;
}

.cc_ikas_login .ma-check--disabled, .cc_ikas_register .ma-check--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* the stack of consent rows — every caller renders the rows inside one of these */
.cc_ikas_login .ma-consents, .cc_ikas_register .ma-consents {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-12);
}

.cc_ikas_login .ma-consent-field, .cc_ikas_register .ma-consent-field {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-4);
}

.cc_ikas_login .ma-consent, .cc_ikas_register .ma-consent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc_ikas_login .ma-consent__text, .cc_ikas_register .ma-consent__text {
  color: var(--ma-text-secondary);
}

.cc_ikas_login a.ma-consent__text, .cc_ikas_register a.ma-consent__text {
  color: var(--ma-primary);
  text-decoration: underline;
}

.cc_ikas_login .ma-consent__error, .cc_ikas_register .ma-consent__error {
  margin: 8px 0 0;
  color: var(--ma-danger);
}

.cc_ikas_login .ma-sms-back, .cc_ikas_register .ma-sms-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ma-text-secondary);
  cursor: pointer;
}

.cc_ikas_login .ma-sms-back:hover, .cc_ikas_register .ma-sms-back:hover {
  color: var(--ma-text);
}

.cc_ikas_login .ma-sms-resend, .cc_ikas_register .ma-sms-resend {
  margin: 0;
  text-align: center;
  color: var(--ma-text-secondary);
}

.cc_ikas_login .ma-sms-info, .cc_ikas_register .ma-sms-info {
  margin: 10px 0 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_login .ma-otp, .cc_ikas_register .ma-otp {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.cc_ikas_login .ma-otp__cell, .cc_ikas_register .ma-otp__cell {
  appearance: none;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1.15;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ma-border-strong);
  border-radius: var(--ma-radius);
  background: var(--ma-surface);
  color: var(--ma-text);
  text-align: center;
  outline: none;
}

.cc_ikas_login .ma-otp__cell:focus, .cc_ikas_register .ma-otp__cell:focus, .cc_ikas_login .ma-otp__cell--filled, .cc_ikas_register .ma-otp__cell--filled {
  border-color: var(--ma-primary);
  box-shadow: 0 0 0 3px var(--ma-focus-ring);
}


/**
 * input-editorial: label-above underline row — 11px uppercase muted label,
 * 1px bottom border that darkens to --ma-text on focus, 44px native input.
 */
.cc_ikas_email_verification .ma-inp, .cc_ikas_login .ma-inp, .cc_ikas_forgot_password .ma-inp, .cc_ikas_recover_password .ma-inp, .cc_ikas_account_info .ma-inp, .cc_ikas_register .ma-inp, .cc_ikas_account_addresses .ma-inp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: text;
}

.cc_ikas_email_verification .ma-inp__k, .cc_ikas_login .ma-inp__k, .cc_ikas_forgot_password .ma-inp__k, .cc_ikas_recover_password .ma-inp__k, .cc_ikas_account_info .ma-inp__k, .cc_ikas_register .ma-inp__k, .cc_ikas_account_addresses .ma-inp__k {
  color: var(--ma-text-muted);
}

/* the field's own validation message: tucked under the underline, tighter than the column gap */
.cc_ikas_email_verification .ma-inp__err, .cc_ikas_login .ma-inp__err, .cc_ikas_forgot_password .ma-inp__err, .cc_ikas_recover_password .ma-inp__err, .cc_ikas_account_info .ma-inp__err, .cc_ikas_register .ma-inp__err, .cc_ikas_account_addresses .ma-inp__err {
  color: var(--ma-danger);
  margin-top: -4px;
}

.cc_ikas_email_verification .ma-inp__lock, .cc_ikas_login .ma-inp__lock, .cc_ikas_forgot_password .ma-inp__lock, .cc_ikas_recover_password .ma-inp__lock, .cc_ikas_account_info .ma-inp__lock, .cc_ikas_register .ma-inp__lock, .cc_ikas_account_addresses .ma-inp__lock {
  color: var(--ma-text-muted);
}

.cc_ikas_email_verification .ma-inp__row, .cc_ikas_login .ma-inp__row, .cc_ikas_forgot_password .ma-inp__row, .cc_ikas_recover_password .ma-inp__row, .cc_ikas_account_info .ma-inp__row, .cc_ikas_register .ma-inp__row, .cc_ikas_account_addresses .ma-inp__row {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
  border-bottom: 1px solid var(--ma-border-input);
  transition: border-color 0.15s ease;
}

.cc_ikas_email_verification .ma-inp__row:focus-within, .cc_ikas_login .ma-inp__row:focus-within, .cc_ikas_forgot_password .ma-inp__row:focus-within, .cc_ikas_recover_password .ma-inp__row:focus-within, .cc_ikas_account_info .ma-inp__row:focus-within, .cc_ikas_register .ma-inp__row:focus-within, .cc_ikas_account_addresses .ma-inp__row:focus-within {
  border-bottom-color: var(--ma-primary);
}

.cc_ikas_email_verification .ma-inp__native, .cc_ikas_login .ma-inp__native, .cc_ikas_forgot_password .ma-inp__native, .cc_ikas_recover_password .ma-inp__native, .cc_ikas_account_info .ma-inp__native, .cc_ikas_register .ma-inp__native, .cc_ikas_account_addresses .ma-inp__native {
  appearance: none;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  height: 44px;
  color: var(--ma-text);
  width: 100%;
}

.cc_ikas_email_verification .ma-inp__native::placeholder, .cc_ikas_login .ma-inp__native::placeholder, .cc_ikas_forgot_password .ma-inp__native::placeholder, .cc_ikas_recover_password .ma-inp__native::placeholder, .cc_ikas_account_info .ma-inp__native::placeholder, .cc_ikas_register .ma-inp__native::placeholder, .cc_ikas_account_addresses .ma-inp__native::placeholder {
  color: var(--ma-text-disabled);
}

.cc_ikas_email_verification .ma-inp__toggle, .cc_ikas_login .ma-inp__toggle, .cc_ikas_forgot_password .ma-inp__toggle, .cc_ikas_recover_password .ma-inp__toggle, .cc_ikas_account_info .ma-inp__toggle, .cc_ikas_register .ma-inp__toggle, .cc_ikas_account_addresses .ma-inp__toggle {
  appearance: none;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--ma-text-muted);
  cursor: pointer;
}

.cc_ikas_email_verification .ma-inp__toggle:hover, .cc_ikas_login .ma-inp__toggle:hover, .cc_ikas_forgot_password .ma-inp__toggle:hover, .cc_ikas_recover_password .ma-inp__toggle:hover, .cc_ikas_account_info .ma-inp__toggle:hover, .cc_ikas_register .ma-inp__toggle:hover, .cc_ikas_account_addresses .ma-inp__toggle:hover {
  color: var(--ma-text-secondary);
}

.cc_ikas_email_verification .ma-inp--disabled, .cc_ikas_login .ma-inp--disabled, .cc_ikas_forgot_password .ma-inp--disabled, .cc_ikas_recover_password .ma-inp--disabled, .cc_ikas_account_info .ma-inp--disabled, .cc_ikas_register .ma-inp--disabled, .cc_ikas_account_addresses .ma-inp--disabled {
  cursor: default;
}

.cc_ikas_email_verification .ma-inp--disabled .ma-inp__k, .cc_ikas_login .ma-inp--disabled .ma-inp__k, .cc_ikas_forgot_password .ma-inp--disabled .ma-inp__k, .cc_ikas_recover_password .ma-inp--disabled .ma-inp__k, .cc_ikas_account_info .ma-inp--disabled .ma-inp__k, .cc_ikas_register .ma-inp--disabled .ma-inp__k, .cc_ikas_account_addresses .ma-inp--disabled .ma-inp__k, .cc_ikas_email_verification .ma-inp--disabled .ma-inp__native, .cc_ikas_login .ma-inp--disabled .ma-inp__native, .cc_ikas_forgot_password .ma-inp--disabled .ma-inp__native, .cc_ikas_recover_password .ma-inp--disabled .ma-inp__native, .cc_ikas_account_info .ma-inp--disabled .ma-inp__native, .cc_ikas_register .ma-inp--disabled .ma-inp__native, .cc_ikas_account_addresses .ma-inp--disabled .ma-inp__native {
  color: var(--ma-text-disabled);
}

.cc_ikas_email_verification .ma-inp--disabled .ma-inp__row, .cc_ikas_login .ma-inp--disabled .ma-inp__row, .cc_ikas_forgot_password .ma-inp--disabled .ma-inp__row, .cc_ikas_recover_password .ma-inp--disabled .ma-inp__row, .cc_ikas_account_info .ma-inp--disabled .ma-inp__row, .cc_ikas_register .ma-inp--disabled .ma-inp__row, .cc_ikas_account_addresses .ma-inp--disabled .ma-inp__row {
  border-bottom-color: var(--ma-border-input);
}

.cc_ikas_email_verification .ma-inp--error .ma-inp__row, .cc_ikas_login .ma-inp--error .ma-inp__row, .cc_ikas_forgot_password .ma-inp--error .ma-inp__row, .cc_ikas_recover_password .ma-inp--error .ma-inp__row, .cc_ikas_account_info .ma-inp--error .ma-inp__row, .cc_ikas_register .ma-inp--error .ma-inp__row, .cc_ikas_account_addresses .ma-inp--error .ma-inp__row {
  border-bottom-color: var(--ma-danger);
}

.cc_ikas_email_verification .ma-inp--error .ma-inp__row:focus-within, .cc_ikas_login .ma-inp--error .ma-inp__row:focus-within, .cc_ikas_forgot_password .ma-inp--error .ma-inp__row:focus-within, .cc_ikas_recover_password .ma-inp--error .ma-inp__row:focus-within, .cc_ikas_account_info .ma-inp--error .ma-inp__row:focus-within, .cc_ikas_register .ma-inp--error .ma-inp__row:focus-within, .cc_ikas_account_addresses .ma-inp--error .ma-inp__row:focus-within {
  border-bottom-color: var(--ma-danger);
}

/* The `skeleton` mode's stand-in for the value line: the field's own placeholder, in the same
   place, size and color the loaded input shows it (`::placeholder` above), breathing while the
   guard decides. Same 44px as the native input, so the swap moves nothing. */
.cc_ikas_email_verification .ma-inp__skel, .cc_ikas_login .ma-inp__skel, .cc_ikas_forgot_password .ma-inp__skel, .cc_ikas_recover_password .ma-inp__skel, .cc_ikas_account_info .ma-inp__skel, .cc_ikas_register .ma-inp__skel, .cc_ikas_account_addresses .ma-inp__skel {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 44px;
  color: var(--ma-text-disabled);
  white-space: nowrap;
  overflow: hidden;
  animation: ma-inp-skel-pulse 1.6s ease-in-out infinite;
}

/* The inert stand-in for `.ma-inp__toggle` — same box and color, no pointer affordance. */
.cc_ikas_email_verification .ma-inp__skel-toggle, .cc_ikas_login .ma-inp__skel-toggle, .cc_ikas_forgot_password .ma-inp__skel-toggle, .cc_ikas_recover_password .ma-inp__skel-toggle, .cc_ikas_account_info .ma-inp__skel-toggle, .cc_ikas_register .ma-inp__skel-toggle, .cc_ikas_account_addresses .ma-inp__skel-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--ma-text-muted);
}

@keyframes ma-inp-skel-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}


.cc_ikas_email_verification .ma-auth, .cc_ikas_login .ma-auth, .cc_ikas_forgot_password .ma-auth, .cc_ikas_recover_password .ma-auth, .cc_ikas_register .ma-auth {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Only when the merchant asks for it: as a section among other sections the
   shell flows at its content height, and forcing the viewport height would
   push whatever sits below it off the first screen. The bar keeps its fixed
   height and the content area flex-grows to fill the remainder. */
.cc_ikas_email_verification .ma-auth--full, .cc_ikas_login .ma-auth--full, .cc_ikas_forgot_password .ma-auth--full, .cc_ikas_recover_password .ma-auth--full, .cc_ikas_register .ma-auth--full {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- top bar ---------- */

.cc_ikas_email_verification .ma-auth__bar, .cc_ikas_login .ma-auth__bar, .cc_ikas_forgot_password .ma-auth__bar, .cc_ikas_recover_password .ma-auth__bar, .cc_ikas_register .ma-auth__bar {
  height: 72px;
  flex-shrink: 0;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ma-border);
  box-sizing: border-box;
}

.cc_ikas_email_verification .ma-auth__brand, .cc_ikas_login .ma-auth__brand, .cc_ikas_forgot_password .ma-auth__brand, .cc_ikas_recover_password .ma-auth__brand, .cc_ikas_register .ma-auth__brand {
  user-select: none;
}

.cc_ikas_email_verification .ma-auth__back, .cc_ikas_login .ma-auth__back, .cc_ikas_forgot_password .ma-auth__back, .cc_ikas_recover_password .ma-auth__back, .cc_ikas_register .ma-auth__back {
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  color: var(--ma-text);
}

.cc_ikas_email_verification .ma-auth__back:hover, .cc_ikas_login .ma-auth__back:hover, .cc_ikas_forgot_password .ma-auth__back:hover, .cc_ikas_recover_password .ma-auth__back:hover, .cc_ikas_register .ma-auth__back:hover {
  text-decoration: underline;
}

.cc_ikas_email_verification .ma-auth__back-short, .cc_ikas_login .ma-auth__back-short, .cc_ikas_forgot_password .ma-auth__back-short, .cc_ikas_recover_password .ma-auth__back-short, .cc_ikas_register .ma-auth__back-short {
  display: none;
}

/* ---------- center variant ---------- */

.cc_ikas_email_verification .ma-auth__center, .cc_ikas_login .ma-auth__center, .cc_ikas_forgot_password .ma-auth__center, .cc_ikas_recover_password .ma-auth__center, .cc_ikas_register .ma-auth__center {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  box-sizing: border-box;
}

.cc_ikas_email_verification .ma-auth__card--center, .cc_ikas_login .ma-auth__card--center, .cc_ikas_forgot_password .ma-auth__card--center, .cc_ikas_recover_password .ma-auth__card--center, .cc_ikas_register .ma-auth__card--center {
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-40);
}

/* ---------- split variant: visual left (base) | visual right (modifier) ---------- */

/* The visual comes first in the DOM, so the unmodified grid is the visual-on-the-left layout. */
.cc_ikas_email_verification .ma-auth__split, .cc_ikas_login .ma-auth__split, .cc_ikas_forgot_password .ma-auth__split, .cc_ikas_recover_password .ma-auth__split, .cc_ikas_register .ma-auth__split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 42% 58%;
}

.cc_ikas_email_verification .ma-auth__split--visual-right, .cc_ikas_login .ma-auth__split--visual-right, .cc_ikas_forgot_password .ma-auth__split--visual-right, .cc_ikas_recover_password .ma-auth__split--visual-right, .cc_ikas_register .ma-auth__split--visual-right {
  grid-template-columns: 58% 42%;
}

.cc_ikas_email_verification .ma-auth__split--visual-right .ma-auth__visual, .cc_ikas_login .ma-auth__split--visual-right .ma-auth__visual, .cc_ikas_forgot_password .ma-auth__split--visual-right .ma-auth__visual, .cc_ikas_recover_password .ma-auth__split--visual-right .ma-auth__visual, .cc_ikas_register .ma-auth__split--visual-right .ma-auth__visual {
  order: 2;
}

.cc_ikas_email_verification .ma-auth__visual, .cc_ikas_login .ma-auth__visual, .cc_ikas_forgot_password .ma-auth__visual, .cc_ikas_recover_password .ma-auth__visual, .cc_ikas_register .ma-auth__visual {
  position: relative;
  overflow: hidden;
  background-color: var(--ma-surface-sunken);
}

.cc_ikas_email_verification .ma-auth__visual-img, .cc_ikas_login .ma-auth__visual-img, .cc_ikas_forgot_password .ma-auth__visual-img, .cc_ikas_recover_password .ma-auth__visual-img, .cc_ikas_register .ma-auth__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc_ikas_email_verification .ma-auth__visual--placeholder, .cc_ikas_login .ma-auth__visual--placeholder, .cc_ikas_forgot_password .ma-auth__visual--placeholder, .cc_ikas_recover_password .ma-auth__visual--placeholder, .cc_ikas_register .ma-auth__visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    var(--ma-checker-tile),
    var(--ma-checker-tile) 16px,
    var(--ma-page-bg) 16px,
    var(--ma-page-bg) 32px
  );
}

.cc_ikas_email_verification .ma-auth__overlay, .cc_ikas_login .ma-auth__overlay, .cc_ikas_forgot_password .ma-auth__overlay, .cc_ikas_recover_password .ma-auth__overlay, .cc_ikas_register .ma-auth__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ma-sp-32);
  background: linear-gradient(0deg, var(--ma-visual-scrim), transparent 60%);
  color: var(--ma-on-visual);
}

.cc_ikas_email_verification .ma-auth__overlay-title, .cc_ikas_login .ma-auth__overlay-title, .cc_ikas_forgot_password .ma-auth__overlay-title, .cc_ikas_recover_password .ma-auth__overlay-title, .cc_ikas_register .ma-auth__overlay-title {
  margin: 0 0 4px;
}

.cc_ikas_email_verification .ma-auth__overlay-text, .cc_ikas_login .ma-auth__overlay-text, .cc_ikas_forgot_password .ma-auth__overlay-text, .cc_ikas_recover_password .ma-auth__overlay-text, .cc_ikas_register .ma-auth__overlay-text {
  margin: 0;
  opacity: 0.9;
}

.cc_ikas_email_verification .ma-auth__form-col, .cc_ikas_login .ma-auth__form-col, .cc_ikas_forgot_password .ma-auth__form-col, .cc_ikas_recover_password .ma-auth__form-col, .cc_ikas_register .ma-auth__form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  box-sizing: border-box;
}

.cc_ikas_email_verification .ma-auth__card--split, .cc_ikas_login .ma-auth__card--split, .cc_ikas_forgot_password .ma-auth__card--split, .cc_ikas_recover_password .ma-auth__card--split, .cc_ikas_register .ma-auth__card--split {
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* ---------- mobile: bar shrinks, split stacks ---------- */

@media (max-width: 767px) {
  .cc_ikas_email_verification .ma-auth__bar, .cc_ikas_login .ma-auth__bar, .cc_ikas_forgot_password .ma-auth__bar, .cc_ikas_recover_password .ma-auth__bar, .cc_ikas_register .ma-auth__bar {
    height: 60px;
    padding: 0 20px;
  }

  .cc_ikas_email_verification .ma-auth__back-full, .cc_ikas_login .ma-auth__back-full, .cc_ikas_forgot_password .ma-auth__back-full, .cc_ikas_recover_password .ma-auth__back-full, .cc_ikas_register .ma-auth__back-full {
    display: none;
  }

  .cc_ikas_email_verification .ma-auth__back-short, .cc_ikas_login .ma-auth__back-short, .cc_ikas_forgot_password .ma-auth__back-short, .cc_ikas_recover_password .ma-auth__back-short, .cc_ikas_register .ma-auth__back-short {
    display: inline;
  }

  .cc_ikas_email_verification .ma-auth__center, .cc_ikas_login .ma-auth__center, .cc_ikas_forgot_password .ma-auth__center, .cc_ikas_recover_password .ma-auth__center, .cc_ikas_register .ma-auth__center {
    min-height: 0;
    padding: 48px 24px 64px;
  }

  .cc_ikas_email_verification .ma-auth__card--center, .cc_ikas_login .ma-auth__card--center, .cc_ikas_forgot_password .ma-auth__card--center, .cc_ikas_recover_password .ma-auth__card--center, .cc_ikas_register .ma-auth__card--center {
    width: 100%;
    gap: 36px;
  }

  .cc_ikas_email_verification .ma-auth__split, .cc_ikas_login .ma-auth__split, .cc_ikas_forgot_password .ma-auth__split, .cc_ikas_recover_password .ma-auth__split, .cc_ikas_register .ma-auth__split {
    display: block;
    min-height: 0;
  }

  /* Pinned, unlike the desktop column: full-bleed here means the height follows the width, so this
     is the one panel whose shape does not depend on the visitor's screen — and therefore the one a
     merchant can be given an exact size to upload for (`visualImageMobile`). */
  .cc_ikas_email_verification .ma-auth__visual, .cc_ikas_login .ma-auth__visual, .cc_ikas_forgot_password .ma-auth__visual, .cc_ikas_recover_password .ma-auth__visual, .cc_ikas_register .ma-auth__visual {
    aspect-ratio: 16 / 9;
  }

  /* No mobile image: the panel is dropped rather than filled with a slice of the desktop one.
     Placed after `--placeholder` so it wins on equal specificity, and paired with the image's
     `loading="lazy"`, which is what stops a hidden panel fetching a picture nobody will see. */
  .cc_ikas_email_verification .ma-auth__visual--desktop-only, .cc_ikas_login .ma-auth__visual--desktop-only, .cc_ikas_forgot_password .ma-auth__visual--desktop-only, .cc_ikas_recover_password .ma-auth__visual--desktop-only, .cc_ikas_register .ma-auth__visual--desktop-only {
    display: none;
  }

  .cc_ikas_email_verification .ma-auth__form-col, .cc_ikas_login .ma-auth__form-col, .cc_ikas_forgot_password .ma-auth__form-col, .cc_ikas_recover_password .ma-auth__form-col, .cc_ikas_register .ma-auth__form-col {
    display: block;
    padding: 40px 24px 64px;
  }

  .cc_ikas_email_verification .ma-auth__card--split, .cc_ikas_login .ma-auth__card--split, .cc_ikas_forgot_password .ma-auth__card--split, .cc_ikas_recover_password .ma-auth__card--split, .cc_ikas_register .ma-auth__card--split {
    width: 100%;
    gap: 32px;
  }
}


.cc_ikas_account_orders .ma-btn, .cc_ikas_email_verification .ma-btn, .cc_ikas_login .ma-btn, .cc_ikas_forgot_password .ma-btn, .cc_ikas_recover_password .ma-btn, .cc_ikas_register .ma-btn, .cc_ikas_account_favorites .ma-btn, .cc_ikas_account_addresses .ma-btn, .cc_ikas_account_order_detail .ma-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: var(--ma-sp-16) var(--ma-sp-20);
  border: none;
  border-radius: var(--ma-radius-pill);
  background: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.cc_ikas_account_orders .ma-btn:focus-visible, .cc_ikas_email_verification .ma-btn:focus-visible, .cc_ikas_login .ma-btn:focus-visible, .cc_ikas_forgot_password .ma-btn:focus-visible, .cc_ikas_recover_password .ma-btn:focus-visible, .cc_ikas_register .ma-btn:focus-visible, .cc_ikas_account_favorites .ma-btn:focus-visible, .cc_ikas_account_addresses .ma-btn:focus-visible, .cc_ikas_account_order_detail .ma-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ma-focus-ring);
}

.cc_ikas_account_orders .ma-btn--auto, .cc_ikas_email_verification .ma-btn--auto, .cc_ikas_login .ma-btn--auto, .cc_ikas_forgot_password .ma-btn--auto, .cc_ikas_recover_password .ma-btn--auto, .cc_ikas_register .ma-btn--auto, .cc_ikas_account_favorites .ma-btn--auto, .cc_ikas_account_addresses .ma-btn--auto, .cc_ikas_account_order_detail .ma-btn--auto {
  width: auto;
  min-width: 120px;
}

.cc_ikas_account_orders .ma-btn--primary, .cc_ikas_email_verification .ma-btn--primary, .cc_ikas_login .ma-btn--primary, .cc_ikas_forgot_password .ma-btn--primary, .cc_ikas_recover_password .ma-btn--primary, .cc_ikas_register .ma-btn--primary, .cc_ikas_account_favorites .ma-btn--primary, .cc_ikas_account_addresses .ma-btn--primary, .cc_ikas_account_order_detail .ma-btn--primary {
  height: 44px;
  padding: 0 var(--ma-sp-20);
  background: var(--ma-primary);
  color: var(--ma-primary-contrast);
}

.cc_ikas_account_orders .ma-btn--primary:hover, .cc_ikas_email_verification .ma-btn--primary:hover, .cc_ikas_login .ma-btn--primary:hover, .cc_ikas_forgot_password .ma-btn--primary:hover, .cc_ikas_recover_password .ma-btn--primary:hover, .cc_ikas_register .ma-btn--primary:hover, .cc_ikas_account_favorites .ma-btn--primary:hover, .cc_ikas_account_addresses .ma-btn--primary:hover, .cc_ikas_account_order_detail .ma-btn--primary:hover {
  background: var(--ma-primary-hover);
}

.cc_ikas_account_orders .ma-btn--outline, .cc_ikas_email_verification .ma-btn--outline, .cc_ikas_login .ma-btn--outline, .cc_ikas_forgot_password .ma-btn--outline, .cc_ikas_recover_password .ma-btn--outline, .cc_ikas_register .ma-btn--outline, .cc_ikas_account_favorites .ma-btn--outline, .cc_ikas_account_addresses .ma-btn--outline, .cc_ikas_account_order_detail .ma-btn--outline {
  height: 44px;
  padding: 0 var(--ma-sp-20);
  background: transparent;
  color: var(--ma-text);
  border: 1px solid var(--ma-text);
}

.cc_ikas_account_orders .ma-btn--outline:hover, .cc_ikas_email_verification .ma-btn--outline:hover, .cc_ikas_login .ma-btn--outline:hover, .cc_ikas_forgot_password .ma-btn--outline:hover, .cc_ikas_recover_password .ma-btn--outline:hover, .cc_ikas_register .ma-btn--outline:hover, .cc_ikas_account_favorites .ma-btn--outline:hover, .cc_ikas_account_addresses .ma-btn--outline:hover, .cc_ikas_account_order_detail .ma-btn--outline:hover {
  background: var(--ma-surface-sunken);
}

.cc_ikas_account_orders .ma-btn--danger, .cc_ikas_email_verification .ma-btn--danger, .cc_ikas_login .ma-btn--danger, .cc_ikas_forgot_password .ma-btn--danger, .cc_ikas_recover_password .ma-btn--danger, .cc_ikas_register .ma-btn--danger, .cc_ikas_account_favorites .ma-btn--danger, .cc_ikas_account_addresses .ma-btn--danger, .cc_ikas_account_order_detail .ma-btn--danger {
  height: 44px;
  padding: 0 var(--ma-sp-20);
  background: var(--ma-surface);
  color: var(--ma-danger);
  border: 1px solid var(--ma-notice-danger-border);
}

.cc_ikas_account_orders .ma-btn--danger:hover, .cc_ikas_email_verification .ma-btn--danger:hover, .cc_ikas_login .ma-btn--danger:hover, .cc_ikas_forgot_password .ma-btn--danger:hover, .cc_ikas_recover_password .ma-btn--danger:hover, .cc_ikas_register .ma-btn--danger:hover, .cc_ikas_account_favorites .ma-btn--danger:hover, .cc_ikas_account_addresses .ma-btn--danger:hover, .cc_ikas_account_order_detail .ma-btn--danger:hover {
  background: var(--ma-notice-danger-bg);
}

.cc_ikas_account_orders .ma-btn--ghost, .cc_ikas_email_verification .ma-btn--ghost, .cc_ikas_login .ma-btn--ghost, .cc_ikas_forgot_password .ma-btn--ghost, .cc_ikas_recover_password .ma-btn--ghost, .cc_ikas_register .ma-btn--ghost, .cc_ikas_account_favorites .ma-btn--ghost, .cc_ikas_account_addresses .ma-btn--ghost, .cc_ikas_account_order_detail .ma-btn--ghost {
  background: none;
  color: var(--ma-text-secondary);
  padding: var(--ma-sp-8) var(--ma-sp-12);
  width: auto;
}

.cc_ikas_account_orders .ma-btn--ghost:hover, .cc_ikas_email_verification .ma-btn--ghost:hover, .cc_ikas_login .ma-btn--ghost:hover, .cc_ikas_forgot_password .ma-btn--ghost:hover, .cc_ikas_recover_password .ma-btn--ghost:hover, .cc_ikas_register .ma-btn--ghost:hover, .cc_ikas_account_favorites .ma-btn--ghost:hover, .cc_ikas_account_addresses .ma-btn--ghost:hover, .cc_ikas_account_order_detail .ma-btn--ghost:hover {
  color: var(--ma-text);
}

.cc_ikas_account_orders .ma-btn[disabled], .cc_ikas_email_verification .ma-btn[disabled], .cc_ikas_login .ma-btn[disabled], .cc_ikas_forgot_password .ma-btn[disabled], .cc_ikas_recover_password .ma-btn[disabled], .cc_ikas_register .ma-btn[disabled], .cc_ikas_account_favorites .ma-btn[disabled], .cc_ikas_account_addresses .ma-btn[disabled], .cc_ikas_account_order_detail .ma-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cc_ikas_account_orders .ma-btn__ic, .cc_ikas_email_verification .ma-btn__ic, .cc_ikas_login .ma-btn__ic, .cc_ikas_forgot_password .ma-btn__ic, .cc_ikas_recover_password .ma-btn__ic, .cc_ikas_register .ma-btn__ic, .cc_ikas_account_favorites .ma-btn__ic, .cc_ikas_account_addresses .ma-btn__ic, .cc_ikas_account_order_detail .ma-btn__ic {
  display: flex;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .cc_ikas_account_orders .ma-btn--auto, .cc_ikas_email_verification .ma-btn--auto, .cc_ikas_login .ma-btn--auto, .cc_ikas_forgot_password .ma-btn--auto, .cc_ikas_recover_password .ma-btn--auto, .cc_ikas_register .ma-btn--auto, .cc_ikas_account_favorites .ma-btn--auto, .cc_ikas_account_addresses .ma-btn--auto, .cc_ikas_account_order_detail .ma-btn--auto {
    width: 100%;
  }
}

.cc_ikas_account_orders .ma-spinner, .cc_ikas_email_verification .ma-spinner, .cc_ikas_login .ma-spinner, .cc_ikas_forgot_password .ma-spinner, .cc_ikas_recover_password .ma-spinner, .cc_ikas_register .ma-spinner, .cc_ikas_account_favorites .ma-spinner, .cc_ikas_account_addresses .ma-spinner, .cc_ikas_account_order_detail .ma-spinner {
  display: inline-block;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
  animation: ma-spin 0.7s linear infinite;
}

@keyframes ma-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Baseline title→content gap. The global heading reset zeroes all h1-h6
   margins, so this block must carry its own explicit spacing rather than
   relying on default heading margins. Consumers whose SectionHeader already
   sits inside a flex `gap` container (auth pages, ReturnWizard) override this
   back to 0 to avoid doubling that gap — see their styles.css. */
.cc_ikas_account_orders .ma-head, .cc_ikas_email_verification .ma-head, .cc_ikas_login .ma-head, .cc_ikas_forgot_password .ma-head, .cc_ikas_recover_password .ma-head, .cc_ikas_register .ma-head, .cc_ikas_account_favorites .ma-head, .cc_ikas_account_addresses .ma-head, .cc_ikas_account_order_detail .ma-head {
  margin-bottom: var(--ma-sp-32);
}

.cc_ikas_account_orders .ma-head__title, .cc_ikas_email_verification .ma-head__title, .cc_ikas_login .ma-head__title, .cc_ikas_forgot_password .ma-head__title, .cc_ikas_recover_password .ma-head__title, .cc_ikas_register .ma-head__title, .cc_ikas_account_favorites .ma-head__title, .cc_ikas_account_addresses .ma-head__title, .cc_ikas_account_order_detail .ma-head__title {
  margin: 0;
  color: var(--ma-text);
}

.cc_ikas_account_orders .ma-head__sub, .cc_ikas_email_verification .ma-head__sub, .cc_ikas_login .ma-head__sub, .cc_ikas_forgot_password .ma-head__sub, .cc_ikas_recover_password .ma-head__sub, .cc_ikas_register .ma-head__sub, .cc_ikas_account_favorites .ma-head__sub, .cc_ikas_account_addresses .ma-head__sub, .cc_ikas_account_order_detail .ma-head__sub {
  margin: 6px 0 0;
  color: var(--ma-text-secondary);
}


/**
 * Same label-over-underline shell as <Input> (`.ma-inp`, `.ma-inp__k`,
 * `.ma-inp__row` — styled in ../Input/styles.css). This file only styles
 * the select-specific pieces.
 */
.cc_ikas_register .ma-select, .cc_ikas_account_addresses .ma-select {
  cursor: pointer;
}

/* line-height = the row height: unlike an input, an `appearance:none` select top-aligns its text
   inside a fixed-height box (Chrome), so the typography class's 1.5 left "Türkiye" hugging the
   label. Two-class selector so it outranks the single-class typography role. */
.cc_ikas_register .ma-select .ma-select__native, .cc_ikas_account_addresses .ma-select .ma-select__native {
  line-height: 44px;
}

.cc_ikas_register .ma-select__native, .cc_ikas_account_addresses .ma-select__native {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  height: 44px;
  color: var(--ma-text);
  width: 100%;
  cursor: pointer;
}

.cc_ikas_register .ma-select__chev, .cc_ikas_account_addresses .ma-select__chev {
  display: flex;
  flex: 0 0 auto;
  color: var(--ma-text-muted);
  pointer-events: none;
}


/* StatusChip — semantic, brand-neutral status colours (never --ma-primary).
 * Indicator is a small tone-coloured dot; the legacy stroke icon is kept in
 * the DOM (for markup stability) but hidden — the dot now carries the tone. */
.cc_ikas_account_orders .ma-status, .cc_ikas_account_info .ma-status, .cc_ikas_account_order_detail .ma-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cc_ikas_account_orders .ma-status svg, .cc_ikas_account_info .ma-status svg, .cc_ikas_account_order_detail .ma-status svg {
  display: none;
}

.cc_ikas_account_orders .ma-status__dot, .cc_ikas_account_info .ma-status__dot, .cc_ikas_account_order_detail .ma-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* dot tone colours — shared by text + pill variants */
.cc_ikas_account_orders .ma-status--positive .ma-status__dot, .cc_ikas_account_info .ma-status--positive .ma-status__dot, .cc_ikas_account_order_detail .ma-status--positive .ma-status__dot {
  background: var(--ma-status-positive);
}
.cc_ikas_account_orders .ma-status--warning .ma-status__dot, .cc_ikas_account_info .ma-status--warning .ma-status__dot, .cc_ikas_account_order_detail .ma-status--warning .ma-status__dot {
  background: var(--ma-status-progress);
}
.cc_ikas_account_orders .ma-status--negative .ma-status__dot, .cc_ikas_account_info .ma-status--negative .ma-status__dot, .cc_ikas_account_order_detail .ma-status--negative .ma-status__dot {
  background: var(--ma-danger);
}
.cc_ikas_account_orders .ma-status--refund .ma-status__dot, .cc_ikas_account_info .ma-status--refund .ma-status__dot, .cc_ikas_account_order_detail .ma-status--refund .ma-status__dot {
  background: var(--ma-status-refund);
}
.cc_ikas_account_orders .ma-status--neutral .ma-status__dot, .cc_ikas_account_info .ma-status--neutral .ma-status__dot, .cc_ikas_account_order_detail .ma-status--neutral .ma-status__dot {
  background: var(--ma-status-neutral);
}

/* text variant — inline dot + label, uniform text colour (tone lives on the dot) */
.cc_ikas_account_orders .ma-status--text, .cc_ikas_account_info .ma-status--text, .cc_ikas_account_order_detail .ma-status--text {
  color: var(--ma-text);
}

/* pill variant — filled soft background for detail cards, sharp corner, tone-coloured text */
.cc_ikas_account_orders .ma-status--pill, .cc_ikas_account_info .ma-status--pill, .cc_ikas_account_order_detail .ma-status--pill {
  padding: 3px 10px;
  border-radius: var(--ma-radius-pill);
  border: 1px solid transparent;
  background: var(--ma-surface-subtle);
}
.cc_ikas_account_orders .ma-status--pill.ma-status--positive, .cc_ikas_account_info .ma-status--pill.ma-status--positive, .cc_ikas_account_order_detail .ma-status--pill.ma-status--positive {
  color: var(--ma-status-positive);
}
.cc_ikas_account_orders .ma-status--pill.ma-status--warning, .cc_ikas_account_info .ma-status--pill.ma-status--warning, .cc_ikas_account_order_detail .ma-status--pill.ma-status--warning {
  color: var(--ma-status-progress);
}
.cc_ikas_account_orders .ma-status--pill.ma-status--negative, .cc_ikas_account_info .ma-status--pill.ma-status--negative, .cc_ikas_account_order_detail .ma-status--pill.ma-status--negative {
  color: var(--ma-danger);
}
.cc_ikas_account_orders .ma-status--pill.ma-status--refund, .cc_ikas_account_info .ma-status--pill.ma-status--refund, .cc_ikas_account_order_detail .ma-status--pill.ma-status--refund {
  color: var(--ma-status-refund);
}
.cc_ikas_account_orders .ma-status--pill.ma-status--neutral, .cc_ikas_account_info .ma-status--pill.ma-status--neutral, .cc_ikas_account_order_detail .ma-status--pill.ma-status--neutral {
  color: var(--ma-status-neutral);
}


.cc_ikas_account_orders .ma-skel, .cc_ikas_email_verification .ma-skel, .cc_ikas_login .ma-skel, .cc_ikas_forgot_password .ma-skel, .cc_ikas_recover_password .ma-skel, .cc_ikas_account_info .ma-skel, .cc_ikas_register .ma-skel, .cc_ikas_account_favorites .ma-skel, .cc_ikas_account_addresses .ma-skel, .cc_ikas_account_order_detail .ma-skel {
  display: block;
  background: linear-gradient(
    90deg,
    var(--ma-surface-sunken) 25%,
    var(--ma-skeleton-sheen) 37%,
    var(--ma-surface-sunken) 63%
  );
  background-size: 400% 100%;
  animation: ma-skel-wave 1.4s ease infinite;
  border-radius: var(--ma-radius-sm);
}

/* Text-height bar (the `text` prop): inline-block, 1em tall, inside a wrapper that carries the
   REAL text's typography class — the wrapper's own line box then sets the row height.

   `text-bottom`, NOT `baseline`: a baseline-aligned 1em box needs a full em ABOVE the baseline,
   which is more than a font's ascent — on tight line-heights (display: 34px/1.15) that grew the
   line box ~5px past the real text's, so the page visibly shifted up when the data arrived.
   Text-bottom keeps the bar inside the strut's own content area, and the skeleton line measures
   exactly what the loaded line will. */
.cc_ikas_account_orders .ma-skel--text, .cc_ikas_email_verification .ma-skel--text, .cc_ikas_login .ma-skel--text, .cc_ikas_forgot_password .ma-skel--text, .cc_ikas_recover_password .ma-skel--text, .cc_ikas_account_info .ma-skel--text, .cc_ikas_register .ma-skel--text, .cc_ikas_account_favorites .ma-skel--text, .cc_ikas_account_addresses .ma-skel--text, .cc_ikas_account_order_detail .ma-skel--text {
  display: inline-block;
  vertical-align: text-bottom;
}

@keyframes ma-skel-wave {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.cc_ikas_account_orders .ma-brand, .cc_ikas_email_verification .ma-brand, .cc_ikas_login .ma-brand, .cc_ikas_forgot_password .ma-brand, .cc_ikas_recover_password .ma-brand, .cc_ikas_account_info .ma-brand, .cc_ikas_register .ma-brand, .cc_ikas_account_favorites .ma-brand, .cc_ikas_account_addresses .ma-brand, .cc_ikas_account_order_detail .ma-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ma-text);
}

.cc_ikas_account_orders .ma-brand__img, .cc_ikas_email_verification .ma-brand__img, .cc_ikas_login .ma-brand__img, .cc_ikas_forgot_password .ma-brand__img, .cc_ikas_recover_password .ma-brand__img, .cc_ikas_account_info .ma-brand__img, .cc_ikas_register .ma-brand__img, .cc_ikas_account_favorites .ma-brand__img, .cc_ikas_account_addresses .ma-brand__img, .cc_ikas_account_order_detail .ma-brand__img {
  display: block;
  max-height: 32px;
  width: auto;
}


.cc_ikas_account_orders .ma-alert, .cc_ikas_email_verification .ma-alert, .cc_ikas_login .ma-alert, .cc_ikas_forgot_password .ma-alert, .cc_ikas_recover_password .ma-alert, .cc_ikas_register .ma-alert, .cc_ikas_account_addresses .ma-alert, .cc_ikas_account_order_detail .ma-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--ma-radius);
}

.cc_ikas_account_orders .ma-alert__ic, .cc_ikas_email_verification .ma-alert__ic, .cc_ikas_login .ma-alert__ic, .cc_ikas_forgot_password .ma-alert__ic, .cc_ikas_recover_password .ma-alert__ic, .cc_ikas_register .ma-alert__ic, .cc_ikas_account_addresses .ma-alert__ic, .cc_ikas_account_order_detail .ma-alert__ic {
  display: flex;
  flex: 0 0 auto;
  margin-top: 1px;
}

.cc_ikas_account_orders .ma-alert__body, .cc_ikas_email_verification .ma-alert__body, .cc_ikas_login .ma-alert__body, .cc_ikas_forgot_password .ma-alert__body, .cc_ikas_recover_password .ma-alert__body, .cc_ikas_register .ma-alert__body, .cc_ikas_account_addresses .ma-alert__body, .cc_ikas_account_order_detail .ma-alert__body {
  min-width: 0;
}

.cc_ikas_account_orders .ma-alert--success, .cc_ikas_email_verification .ma-alert--success, .cc_ikas_login .ma-alert--success, .cc_ikas_forgot_password .ma-alert--success, .cc_ikas_recover_password .ma-alert--success, .cc_ikas_register .ma-alert--success, .cc_ikas_account_addresses .ma-alert--success, .cc_ikas_account_order_detail .ma-alert--success {
  background: var(--ma-notice-positive-bg);
  border: 1px solid var(--ma-notice-positive-border);
  color: var(--ma-notice-positive-text);
}

.cc_ikas_account_orders .ma-alert--error, .cc_ikas_email_verification .ma-alert--error, .cc_ikas_login .ma-alert--error, .cc_ikas_forgot_password .ma-alert--error, .cc_ikas_recover_password .ma-alert--error, .cc_ikas_register .ma-alert--error, .cc_ikas_account_addresses .ma-alert--error, .cc_ikas_account_order_detail .ma-alert--error {
  background: var(--ma-notice-danger-bg);
  border: 1px solid var(--ma-notice-danger-border);
  color: var(--ma-notice-danger-text);
}

.cc_ikas_account_orders .ma-alert--warning, .cc_ikas_email_verification .ma-alert--warning, .cc_ikas_login .ma-alert--warning, .cc_ikas_forgot_password .ma-alert--warning, .cc_ikas_recover_password .ma-alert--warning, .cc_ikas_register .ma-alert--warning, .cc_ikas_account_addresses .ma-alert--warning, .cc_ikas_account_order_detail .ma-alert--warning {
  background: var(--ma-notice-progress-bg);
  border: 1px solid var(--ma-notice-progress-border);
  color: var(--ma-notice-progress-text);
}

.cc_ikas_account_orders .ma-alert--info, .cc_ikas_email_verification .ma-alert--info, .cc_ikas_login .ma-alert--info, .cc_ikas_forgot_password .ma-alert--info, .cc_ikas_recover_password .ma-alert--info, .cc_ikas_register .ma-alert--info, .cc_ikas_account_addresses .ma-alert--info, .cc_ikas_account_order_detail .ma-alert--info {
  background: var(--ma-notice-info-bg);
  border: 1px solid var(--ma-notice-info-border);
  color: var(--ma-notice-info-text);
}


/* One row that shares the width, stacking on a phone where two buttons side by side would each be
   too narrow for their label. Selectors stay one per rule: component-cli 2.3.0 scopes only the last
   selector of a multi-line list. */
.cc_ikas_login .ma-social, .cc_ikas_forgot_password .ma-social, .cc_ikas_recover_password .ma-social, .cc_ikas_register .ma-social {
  display: flex;
  gap: var(--ma-sp-12);
}

.cc_ikas_login .ma-social .ma-btn, .cc_ikas_forgot_password .ma-social .ma-btn, .cc_ikas_recover_password .ma-social .ma-btn, .cc_ikas_register .ma-social .ma-btn {
  flex: 1 1 0;
}

.cc_ikas_login .ma-social .ma-btn--outline, .cc_ikas_forgot_password .ma-social .ma-btn--outline, .cc_ikas_recover_password .ma-social .ma-btn--outline, .cc_ikas_register .ma-social .ma-btn--outline {
  border-color: var(--ma-border-input);
}

@media (max-width: 767px) {
  .cc_ikas_login .ma-social, .cc_ikas_forgot_password .ma-social, .cc_ikas_recover_password .ma-social, .cc_ikas_register .ma-social {
    flex-direction: column;
  }

  /* `flex-basis: 0` above sizes the main axis, which is the height once the row stacks — it beats
     the button's own `height: 44px` and collapses it onto its label. The row-sharing rule only ever
     meant width, so it goes away with the row. */
  .cc_ikas_login .ma-social .ma-btn, .cc_ikas_forgot_password .ma-social .ma-btn, .cc_ikas_recover_password .ma-social .ma-btn, .cc_ikas_register .ma-social .ma-btn {
    flex: none;
  }
}

/* Intentionally no rules. The pending form's layout is the PAGE's — see `formClass` — and its
   buttons are styled exactly as they will look loaded: not `disabled`, not faded, just no-ops
   until the guard resolves (see the component header). The only "waiting" visual is the inputs'
   pulsing placeholder, which lives in Input's own skeleton mode. The `.ma-authskel` class stays
   on the root as the marker `mount-check` keys its "still pending" assertion on. */


/* PhoneInput renders through <Input> — all visuals come from
   sub-components/Input/styles.css; no additional rules needed. */

.cc_ikas_login .login {
  width: 100%;
}

.cc_ikas_login .login-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Every SectionHeader on this page already sits inside a flex container that
   applies an explicit `gap` (.ma-auth__card--center/--split, .login-form) —
   zero SectionHeader's baseline margin-bottom so the two spacing rules don't
   stack into a double gap. */
.cc_ikas_login .login .ma-head {
  margin-bottom: 0;
}

.cc_ikas_login .login-form {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-40);
}

.cc_ikas_login .login-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cc_ikas_login .login-pwd-field {
  position: relative;
}

.cc_ikas_login .login-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ma-primary);
  cursor: pointer;
}

.cc_ikas_login .login-link:hover {
  text-decoration: underline;
}

.cc_ikas_login .login-link[disabled] {
  color: var(--ma-text-disabled);
  cursor: default;
  text-decoration: none;
}

.cc_ikas_login .login-link--forgot {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_login .login-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_login .login-footline {
  margin: 0;
  color: var(--ma-text-secondary);
  border-top: 1px solid var(--ma-border);
  padding-top: 24px;
}

.cc_ikas_login .login-link--footline {
  color: var(--ma-primary);
}

.cc_ikas_forgot_password .forgot-password {
  width: 100%;
}

.cc_ikas_forgot_password .forgot-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Every SectionHeader on this page already sits inside a flex container that
   applies an explicit `gap` (.ma-auth__card--center/--split, .forgot-success)
   — zero SectionHeader's baseline margin-bottom so the two spacing rules
   don't stack into a double gap. */
.cc_ikas_forgot_password .forgot-password .ma-head {
  margin-bottom: 0;
}

.cc_ikas_forgot_password .forgot-form {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-40);
}

.cc_ikas_forgot_password .forgot-field-error {
  margin: 8px 0 0;
  color: var(--ma-danger);
}

.cc_ikas_forgot_password .forgot-success {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_forgot_password .forgot-success-info {
  margin: 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_forgot_password .forgot-footline {
  margin: 0;
  text-align: center;
  color: var(--ma-text-secondary);
  border-top: 1px solid var(--ma-border);
  padding-top: 24px;
}

.cc_ikas_forgot_password .forgot-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ma-primary);
  /* Underlined at rest — primary matches the text colour, see login-link. */
  text-decoration: underline;
  cursor: pointer;
}

.cc_ikas_recover_password .recover {
  width: 100%;
}

.cc_ikas_recover_password .recover-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Every SectionHeader on this page already sits inside a flex container that
   applies an explicit `gap` (.ma-auth__card--center/--split, .recover-success)
   — zero SectionHeader's baseline margin-bottom so the two spacing rules
   don't stack into a double gap. */
.cc_ikas_recover_password .recover .ma-head {
  margin-bottom: 0;
}

.cc_ikas_recover_password .recover-form {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-40);
}

.cc_ikas_recover_password .recover-fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cc_ikas_recover_password .recover-hint {
  margin: 8px 0 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_recover_password .recover-footline {
  margin: 0;
  text-align: center;
  color: var(--ma-text-secondary);
  border-top: 1px solid var(--ma-border);
  padding-top: 24px;
}

.cc_ikas_recover_password .recover-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ma-primary);
  /* Underlined at rest — primary matches the text colour, see login-link. */
  text-decoration: underline;
  cursor: pointer;
}

.cc_ikas_recover_password .recover-success {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

/* invalid/expired-token recovery affordance (§7.2) */
.cc_ikas_recover_password .recover .recover-failed-help {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-12);
  align-items: flex-start;
}
.cc_ikas_recover_password .recover .recover-failed-help__text {
  margin: 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_account_info .account {
  width: 100%;
  /* Section root starts `visibility:hidden` (inline, avoids a flash of
     unstyled content) — this rule restores it once the stylesheet loads. */
  visibility: visible !important;
}

/* ===== header ===== */
.cc_ikas_account_info .acct-ov {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-32);
}

.cc_ikas_account_info .acct-ov__head {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
}

.cc_ikas_account_info .acct-ov__title {
  margin: 0;
  color: var(--ma-text);
}

/* ===== stat cards ===== */
.cc_ikas_account_info .acct-ov__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ma-sp-24);
}

.cc_ikas_account_info .acct-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-md);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition:
    background 0.12s,
    border-color 0.12s;
}

.cc_ikas_account_info .acct-stat:hover {
  background: var(--ma-surface-subtle);
  border-color: var(--ma-border-strong);
}

.cc_ikas_account_info .acct-stat:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

.cc_ikas_account_info .acct-stat__label {
  color: var(--ma-text-secondary);
}

.cc_ikas_account_info .acct-stat__num {
  color: var(--ma-text);
}

.cc_ikas_account_info .acct-stat__sub {
  color: var(--ma-text-muted);
}

/* ===== "Son Siparişim" ===== */
.cc_ikas_account_info .acct-lo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ma-sp-16);
}

.cc_ikas_account_info .acct-lo-head__title {
  margin: 0;
  color: var(--ma-text);
}

.cc_ikas_account_info .acct-lo-head__all {
  color: var(--ma-primary);
  text-decoration: underline;
  white-space: nowrap;
}

.cc_ikas_account_info .acct-lo-head__all:hover {
  color: var(--ma-primary-hover);
}

.cc_ikas_account_info .acct-lo {
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition:
    background 0.12s,
    border-color 0.12s;
}

.cc_ikas_account_info .acct-lo:hover {
  background: var(--ma-surface-subtle);
  border-color: var(--ma-border-strong);
}

.cc_ikas_account_info .acct-lo:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

.cc_ikas_account_info .acct-lo__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  background: var(--ma-surface-sunken);
  color: var(--ma-text-disabled);
  overflow: hidden;
}

.cc_ikas_account_info .acct-lo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc_ikas_account_info .acct-lo__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc_ikas_account_info .acct-lo__no {
  color: var(--ma-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_ikas_account_info .acct-lo__date {
  color: var(--ma-text-secondary);
}

.cc_ikas_account_info .acct-lo__total {
  flex: 0 0 auto;
  color: var(--ma-text);
}

.cc_ikas_account_info .acct-lo__chev {
  flex: 0 0 auto;
  display: flex;
  color: var(--ma-text-muted);
}

.cc_ikas_account_info .acct-lo-empty {
  margin: 0;
  padding: var(--ma-sp-32) var(--ma-sp-16);
  text-align: center;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  color: var(--ma-text-secondary);
}

/* ===== "Hesap Bilgileri" trigger (opens SettingsModal) ===== */
.cc_ikas_account_info .acct-settings {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-16);
  width: 100%;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  padding: 28px;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}

.cc_ikas_account_info .acct-settings:hover {
  background: var(--ma-surface-subtle);
  border-color: var(--ma-border-strong);
}

.cc_ikas_account_info .acct-settings:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

.cc_ikas_account_info .acct-settings__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ma-text);
}

.cc_ikas_account_info .acct-settings__chev {
  flex: 0 0 auto;
  display: flex;
  color: var(--ma-text-muted);
}

/* ===== skeleton ===== */
.cc_ikas_account_info .acct-lo--skel {
  cursor: default;
}

/* ===== mobile ===== */
@media (max-width: 767px) {
  .cc_ikas_account_info .acct-ov__stats {
    grid-template-columns: 1fr 1fr;
  }

  .cc_ikas_account_info .acct-lo, .cc_ikas_account_info .acct-settings {
    gap: var(--ma-sp-16);
    padding: var(--ma-sp-20);
  }

  .cc_ikas_account_info .acct-lo__total {
    display: none;
  }
}

.cc_ikas_account_info .ma-sm__backdrop {
  position: fixed;
  inset: 0;
  background: var(--ma-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ma-sp-24);
  z-index: 1000;
}

.cc_ikas_account_info .ma-sm__panel {
  background: var(--ma-surface);
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 32px;
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-xl);
}

/* Theme resets strip heading margins (see SectionHeader) — the h2 stays
   margin-free and the form below carries the gap, out of the reset's reach. */
.cc_ikas_account_info .ma-sm__title {
  margin: 0;
  color: var(--ma-text);
}

.cc_ikas_account_info .ma-sm__form {
  margin-top: var(--ma-sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-24);
}

.cc_ikas_account_info .ma-sm__status, .cc_ikas_account_info .ma-sm__error {
  margin: 0;
  padding: var(--ma-sp-12) var(--ma-sp-16);
}

.cc_ikas_account_info .ma-sm__status {
  background: var(--ma-notice-positive-bg);
  color: var(--ma-notice-positive-text);
}

.cc_ikas_account_info .ma-sm__error {
  background: var(--ma-notice-danger-bg);
  color: var(--ma-notice-danger-text);
}

.cc_ikas_account_info .ma-sm__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ma-sp-24);
}

.cc_ikas_account_info .ma-sm__marketing {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_account_info .ma-sm__mhead {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-4);
}

.cc_ikas_account_info .ma-sm__mtitle {
  margin: 0;
  color: var(--ma-text);
}

.cc_ikas_account_info .ma-sm__mlead {
  margin: 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_account_info .ma-sm__mlist {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_account_info .ma-sm__mlegal {
  margin: 0;
  color: var(--ma-text-muted);
}

.cc_ikas_account_info .ma-sm__mrow {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-12);
}

.cc_ikas_account_info .ma-sm__mic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ma-text-secondary);
}

.cc_ikas_account_info .ma-sm__mtxt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.cc_ikas_account_info .ma-sm__mt {
  color: var(--ma-text);
}

.cc_ikas_account_info .ma-sm__md {
  color: var(--ma-text-muted);
}

.cc_ikas_account_info .ma-sm__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ma-sp-16);
  padding-top: var(--ma-sp-8);
}

.cc_ikas_account_info .ma-sm__cancel {
  height: 44px;
  padding: 0 var(--ma-sp-16);
  border: 0;
  background: transparent;
  color: var(--ma-text-secondary);
  cursor: pointer;
}

.cc_ikas_account_info .ma-sm__cancel:hover {
  color: var(--ma-text);
}

.cc_ikas_account_info .ma-sm__save {
  height: 44px;
  padding: 0 var(--ma-sp-32);
  border: 0;
  border-radius: var(--ma-radius-pill);
  background: var(--ma-text);
  color: var(--ma-surface);
  cursor: pointer;
}

.cc_ikas_account_info .ma-sm__save:disabled {
  background: var(--ma-text-disabled);
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .cc_ikas_account_info .ma-sm__row2 {
    grid-template-columns: 1fr;
  }
}

.cc_ikas_account_info .ma-toggle {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 24px;
  flex: 0 0 auto;
  cursor: pointer;
}

.cc_ikas_account_info .ma-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cc_ikas_account_info .ma-toggle__native {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.cc_ikas_account_info .ma-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--ma-border-strong);
  border-radius: var(--ma-radius-pill);
  transition: background 0.16s ease;
}

.cc_ikas_account_info .ma-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--ma-radius-pill);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-md);
  transition: transform 0.18s ease;
}

.cc_ikas_account_info .ma-toggle__native:checked + .ma-toggle__track {
  background: var(--ma-primary);
}

.cc_ikas_account_info .ma-toggle__native:checked + .ma-toggle__track::after {
  transform: translateX(16px);
}

.cc_ikas_account_info .ma-toggle__native:focus-visible + .ma-toggle__track {
  box-shadow: 0 0 0 3px var(--ma-focus-ring);
}

.cc_ikas_register .register {
  width: 100%;
}

.cc_ikas_register .register-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Every SectionHeader on this page already sits inside a flex container that
   applies an explicit `gap` (.ma-auth__card--center/--split, .register-form)
   — zero SectionHeader's baseline margin-bottom so the two spacing rules
   don't stack into a double gap. */
.cc_ikas_register .register .ma-head {
  margin-bottom: 0;
}

.cc_ikas_register .register-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cc_ikas_register .register-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cc_ikas_register .register-namerow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cc_ikas_register .register-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ma-primary);
  /* Underlined at rest — primary matches the text colour, see login-link. */
  text-decoration: underline;
  cursor: pointer;
}

.cc_ikas_register .register-link[disabled] {
  color: var(--ma-text-disabled);
  cursor: default;
  text-decoration: none;
}

.cc_ikas_register .register-link--footline {
  color: var(--ma-primary);
}

.cc_ikas_register .register-field-error {
  margin: 8px 0 0;
  color: var(--ma-danger);
}

/* password strength — visual only, monochrome (matches editorial palette) */
.cc_ikas_register .register-pwd-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc_ikas_register .register-pwd-strength {
  display: flex;
  gap: 4px;
}

.cc_ikas_register .register-pwd-strength__seg {
  flex: 1;
  height: 3px;
  border-radius: var(--ma-radius-xs);
  background: var(--ma-border-input);
  transition: background-color 0.15s ease;
}

.cc_ikas_register .register-pwd-strength__seg--filled {
  background: var(--ma-text);
}

/* §7 dynamic customer attributes */
.cc_ikas_register .register-attr {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
}

.cc_ikas_register .register-attr__label {
  color: var(--ma-text);
}

.cc_ikas_register .register-attr__options {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
}

.cc_ikas_register .register-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_register .register-footline {
  margin: 0;
  color: var(--ma-text-secondary);
  border-top: 1px solid var(--ma-border);
  padding-top: 24px;
}

/* email-verification "check your email" surface (§7.2 register) */
.cc_ikas_register .register .register-verify {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_account_favorites .favorites-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ma-sp-20);
}

@media (min-width: 768px) {
  .cc_ikas_account_favorites .favorites-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}

/* loading skeleton card (mirrors FavoriteCard geometry → CLS-safe) */
.cc_ikas_account_favorites .favorites-skel {
  display: flex;
  flex-direction: column;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-md); /* FavoriteCard ile aynı kap yuvarlaklığı */
  overflow: hidden;
}

.cc_ikas_account_favorites .favorites-skel__img {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 0; /* kart kenarına yaslı; köşeleri kabın overflow kırpması yuvarlar */
}

.cc_ikas_account_favorites .favorites-skel__body {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
  padding: var(--ma-sp-12);
}

.cc_ikas_account_favorites .fav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-md);
  /* The body's bottom corners; the media rounds its own top ones (see below). */
  overflow: hidden;
  transition: border-color 0.15s;
}

.cc_ikas_account_favorites .fav-card:hover {
  border-color: var(--ma-border-strong);
}

.cc_ikas_account_favorites .fav-card__media-wrap {
  position: relative;
}

.cc_ikas_account_favorites .fav-card__media {
  all: unset;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  box-sizing: border-box;
  /* Only the divider under the image. A full box here ran a second 1px line right alongside the
     card's own border down both sides, and cut straight across its rounded top corners — which is
     what made the photo look like it was sitting on top of the card rather than inside it. */
  border-bottom: 1px solid var(--ma-border);
  /* Minus the card's 1px border: this is the INNER curve, and matching the outer one exactly would
     leave a sliver of border showing through at each corner. `all: unset` also puts overflow back
     to visible, so the <img> needs clipping said again here or it squares the corners off. */
  border-top-left-radius: calc(var(--ma-radius-md) - 1px);
  border-top-right-radius: calc(var(--ma-radius-md) - 1px);
  overflow: hidden;
  background: var(--ma-surface-subtle);
}

.cc_ikas_account_favorites .fav-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* checkerboard placeholder tone — no product image available */
.cc_ikas_account_favorites .fav-card__img--empty {
  background-color: var(--ma-surface-subtle);
  background-image: linear-gradient(45deg, var(--ma-checker-tile) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ma-checker-tile) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ma-checker-tile) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ma-checker-tile) 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
}

.cc_ikas_account_favorites .fav-card__oos {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-pill);
  color: var(--ma-text-secondary);
}

.cc_ikas_account_favorites .fav-card__remove {
  all: unset;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-text);
  font-size: 14px;
  border-radius: var(--ma-radius-sm);
  cursor: pointer;
  box-sizing: border-box;
}

.cc_ikas_account_favorites .fav-card__remove:hover {
  background: var(--ma-surface-sunken);
}

.cc_ikas_account_favorites .fav-card__remove:disabled {
  cursor: default;
  opacity: 0.7;
}

.cc_ikas_account_favorites .fav-card__remove svg {
  width: 18px;
  height: 18px;
}

.cc_ikas_account_favorites .fav-card__body {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-6);
  padding: var(--ma-sp-12);
  cursor: pointer;
  box-sizing: border-box;
}

.cc_ikas_account_favorites .fav-card__name {
  color: var(--ma-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--ma-lh-sm) * 2);
}

.cc_ikas_account_favorites .fav-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--ma-sp-8);
  flex-wrap: wrap;
}

.cc_ikas_account_favorites .fav-card__now {
  color: var(--ma-text);
}

.cc_ikas_account_favorites .fav-card__old {
  color: var(--ma-text-secondary);
  text-decoration: line-through;
}

.cc_ikas_account_favorites .fav-card__action {
  margin: 0 var(--ma-sp-12) var(--ma-sp-12);
}

/* Tighter padding for the card context; hover fills solid instead of the
   generic outline surface-tint hover. */
.cc_ikas_account_favorites .fav-card__action .ma-btn {
  padding: 0 var(--ma-sp-16);
}

.cc_ikas_account_favorites .fav-card__action .ma-btn--outline {
  border-color: var(--ma-primary);
}

.cc_ikas_account_favorites .fav-card__action .ma-btn--outline:hover {
  background: var(--ma-primary);
  color: var(--ma-primary-contrast);
}

/* Passive "Gelince Haber Ver" — visually inert, no hover/interaction state */
.cc_ikas_account_favorites .fav-card__notify {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Grows rather than clips: this label is a merchant prop and its default already wraps to two
     lines in a card-width pill. `min-height` keeps it level with the live button it replaces
     whenever the text does fit on one line. */
  min-height: 44px;
  padding: var(--ma-sp-8) var(--ma-sp-12);
  border: 1px solid var(--ma-border-input);
  border-radius: var(--ma-radius-pill);
  color: var(--ma-text-disabled);
  text-align: center;
  cursor: default;
  box-sizing: border-box;
}

/* Inline failure notice for the back-in-stock reminder (§7.9 error tone). There is no success
   counterpart: the button itself becomes the confirmation and stays there. */
.cc_ikas_account_favorites .fav-card__feedback {
  margin: 0 0 var(--ma-sp-8);
  text-align: center;
}
.cc_ikas_account_favorites .fav-card__feedback--error {
  color: var(--ma-danger);
}

.cc_ikas_account_addresses .addresses {
  width: 100%;
}

/* The account content column is plain block flow and .ma-alert carries no margin of its own — the
   auth forms that use it sit in flex `gap` containers. So the notice above the list has to bring
   its own gap, here matching the grid's. */
.cc_ikas_account_addresses .addr-alert {
  margin-bottom: var(--ma-sp-24);
}

/* ===== address grid — first cell is the dashed "add" card ===== */
.cc_ikas_account_addresses .addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 767px) {
  .cc_ikas_account_addresses .addr-grid {
    grid-template-columns: 1fr;
  }
}

/* add-new address card (dashed, opens the create form — a button, not a link) */
.cc_ikas_account_addresses .addr-add {
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  width: 100%;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--ma-border-dashed);
  border-radius: var(--ma-radius-md);
  background: var(--ma-surface);
  color: var(--ma-text-secondary);
  font-family: inherit;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.cc_ikas_account_addresses .addr-add:hover {
  background: var(--ma-surface-subtle);
  border-color: var(--ma-border-strong);
  color: var(--ma-text);
}

.cc_ikas_account_addresses .addr-add__label {
}

.cc_ikas_account_addresses .addr-add--skel {
  cursor: default;
}

.cc_ikas_account_addresses .addr-add--skel:hover {
  background: var(--ma-surface);
  border-color: var(--ma-border-dashed);
}

/* saved-address cards */
.cc_ikas_account_addresses .addr-card {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
  padding: 24px;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-md);
}

.cc_ikas_account_addresses .addr-card__top {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
}

.cc_ikas_account_addresses .addr-card__title {
  color: var(--ma-text);
}

/* outline "Varsayılan" badge. Vertical padding is capped so the pill (11px overline line +
   padding + border) stays SHORTER than the 16px title's line box next to it — a taller badge
   made the default card's top row grow ~3px over the skeleton when the data arrived. */
.cc_ikas_account_addresses .addr-card__badge {
  color: var(--ma-text-muted);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-pill);
  padding: 2px 10px;
}

.cc_ikas_account_addresses .addr-card__name {
  color: var(--ma-text);
}

.cc_ikas_account_addresses .addr-card__line {
  color: var(--ma-text-secondary);
}

.cc_ikas_account_addresses .addr-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: var(--ma-sp-4);
  padding-top: 16px;
  border-top: 1px solid var(--ma-border);
}

.cc_ikas_account_addresses .addr-card__btn {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ma-text);
  display: inline-flex;
  align-items: center;
  gap: var(--ma-sp-6);
}

.cc_ikas_account_addresses .addr-card__btn:hover {
  text-decoration: underline;
}

.cc_ikas_account_addresses .addr-card__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

.cc_ikas_account_addresses .addr-card__btn--danger {
  color: var(--ma-danger);
}

/* inline delete confirm (replaces the actions row) */
.cc_ikas_account_addresses .addr-card__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
  margin-top: var(--ma-sp-4);
  padding-top: 16px;
  border-top: 1px solid var(--ma-border);
}

.cc_ikas_account_addresses .addr-card__confirm-q {
  color: var(--ma-text);
}

.cc_ikas_account_addresses .addr-card__confirm-actions {
  display: flex;
  gap: var(--ma-sp-8);
}

/* address form — plain underline Inputs/Selects (matches login/register and
   the SettingsModal), stacked with paired fields in a 2-col row. */
.cc_ikas_account_addresses .addr-form {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-24);
}

/* The form's flex gap already spaces the header — zero SectionHeader's own
   margin so the title→first-field gap matches the settings modal's 24px. */
.cc_ikas_account_addresses .addr-form .ma-head {
  margin-bottom: 0;
}

.cc_ikas_account_addresses .addr-fields {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-24);
}

/* Rows come from ikas addressFormat; column count = cells rendered in the row
   (data-cols), so a country's layout drives the grid, not a fixed 2-col rule. */
.cc_ikas_account_addresses .addr-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ma-sp-24);
}

.cc_ikas_account_addresses .addr-row[data-cols="2"] {
  grid-template-columns: 1fr 1fr;
}

.cc_ikas_account_addresses .addr-row[data-cols="3"] {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 480px) {
  .cc_ikas_account_addresses .addr-row[data-cols="2"], .cc_ikas_account_addresses .addr-row[data-cols="3"] {
    grid-template-columns: 1fr;
  }
}

/* (field error lines now render inside the shared Input/Select via `errorText`) */

/* save / cancel actions row */
.cc_ikas_account_addresses .content-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ma-sp-12);
}

/*
 * Generic modal shell — backdrop + centered panel. Editorial monochrome:
 * dim backdrop, sharp-cornered surface panel, scrolls internally when the
 * content is taller than the viewport.
 */
.cc_ikas_account_addresses .ma-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--ma-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ma-sp-24);
  z-index: 1000;
}

.cc_ikas_account_addresses .ma-modal__panel {
  background: var(--ma-surface);
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 32px;
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-xl);
}

@media (max-width: 480px) {
  .cc_ikas_account_addresses .ma-modal__panel {
    padding: var(--ma-sp-24);
  }
}

.cc_ikas_account_order_detail .order-detail .od-wrap {
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-40);
}

/* back link */
.cc_ikas_account_order_detail .order-detail .od-back {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ma-sp-8);
  color: var(--ma-text-secondary);
  cursor: pointer;
  text-align: left;
}
.cc_ikas_account_order_detail .order-detail .od-back:hover {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-back__ic {
  display: flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* header row: order # + status (left) · store/date (right) */
.cc_ikas_account_order_detail .order-detail .od-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ma-sp-24);
  flex-wrap: wrap;
}
.cc_ikas_account_order_detail .order-detail .od-head__l {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-6);
  min-width: 0;
}
.cc_ikas_account_order_detail .order-detail .od-head__title-row {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-16);
  flex-wrap: wrap;
}
.cc_ikas_account_order_detail .order-detail .od-head__no {
  margin: 0;
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-head__r {
  text-align: right;
  flex: 0 0 auto;
}
.cc_ikas_account_order_detail .order-detail .od-head__store {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-head__date {
  margin-top: var(--ma-sp-4);
  color: var(--ma-text-secondary);
}

/* ===== 2-column grid ===== */
.cc_ikas_account_order_detail .order-detail .od-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

/* left: item rows + price summary */
.cc_ikas_account_order_detail .order-detail .od-items {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cc_ikas_account_order_detail .order-detail .od-items__list {
  display: flex;
  flex-direction: column;
}

/* digital product downloads */
.cc_ikas_account_order_detail .order-detail .od-dl {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-8);
  padding: var(--ma-sp-16);
  margin-bottom: var(--ma-sp-24);
  border-radius: var(--ma-radius);
  background: var(--ma-surface-subtle);
}
.cc_ikas_account_order_detail .order-detail .od-dl__title {
  color: var(--ma-text-muted);
}
.cc_ikas_account_order_detail .order-detail .od-dl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-sp-12);
}
.cc_ikas_account_order_detail .order-detail .od-dl__name {
  color: var(--ma-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.cc_ikas_account_order_detail .order-detail .od-dl__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ma-sp-6);
  flex: 0 0 auto;
  padding: var(--ma-sp-6) var(--ma-sp-12);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  background: var(--ma-surface);
  color: var(--ma-text);
  cursor: pointer;
}
.cc_ikas_account_order_detail .order-detail .od-dl__btn:hover:not(:disabled) {
  background: var(--ma-surface-sunken);
}
.cc_ikas_account_order_detail .order-detail .od-dl__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* bundle group: name heads the block, children indent under it without their own separators */
.cc_ikas_account_order_detail .order-detail .od-bundle {
  border-top: 1px solid var(--ma-border);
  padding-top: var(--ma-sp-16);
}
.cc_ikas_account_order_detail .order-detail .od-bundle__name {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-bundle .od-pi {
  border-top: 0;
  padding: var(--ma-sp-12) 0 var(--ma-sp-12) var(--ma-sp-16);
}

/* multi-package groups */
.cc_ikas_account_order_detail .order-detail .od-packages {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-32);
}
.cc_ikas_account_order_detail .order-detail .od-pkg {
  display: flex;
  flex-direction: column;
}
.cc_ikas_account_order_detail .order-detail .od-pkg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-sp-12);
  padding-bottom: var(--ma-sp-12);
}
.cc_ikas_account_order_detail .order-detail .od-pkg__label {
  color: var(--ma-text-muted);
}
.cc_ikas_account_order_detail .order-detail .od-pkg__ship {
  padding: var(--ma-sp-12) var(--ma-sp-16);
  border-radius: var(--ma-radius);
  background: var(--ma-surface-subtle);
}
.cc_ikas_account_order_detail .order-detail .od-pkg__ship:hover:not(:disabled) {
  background: var(--ma-surface-sunken);
}
.cc_ikas_account_order_detail .order-detail .od-pi {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-20);
  border-top: 1px solid var(--ma-border);
  padding: var(--ma-sp-24) 0;
}
/* an <a> to the product page, or an inert <span> when the product is gone */
.cc_ikas_account_order_detail .order-detail .od-pi__thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  overflow: hidden;
  background: var(--ma-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-text-disabled);
}
.cc_ikas_account_order_detail .order-detail .od-items__list .od-pi__thumb {
  width: 80px;
  height: 80px;
}
.cc_ikas_account_order_detail .order-detail .od-pi__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc_ikas_account_order_detail .order-detail .od-pi__info {
  flex: 1;
  min-width: 0;
}
.cc_ikas_account_order_detail .order-detail .od-pi__name {
  color: var(--ma-text);
}
/* the name as a link to the product page — plain text at rest, underline on hover */
.cc_ikas_account_order_detail .order-detail .od-pi__name--link {
  color: var(--ma-text);
  text-decoration: none;
}
.cc_ikas_account_order_detail .order-detail .od-pi__name--link:hover {
  text-decoration: underline;
}
.cc_ikas_account_order_detail .order-detail .od-pi__meta {
  margin-top: var(--ma-sp-4);
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-pi__price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ma-sp-4);
}
.cc_ikas_account_order_detail .order-detail .od-pi__was {
  color: var(--ma-text-secondary);
  text-decoration: line-through;
}
.cc_ikas_account_order_detail .order-detail .od-pi__now {
  color: var(--ma-text);
  font-variant-numeric: tabular-nums;
}

/* price summary — ara toplam / kargo / Toplam (top rule) */
.cc_ikas_account_order_detail .order-detail .od-summary {
  padding-top: var(--ma-sp-24);
}
.cc_ikas_account_order_detail .order-detail .od-sums {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-12);
}
.cc_ikas_account_order_detail .order-detail .od-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ma-sp-16);
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-sum__k {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-sum__v {
  font-variant-numeric: tabular-nums;
}
.cc_ikas_account_order_detail .order-detail .od-sum--discount .od-sum__v {
  color: var(--ma-status-positive);
}
.cc_ikas_account_order_detail .order-detail .od-sum--total {
  margin-top: var(--ma-sp-4);
  padding-top: var(--ma-sp-12);
  border-top: 1px solid var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-sum--total .od-sum__k {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-sum--total .od-sum__v {
  color: var(--ma-text);
}

/* right: info panel */
.cc_ikas_account_order_detail .order-detail .od-aside {
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-md);
  padding: var(--ma-sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-24);
}
.cc_ikas_account_order_detail .order-detail .od-aside__sec + .od-aside__sec {
  padding-top: var(--ma-sp-24);
  border-top: 1px solid var(--ma-border);
}
.cc_ikas_account_order_detail .order-detail .od-aside__label {
  margin-bottom: var(--ma-sp-12);
  color: var(--ma-text-muted);
}

/* delivery address */
.cc_ikas_account_order_detail .order-detail .od-ad__np {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-6);
  color: var(--ma-text);
  margin-bottom: var(--ma-sp-4);
}
.cc_ikas_account_order_detail .order-detail .od-ad__np svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-ad__name {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-ad__d {
  width: 1px;
  height: 12px;
  background: var(--ma-border-strong);
}
.cc_ikas_account_order_detail .order-detail .od-ad__full {
  color: var(--ma-text-secondary);
}

/* kargo takip row (inside aside) */
.cc_ikas_account_order_detail .order-detail .od-ship {
  appearance: none;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ma-primary);
}
.cc_ikas_account_order_detail .order-detail .od-ship:hover:not(:disabled) {
  color: var(--ma-primary-hover);
}
.cc_ikas_account_order_detail .order-detail .od-ship:hover:not(:disabled) .od-ship__t {
  text-decoration: underline;
}
.cc_ikas_account_order_detail .order-detail .od-ship:disabled {
  cursor: default;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-ship__ic {
  display: flex;
  flex: 0 0 auto;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-ship__t {
  flex: 1;
  min-width: 0;
}
.cc_ikas_account_order_detail .order-detail .od-ship__meta {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-ship__chev {
  display: flex;
  flex: 0 0 auto;
  color: var(--ma-text-disabled);
}

/* payment method line (aside + refund transactions) */
.cc_ikas_account_order_detail .order-detail .od-pay {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
  margin-bottom: var(--ma-sp-16);
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-aside .od-pay {
  margin-bottom: 0;
}
/* split payments: each transaction is its own row */
.cc_ikas_account_order_detail .order-detail .od-aside .od-pay + .od-pay {
  margin-top: var(--ma-sp-8);
}
/* The refund card ends on this row — a trailing margin there just pads the card bottom. */
.cc_ikas_account_order_detail .order-detail .od-pay:last-child {
  margin-bottom: 0;
}
.cc_ikas_account_order_detail .order-detail .od-pay__ic {
  display: flex;
  flex: 0 0 auto;
  color: var(--ma-text-secondary);
}
/* refund transaction row: method label grows, formatted amount right-aligned */
.cc_ikas_account_order_detail .order-detail .od-pay__method {
  flex: 1 1 auto;
}
.cc_ikas_account_order_detail .order-detail .od-pay__amt {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
/* refund summary: method + date stacked next to the icon; total row separated on top */
.cc_ikas_account_order_detail .order-detail .od-pay__col {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-2);
  flex: 1 1 auto;
  min-width: 0;
}
.cc_ikas_account_order_detail .order-detail .od-pay__date {
  color: var(--ma-text-muted);
}
.cc_ikas_account_order_detail .order-detail .od-pay--total {
  border-top: 1px solid var(--ma-border);
  padding-top: var(--ma-sp-16);
  margin-bottom: 0;
}

/* ===== combined card (refund block + billing — kept as stacked sections) === */
.cc_ikas_account_order_detail .order-detail .od-card {
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-md);
  overflow: hidden;
}
.cc_ikas_account_order_detail .order-detail .od-card--pad {
  padding: var(--ma-sp-24);
}

/* section title inside a card */
.cc_ikas_account_order_detail .order-detail .od-sec {
  color: var(--ma-text);
  margin-bottom: var(--ma-sp-16);
}

/* refunded / return-flow item rows reuse .od-pi inside this list */
.cc_ikas_account_order_detail .order-detail .od-pi-list {
  display: flex;
  flex-direction: column;
}
/* status groups: a chip heads each run of same-status items */
.cc_ikas_account_order_detail .order-detail .od-refund-group:not(:first-child) {
  border-top: 1px solid var(--ma-border);
  padding-top: var(--ma-sp-16);
}
.cc_ikas_account_order_detail .order-detail .od-refund-group__chip {
  display: flex;
  justify-content: flex-start;
}
.cc_ikas_account_order_detail .order-detail .od-refund-group__chip + .od-pi {
  border-top: 0;
  padding-top: var(--ma-sp-12);
}
.cc_ikas_account_order_detail .order-detail .od-refund-group:first-child > .od-pi:first-child {
  border-top: 0;
  padding-top: 0;
}
.cc_ikas_account_order_detail .order-detail .od-refund-group:last-child > .od-pi:last-child {
  padding-bottom: 0;
}

/* ===== refund status timeline ===== */
.cc_ikas_account_order_detail .order-detail .od-timeline {
  display: flex;
  flex-direction: column;
}
.cc_ikas_account_order_detail .order-detail .od-step {
  display: flex;
  gap: var(--ma-sp-12);
}
.cc_ikas_account_order_detail .order-detail .od-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  flex: 0 0 auto;
}
.cc_ikas_account_order_detail .order-detail .od-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Centers the dot on the name's first text line: bodyStrong is 14px × 1.4 ≈ 19.6px, so the
     line's midpoint sits at ~10px — matching the dot's (6 + 4). */
  margin-top: 6px;
  background: var(--ma-border-strong);
  flex: 0 0 auto;
}
.cc_ikas_account_order_detail .order-detail .od-step--done .od-step__dot {
  background: var(--ma-status-positive);
}
.cc_ikas_account_order_detail .order-detail .od-step--current .od-step__dot {
  /* The wizard's active-step language (see rw-step--active): primary core, soft primary halo.
     Not --ma-focus-ring — that token is the keyboard-focus outline, and a full-strength 3px
     ring around a dark dot reads as focus stuck on a list item, not as "you are here". */
  background: var(--ma-primary);
  box-shadow: 0 0 0 3px var(--ma-primary-soft);
}
.cc_ikas_account_order_detail .order-detail .od-step__line {
  width: 1px;
  flex: 1;
  min-height: 18px;
  /* dot → 6px gap → line → gap → next dot. The bottom needs no margin of its own: the line runs
     to the step's edge and the NEXT step's dot already sits 6px in (its margin-top), so both
     ends of every segment breathe by the same 6px. */
  margin-top: 6px;
  background: var(--ma-border);
}
.cc_ikas_account_order_detail .order-detail .od-step:last-child .od-step__line {
  display: none;
}
.cc_ikas_account_order_detail .order-detail .od-step__body {
  padding-bottom: var(--ma-sp-16);
  min-width: 0;
}
.cc_ikas_account_order_detail .order-detail .od-step:last-child .od-step__body {
  padding-bottom: 0;
}
.cc_ikas_account_order_detail .order-detail .od-step__name {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-step--upcoming .od-step__name {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-step__when {
  color: var(--ma-text-secondary);
}

/* return-shipping code */
.cc_ikas_account_order_detail .order-detail .od-code {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
  padding: var(--ma-sp-12) var(--ma-sp-16);
  border: 1px dashed var(--ma-border-strong);
  border-radius: var(--ma-radius);
  background: var(--ma-surface-subtle);
}
.cc_ikas_account_order_detail .order-detail .od-code__ic {
  display: flex;
  flex: 0 0 auto;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-code__label {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-code__value {
  margin-left: auto;
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-code-note {
  margin: var(--ma-sp-12) 0 0;
  color: var(--ma-text-secondary);
}

/* billing */
.cc_ikas_account_order_detail .order-detail .od-bill {
  padding: var(--ma-sp-24);
}
.cc_ikas_account_order_detail .order-detail .od-bill__info {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-bill__name {
  color: var(--ma-text);
}

/* invoice rows inside billing card */
.cc_ikas_account_order_detail .order-detail .od-invoice {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
  padding: var(--ma-sp-12) var(--ma-sp-24);
  border-top: 1px solid var(--ma-border);
}
.cc_ikas_account_order_detail .order-detail .od-invoice:hover {
  background: var(--ma-surface-subtle);
}
.cc_ikas_account_order_detail .order-detail .od-invoice__ic {
  display: flex;
  flex: 0 0 auto;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .order-detail .od-invoice__no {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .order-detail .od-invoice__meta {
  margin-left: auto;
  color: var(--ma-text-secondary);
}

/* ===== mobile (<768px): single column ===== */
@media (max-width: 767px) {
  .cc_ikas_account_order_detail .order-detail .od-grid {
    grid-template-columns: 1fr;
    gap: var(--ma-sp-32);
  }
  .cc_ikas_account_order_detail .order-detail .od-head {
    flex-direction: column;
    gap: var(--ma-sp-12);
  }
  .cc_ikas_account_order_detail .order-detail .od-head__r {
    text-align: left;
  }
  .cc_ikas_account_order_detail .order-detail .od-aside {
    padding: var(--ma-sp-24);
  }
}
/* The included-VAT note under the total: informational, so both sides stay muted. */
.cc_ikas_account_order_detail .od-sum--tax .od-sum__k, .cc_ikas_account_order_detail .od-sum--tax .od-sum__v {
  color: var(--ma-text-secondary);
}

.cc_ikas_account_order_detail .rw-content {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-20);
  min-width: 0;
}

/* rw-content's own gap already spaces the "İade" SectionHeader from the
   panel below it — zero SectionHeader's baseline margin-bottom here so the
   two spacing rules don't stack. */
.cc_ikas_account_order_detail .rw-content > .ma-head {
  margin-bottom: 0;
}

.cc_ikas_account_order_detail .rw-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ma-sp-8);
  align-self: flex-start;
  /* The order-detail view it replaces spaces its back link 40 from the header (od-wrap's gap);
     rw-content's gap stays 20 for the stepper/panel rhythm, so the back link carries the
     difference (40 − 20 = this 20) and the header sits where it sat before the view switch. */
  margin: 0 0 var(--ma-sp-20) 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ma-text-secondary);
  cursor: pointer;
  text-align: left;
}
.cc_ikas_account_order_detail .rw-back__ic {
  display: flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.cc_ikas_account_order_detail .rw-back:hover {
  color: var(--ma-text);
}

.cc_ikas_account_order_detail .rw-panel {
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-lg);
  padding: var(--ma-sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_account_order_detail .rw-card-skel {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-12);
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-lg);
  padding: var(--ma-sp-20);
}

/* ---- stepper ---- */
.cc_ikas_account_order_detail .rw-stepper {
  display: flex;
  align-items: flex-start;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-lg);
  padding: var(--ma-sp-20) var(--ma-sp-16);
}
.cc_ikas_account_order_detail .rw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: center;
}
.cc_ikas_account_order_detail .rw-step__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ma-surface);
  border: 1.5px solid var(--ma-border-strong);
  color: var(--ma-text-secondary);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  z-index: 1;
}
.cc_ikas_account_order_detail .rw-step__lbl {
  color: var(--ma-text-secondary);
  max-width: 96px;
}
/* connector line */
.cc_ikas_account_order_detail .rw-step::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 1.5px;
  background: var(--ma-border-strong);
  z-index: 0;
}
.cc_ikas_account_order_detail .rw-step:first-child::before {
  display: none;
}
.cc_ikas_account_order_detail .rw-step--active .rw-step__dot {
  background: var(--ma-primary-soft);
  border-color: var(--ma-primary);
  color: var(--ma-primary);
}
.cc_ikas_account_order_detail .rw-step--active .rw-step__lbl {
  color: var(--ma-primary);
}
.cc_ikas_account_order_detail .rw-step--completed .rw-step__dot {
  background: var(--ma-primary);
  border-color: var(--ma-primary);
  color: var(--ma-primary-contrast);
}
.cc_ikas_account_order_detail .rw-step--completed .rw-step__lbl {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .rw-step--completed::before, .cc_ikas_account_order_detail .rw-step--active::before {
  background: var(--ma-primary);
}

/* ---- wizard head ---- */
.cc_ikas_account_order_detail .rw-wiz-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc_ikas_account_order_detail .rw-wiz-head h2 {
  margin: 0;
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .rw-wiz-head p {
  margin: 0;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .rw-order-hint {
  margin: 0;
  color: var(--ma-text-secondary);
}

/* ---- line-item picker ---- */
.cc_ikas_account_order_detail .rw-li-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  overflow: hidden;
}
.cc_ikas_account_order_detail .rw-li {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-12);
  padding: var(--ma-sp-12) var(--ma-sp-16);
  background: var(--ma-surface);
}
.cc_ikas_account_order_detail .rw-li + .rw-li {
  border-top: 1px solid var(--ma-border);
}
.cc_ikas_account_order_detail .rw-li--on {
  background: var(--ma-primary-soft);
}
.cc_ikas_account_order_detail .rw-li__chk {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1.5px solid var(--ma-border-strong);
  border-radius: var(--ma-radius-sm);
  cursor: pointer;
  position: relative;
  background: var(--ma-surface);
}
.cc_ikas_account_order_detail .rw-li__chk:checked {
  background: var(--ma-primary);
  border-color: var(--ma-primary);
}
.cc_ikas_account_order_detail .rw-li__chk:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-primary-contrast);
  font-size: 12px;
  font-weight: 800;
}
.cc_ikas_account_order_detail .rw-li__thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: var(--ma-radius-md);
  background: var(--ma-surface-sunken);
  border: 1px solid var(--ma-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-text-disabled);
}
.cc_ikas_account_order_detail .rw-li__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc_ikas_account_order_detail .rw-li__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc_ikas_account_order_detail .rw-li__name {
  color: var(--ma-text);
}
.cc_ikas_account_order_detail .rw-li__meta {
  color: var(--ma-text-secondary);
}

/* ---- qty stepper ---- */
.cc_ikas_account_order_detail .rw-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ma-border-strong);
  border-radius: var(--ma-radius-md);
  flex: 0 0 auto;
  overflow: hidden;
}
.cc_ikas_account_order_detail .rw-qty button {
  all: unset;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ma-text);
  font-size: 16px;
  font-weight: var(--ma-fw-semibold);
}
.cc_ikas_account_order_detail .rw-qty button:hover {
  background: var(--ma-surface-subtle);
}
.cc_ikas_account_order_detail .rw-qty button:disabled {
  color: var(--ma-text-disabled);
  cursor: not-allowed;
}
.cc_ikas_account_order_detail .rw-qty__v {
  min-width: 30px;
  text-align: center;
  border-left: 1px solid var(--ma-border);
  border-right: 1px solid var(--ma-border);
}

/* ---- summary ---- */
.cc_ikas_account_order_detail .rw-summary {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  overflow: hidden;
}
.cc_ikas_account_order_detail .rw-sum-row {
  display: flex;
  gap: var(--ma-sp-16);
  padding: var(--ma-sp-12) var(--ma-sp-16);
  background: var(--ma-surface);
}
.cc_ikas_account_order_detail .rw-sum-row + .rw-sum-row {
  border-top: 1px solid var(--ma-border);
}
.cc_ikas_account_order_detail .rw-sum-k {
  flex: 0 0 34%;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .rw-sum-v {
  flex: 1;
  color: var(--ma-text);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}
.cc_ikas_account_order_detail .rw-sum-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cc_ikas_account_order_detail .rw-sum-x {
  color: var(--ma-text-secondary);
}
.cc_ikas_account_order_detail .rw-sum-empty {
  color: var(--ma-text-disabled);
}

.cc_ikas_account_order_detail .rw-info-title {
  display: block;
  margin-bottom: 2px;
}
.cc_ikas_account_order_detail .rw-err {
  margin-top: 0;
}

/* ---- wizard nav ---- */
.cc_ikas_account_order_detail .rw-nav {
  display: flex;
  gap: var(--ma-sp-12);
  justify-content: space-between;
  align-items: center;
}
.cc_ikas_account_order_detail .rw-nav__next {
  min-width: 200px;
}

@media (min-width: 768px) {
  .cc_ikas_account_order_detail .rw-step__lbl {
    max-width: 120px;
  }
}

/* ===== desktop table ===== */
.cc_ikas_account_orders .oc-table {
  display: block;
  width: 100%;
}

.cc_ikas_account_orders .oc-thead, .cc_ikas_account_orders .oc-row {
  display: grid;
  /* Ranges rather than five fixed widths, because the fixed ones did not survive a 768px tablet —
     the narrowest page this table is ever drawn on, since below 768 the card list takes over.
     540px of columns plus 64px of gaps left the products cell 68px of the 672px content box, and
     a grid track's automatic minimum is its CONTENT: `maxThumbnails` is a merchant prop, so at
     its default of 4 that cell is 200px of overlapping thumbnails. Each row being its OWN grid,
     the track grew per row — shoving the amount column off the page, and leaving an order with
     three thumbnails out of line with one that had a single thumbnail and with the header above
     both. `.oc-row__items` below is what now stops that growth; these ranges are what stop the
     cell being squeezed to 68px in the first place, so the thumbnails still have somewhere to go.

     The minima total 580px, so the row fits with room to spare. The maxima are the design widths
     and are reached from a 840px viewport up, where nothing about this changes. */
  grid-template-columns:
    minmax(88px, 130px)
    minmax(140px, 1fr)
    minmax(104px, 150px)
    minmax(96px, 140px)
    minmax(88px, 120px);
  align-items: center;
  gap: var(--ma-sp-16);
}

/* Zeroes this cell's automatic minimum, which is what makes all five tracks resolve identically
   on every row — the only reason the columns line up. It also clips rather than widens: a merchant
   who raises `maxThumbnails` is asking for more thumbnails, not a table wider than the page. */
.cc_ikas_account_orders .oc-row__items {
  overflow: hidden;
}

.cc_ikas_account_orders .oc-thead {
  padding-bottom: var(--ma-sp-12);
  border-bottom: 1px solid var(--ma-text);
  color: var(--ma-text-muted);
}

.cc_ikas_account_orders .oc-thead__amt {
  text-align: right;
}

.cc_ikas_account_orders .oc-row {
  padding: var(--ma-sp-24) 0;
  border-bottom: 1px solid var(--ma-border);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s;
}

.cc_ikas_account_orders .oc-row:hover {
  background: var(--ma-surface-subtle);
}

.cc_ikas_account_orders .oc-row:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: -2px;
}

.cc_ikas_account_orders .oc-row__no {
  color: var(--ma-text);
}

.cc_ikas_account_orders .oc-row__date {
  color: var(--ma-text-secondary);
}

.cc_ikas_account_orders .oc-row__amt {
  text-align: right;
  color: var(--ma-text);
}

/* row thumbnails — 48px, per design 5b (larger than the mobile card's 38px) */
.cc_ikas_account_orders .oc-rthumbs {
  display: flex;
  align-items: center;
}
.cc_ikas_account_orders .oc-rth {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  background: var(--ma-surface-sunken);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-text-disabled);
  margin-left: -10px;
  box-shadow: -2px 0 0 var(--ma-surface);
}
.cc_ikas_account_orders .oc-rth:first-child {
  margin-left: 0;
  box-shadow: none;
}
.cc_ikas_account_orders .oc-rth img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc_ikas_account_orders .oc-rth--more {
  background: var(--ma-surface-subtle);
  color: var(--ma-text-secondary);
}

/* ===== mobile card list (hidden on desktop; the table above owns desktop) ===== */
.cc_ikas_account_orders .oc-list {
  display: none;
  flex-direction: column;
  gap: var(--ma-sp-12);
  max-width: 640px;
}

/* loading skeleton mirrors the loaded layout: table rows on desktop
   (.oc-row--skel inside .oc-table), this card list on mobile only */
.cc_ikas_account_orders .oc-skel-list {
  display: none;
  flex-direction: column;
  gap: var(--ma-sp-12);
  max-width: 640px;
}

.cc_ikas_account_orders .oc-row--skel {
  pointer-events: none;
}
.cc_ikas_account_orders .oc-row--skel .oc-row__amt {
  display: flex;
  justify-content: flex-end;
}

/* card */
.cc_ikas_account_orders .oc-card {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
  width: 100%;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  padding: var(--ma-sp-16);
  background: var(--ma-surface);
  cursor: pointer;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.cc_ikas_account_orders .oc-card:hover {
  border-color: var(--ma-border-strong);
  box-shadow: var(--ma-shadow-xs);
}
.cc_ikas_account_orders .oc-card:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}
.cc_ikas_account_orders .oc-card--skel {
  cursor: default;
}

.cc_ikas_account_orders .oc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-sp-8);
}
.cc_ikas_account_orders .oc-date {
  color: var(--ma-text-secondary);
}

.cc_ikas_account_orders .oc-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-sp-16);
}
.cc_ikas_account_orders .oc-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-4);
}
.cc_ikas_account_orders .oc-names {
  color: var(--ma-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cc_ikas_account_orders .oc-sub {
  display: flex;
  align-items: center;
  gap: var(--ma-sp-8);
  flex-wrap: wrap;
  color: var(--ma-text-secondary);
}
.cc_ikas_account_orders .oc-dot {
  width: 1px;
  height: 12px;
  background: var(--ma-border-strong);
  flex: 0 0 auto;
}

/* thumbnails stack with +N overflow */
.cc_ikas_account_orders .oc-thumbs {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.cc_ikas_account_orders .oc-th {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--ma-radius-sm);
  border: 1px solid var(--ma-border);
  background: var(--ma-surface-sunken);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-text-disabled);
  margin-left: -8px;
  box-shadow: -2px 0 0 var(--ma-surface);
}
.cc_ikas_account_orders .oc-th:first-child {
  margin-left: 0;
  box-shadow: none;
}
.cc_ikas_account_orders .oc-th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc_ikas_account_orders .oc-th--more {
  background: var(--ma-surface-subtle);
  color: var(--ma-text-secondary);
}

/* load more */
.cc_ikas_account_orders .oc-more {
  display: flex;
  justify-content: center;
  margin-top: var(--ma-sp-4);
}

/* ===== mobile (<768px): hide the table, show the card list ===== */
@media (max-width: 767px) {
  .cc_ikas_account_orders .oc-table {
    display: none;
  }
  .cc_ikas_account_orders .oc-list, .cc_ikas_account_orders .oc-skel-list {
    display: flex;
  }
}

/* load-error screen: alert + retry, stacked and left-aligned */
.cc_ikas_account_orders .oc-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ma-sp-16);
}

.cc_ikas_email_verification .verify {
  width: 100%;
}

/* Every SectionHeader here sits in a flex container that already applies a gap
   (.verify-state, .verify-resend) — zero the baseline margin so the two spacing
   rules don't stack into a double gap. */
.cc_ikas_email_verification .verify .ma-head {
  margin-bottom: 0;
}

.cc_ikas_email_verification .verify-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ma-sp-16);
  text-align: center;
}

.cc_ikas_email_verification .verify-text {
  margin: 0;
  color: var(--ma-text-secondary);
}

.cc_ikas_email_verification .verify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--ma-radius-pill);
  border: 1px solid currentColor;
}

/* The same soft fill an alert box gets, through the same token. Hand-rolling a `color-mix` here
   meant this badge was the one place a merchant's "Olumlu kutu zemini" did nothing. The border
   stays `currentColor` on purpose: a 56px badge carries the full-strength ring, not the soft one. */
.cc_ikas_email_verification .verify-icon--success {
  color: var(--ma-status-positive);
  background: var(--ma-notice-positive-bg);
}

.cc_ikas_email_verification .verify-icon--error {
  color: var(--ma-danger);
  background: var(--ma-notice-danger-bg);
}

/* The resend form is the only interactive part of the section and only ever renders
   under the error state — separate it from the message above with a rule rather than
   with spacing alone. */
.cc_ikas_email_verification .verify-resend {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
  width: 100%;
  margin-top: var(--ma-sp-8);
  padding-top: var(--ma-sp-24);
  border-top: 1px solid var(--ma-border);
  text-align: left;
}

.cc_ikas_email_verification .verify-resend__form {
  display: flex;
  flex-direction: column;
  gap: var(--ma-sp-16);
}

.cc_ikas_email_verification .ma-pageloader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ma-sp-64) var(--ma-sp-24);
  color: var(--ma-text-disabled);
}