/*
 * Fallback styling for [kk_story_grid] / [kk_pricing] so they still look
 * reasonable under any theme, not just the bundled "Katha Kutty" theme
 * (which restyles these same classes with the full brand palette in its
 * own style.css - these rules just make sure nothing looks broken if a
 * different theme is active).
 */
.kk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 24px 0; }
.kk-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.kk-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #eee; }
.kk-card__body { padding: 14px; }
.kk-card__title { font-weight: 600; margin: 0 0 6px; }
.kk-card__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.kk-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #f0f0f0; color: #555; }
.kk-badge--premium { background: #F2B441; color: #2B1512; }
.kk-badge--free { background: #DCEFE3; color: #2F6B48; }

.kk-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 24px 0; }
.kk-price-card { background: #fff; border-radius: 14px; padding: 28px 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); position: relative; border: 2px solid transparent; }
.kk-price-card--popular { border-color: #E85D4E; }
.kk-price-card__ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #E85D4E; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.kk-price-card__label { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.kk-price-card__amount { font-size: 2.1rem; font-weight: 700; color: #E85D4E; margin: 6px 0; }
.kk-price-card__amount span { font-size: 0.9rem; color: #888; font-weight: 400; }
.kk-price-card__strike { color: #888; text-decoration: line-through; font-size: 0.9rem; }
.kk-price-card__devices { color: #777; font-size: 0.9rem; margin-bottom: 18px; }

.kk-founding-banner { background: #2B1512; color: #fff; border-radius: 14px; padding: 16px 24px; text-align: center; margin: 24px 0; }
.kk-founding-banner strong { color: #F2B441; }

.kk-store-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.kk-store-badge { position: relative; display: inline-flex; align-items: center; gap: 11px; min-width: 190px; background: #fff; color: #2B1512; padding: 11px 22px; border-radius: 999px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.kk-store-badge__logo { width: 26px; height: 26px; flex: none; }
.kk-store-badge__text { display: block; line-height: 1.15; }
.kk-store-badge__text small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7A6A63; }
.kk-store-badge__text strong { display: block; font-size: 1.08rem; }
.kk-store-badge__nudge { display: inline-block; margin-top: 5px; white-space: nowrap; font-size: .68rem; font-weight: 700; color: #2B1512; background: #F2B441; padding: 2px 10px; border-radius: 999px; }
.kk-is-ios .kk-store-badge--ios { order: -1; }

.kk-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 12px 24px; border-radius: 999px; text-decoration: none; }
.kk-btn--primary { background: #E85D4E; color: #fff; }

/* End-of-sample card. The Katha Kutty theme restyles all of this with the
 * full brand palette; these rules only make sure it is usable - centred,
 * readable, dismissible - if a different theme is ever activated. */
.kk-endcard { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.kk-endcard[hidden] { display: none; }
.kk-noscroll { overflow: hidden; }
.kk-endcard__veil { position: absolute; inset: 0; background: rgba(28,13,11,.62); }
.kk-endcard__card { position: relative; width: min(440px,100%); max-height: 92vh; overflow-y: auto; background: #FFF8F0; border-radius: 24px; box-shadow: 0 30px 70px rgba(28,13,11,.5); }
.kk-endcard__card:focus { outline: none; }
.kk-endcard__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; font-size: 1.5rem; line-height: 1; color: #fff; background: rgba(255,255,255,.15); border: 0; border-radius: 50%; cursor: pointer; }
.kk-endcard__top { position: relative; background: #2B1512; color: #F5EDE6; text-align: center; padding: 26px 26px 30px; }
.kk-endcard__sparks, .kk-endcard__wave, .kk-endcard__discPulse { display: none; }
.kk-endcard__disc { width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: rgba(242,180,65,.16); }
.kk-endcard__discIcon { font-size: 1.75rem; }
.kk-endcard__eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 0 0 10px; }
.kk-endcard__h { margin: 0; }
.kk-endcard__ml { display: block; font-size: 2rem; font-weight: 800; color: #F2B441; }
.kk-endcard__gloss { display: block; font-style: italic; opacity: .75; }
.kk-endcard__line { margin: 12px auto 0; max-width: 40ch; }
.kk-endcard__line em { font-style: normal; font-weight: 700; color: #fff; }
.kk-endcard__body { padding: 20px 26px 22px; }
.kk-endcard__perks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.kk-endcard__perks li { display: flex; gap: 10px; align-items: flex-start; color: #7A6A63; }
.kk-endcard__perks strong { color: #2D2321; }
.kk-endcard__tick { flex: none; width: 21px; height: 21px; margin-top: 2px; border-radius: 50%; background: rgba(95,167,119,.25); }
.kk-endcard__cta { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-radius: 18px; background: #E85D4E; color: #fff; text-decoration: none; }
.kk-endcard__ctaIcon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.kk-endcard__ctaText strong { display: block; font-size: 1.06rem; }
.kk-endcard__ctaText small { display: block; font-size: .84rem; opacity: .85; }
.kk-endcard__plans { display: block; text-align: center; margin: 12px 0 0; font-size: .87rem; color: #7A6A63; }
.kk-endcard__ctas { display: grid; gap: 10px; }
.kk-endcard__ctaIcon svg { width: 20px; height: 20px; display: block; }
.kk-endcard__ctas.is-dual .kk-endcard__cta--ios { background: #2B1512; }
.kk-is-ios .kk-endcard__ctas.is-dual .kk-endcard__cta--ios { order: -1; }
.kk-endcard__soon { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 14px; border-radius: 18px; border: 1.5px solid #EFE2D6; font-size: .88rem; color: #7A6A63; text-decoration: none; }
.kk-endcard__soon strong { color: #2D2321; }
.kk-endcard__soonIcon svg { width: 15px; height: 15px; display: block; }
.kk-is-ios .kk-endcard__soon { order: -1; background: #2B1512; border-color: transparent; color: #F5EDE6; padding: 13px 16px; font-size: .95rem; }
.kk-is-ios .kk-endcard__soon strong { color: #fff; }
.kk-endcard__ticket { margin: 15px 0 0; padding: 9px 14px; text-align: center; font-size: .85rem; background: rgba(242,180,65,.18); border: 1.5px dashed rgba(242,180,65,.85); border-radius: 18px; }
.kk-endcard__later { display: block; margin: 11px auto 0; background: none; border: 0; cursor: pointer; color: #7A6A63; text-decoration: underline; }

/* =========================================================================
 * Website sign-in + checkout  ([kk_checkout], added 1.5.0)
 *
 * Written against the theme's own custom properties with hard fallbacks, so
 * it inherits the site's palette where the Katha Kutty theme is active and
 * still looks deliberate if this plugin is ever used under another theme.
 * ====================================================================== */
.kk-checkout { max-width: 520px; margin: 0 auto; }
.kk-checkout__panel {
    background: var(--kk-cream, #FDF7EE);
    border: 1.5px solid rgba(34, 30, 51, .09);
    border-radius: 26px;
    padding: 30px 26px;
}
.kk-checkout__title { margin: 0 0 8px; font-size: 1.5rem; }
.kk-checkout__lede { margin: 0 0 20px; color: rgba(34, 30, 51, .72); }
.kk-checkout__note { margin: 14px 0 0; min-height: 1.4em; color: rgba(34, 30, 51, .66); font-size: .92rem; }
.kk-checkout__note.is-error { color: #B3261E; }
.kk-checkout__fineprint { margin: 16px 0 0; font-size: .84rem; color: rgba(34, 30, 51, .55); }
.kk-checkout__google { display: flex; justify-content: center; margin-bottom: 4px; }

/* The Google button and its "or" rule start hidden and are revealed only
 * once Google's script has actually drawn the button. Without this, a blank
 * Client ID - or Google's script simply not loading - leaves an "or" sitting
 * between the heading and the phone field, separating nothing from nothing.
 * Seen in the offline render on 2026-09-11 and fixed there. */
.kk-checkout__google:empty { display: none; }

/* A rule with the word "or" sitting in a gap in it. The pseudo-elements are
 * the two halves of the line, so it stays centred at any width without
 * being told how wide the word is. */
/* Hidden until initGoogle() confirms a button was actually drawn - see the
 * note above .kk-checkout__google. Declared here, AFTER the base rule, so
 * the reveal is the last word rather than being overridden by it. */
.kk-checkout__or { display: none; align-items: center; gap: 12px; margin: 18px 0; color: rgba(34, 30, 51, .45); font-size: .85rem; }
.kk-checkout.has-google .kk-checkout__or { display: flex; }
.kk-checkout__or::before,
.kk-checkout__or::after { content: ''; flex: 1 1 0; height: 1px; background: rgba(34, 30, 51, .14); }

.kk-field { display: block; margin-bottom: 14px; }
.kk-field__label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 600; }
.kk-field__input {
    width: 100%;
    box-sizing: border-box;      /* or the 100% plus padding overflows the card */
    padding: 13px 15px;
    font-size: 1rem;             /* 16px minimum - anything smaller makes iOS
                                    Safari zoom the page on focus, and the
                                    visitor then has to pinch back out */
    border: 1.5px solid rgba(34, 30, 51, .16);
    border-radius: 14px;
    background: #fff;
    color: inherit;
}
.kk-field__input:focus {
    outline: 2px solid var(--kk-primary, #EE6C4D);
    outline-offset: 1px;
    border-color: transparent;
}
.kk-btn--block { width: 100%; justify-content: center; }

/* The plan chooser. Buttons, not divs with click handlers - so they are
 * reachable by keyboard and announced as controls without any ARIA. */
.kk-checkout__plans { display: grid; gap: 18px; }  /* 18, not 12 - the
   'Save 20%' badge sits 10px above its own card, and at a 12px gap it
   landed on the bottom edge of the card above. */
.kk-planpick {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'label amount' 'note amount';
    gap: 2px 14px;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    border: 1.5px solid rgba(34, 30, 51, .14);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.kk-planpick:hover { border-color: var(--kk-primary, #EE6C4D); }
.kk-planpick:disabled { opacity: .55; cursor: default; }
.kk-planpick.is-popular { border-color: var(--kk-primary, #EE6C4D); border-width: 2px; }
.kk-planpick.is-chosen { box-shadow: 0 0 0 3px rgba(238, 108, 77, .22); }
.kk-planpick__label  { grid-area: label; font-weight: 700; }
.kk-planpick__note   { grid-area: note; font-size: .85rem; color: rgba(34, 30, 51, .6); }
.kk-planpick__amount { grid-area: amount; align-self: center; font-size: 1.32rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kk-planpick__save {
    position: absolute; top: -10px; right: 14px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--kk-gold, #F6B93B); color: #221E33;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.kk-checkout__founding {
    margin: 0 0 14px; padding: 11px 14px;
    border-radius: 14px;
    background: rgba(246, 185, 59, .18);
    border: 1.5px dashed rgba(246, 185, 59, .85);
    font-size: .88rem;
}

/* The secondary way out on a pricing card, under the Subscribe button. */
.kk-price-card__alt { margin: 9px 0 0; text-align: center; font-size: .83rem; }
.kk-price-card__alt a { color: inherit; opacity: .68; }

@media (max-width: 520px) {
    .kk-checkout__panel { padding: 24px 18px; border-radius: 22px; }
    .kk-checkout__title { font-size: 1.32rem; }
}

/* MSG91's captcha lands in this element (custom-UI mode has no popup of its
 * own to put it in). Empty until the widget fills it - :empty keeps it from
 * leaving a gap in the form before then. */
.kk-checkout__captcha { margin: 0 0 14px; }
.kk-checkout__captcha:empty { display: none; }

/* The code-entry step. */
.kk-field--otp .kk-field__input {
    font-size: 1.4rem;
    letter-spacing: .34em;   /* reads as separate digits, not a word */
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.kk-linkbtn {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 8px;
    background: none;
    border: 0;
    font: inherit;
    font-size: .88rem;
    color: rgba(34, 30, 51, .66);
    text-decoration: underline;
    cursor: pointer;
}
.kk-linkbtn:disabled { opacity: .5; cursor: default; }
/* Read-only once a code has been sent to it - the number must not drift out
 * from under the code that was sent to it. */
.kk-field__input[readonly] { background: rgba(34, 30, 51, .04); color: rgba(34, 30, 51, .7); }

/* The theme gives .kk-btn `display: inline-flex`, which is a stronger
 * selector than the browser's own `[hidden] { display: none }` - so a
 * hidden button stayed visible. Seen in the offline render, 2026-09-11:
 * "Send me a code" sat above the code box after a code had been sent.
 * Scoped to this component rather than made global, so it cannot reach
 * anything else on the site. */
.kk-checkout [hidden] { display: none !important; }

/* Room between the send button and the code step that replaces it. */
[data-kk-otp] { margin-top: 20px; }