/* ══════════════════════════════════════════════════════════════════
   KBC Halal Badge Widget — Front-end Styles
   css/halal-badge.css  |  v1.1.0
   ══════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties — Root defaults (dark scheme) ──────── */
/*
  One set of vars per colour-scheme modifier class lets Elementor's
  colour-picker controls cascade cleanly on top via inline styles.
  All five layout variants and four colour schemes are covered below.
*/

.kbc-halal-badge {
    /* Badge SVG colours — resolved in PHP and passed as inline SVG
       attributes. Exposed here for CSS-only child-theme overrides. */
    --kbc-badge-bg:              #CC0000;
    --kbc-badge-accent:          #FFD700;

    /* Body text colours */
    --kbc-heading-color:         #111111;
    --kbc-subtext-color:         #555555;

    /* Banner-specific colours */
    --kbc-banner-bg:             #111111;
    --kbc-banner-heading-color:  #FFD700;
    --kbc-banner-subtext-color:  rgba(255,255,255,.75);
    --kbc-banner-check-color:    #ffffff;
    --kbc-banner-tick-color:     #22c55e;

    /* Spacing tokens */
    --kbc-gap-h:                 18px;
    --kbc-gap-v:                 14px;
    --kbc-banner-pad:            18px 24px;
    --kbc-banner-radius:         8px;

    display: block;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   COLOUR SCHEMES  (4 options)
   ══════════════════════════════════════════════════════════════════ */

/* 1. Dark — red badge, gold accent (default) */
.kbc-hb-scheme--dark {
    --kbc-badge-bg:              #CC0000;
    --kbc-badge-accent:          #FFD700;
    --kbc-heading-color:         #111111;
    --kbc-subtext-color:         #555555;
    --kbc-banner-heading-color:  #FFD700;
    --kbc-banner-subtext-color:  rgba(255,255,255,.75);
    --kbc-banner-check-color:    #ffffff;
    --kbc-banner-tick-color:     #22c55e;
}

/* 2. Light — white badge, red accent */
.kbc-hb-scheme--light {
    --kbc-badge-bg:              #FFFFFF;
    --kbc-badge-accent:          #CC0000;
    --kbc-heading-color:         #111111;
    --kbc-subtext-color:         #444444;
    --kbc-banner-heading-color:  #CC0000;
    --kbc-banner-subtext-color:  rgba(0,0,0,.60);
    --kbc-banner-check-color:    #111111;
    --kbc-banner-tick-color:     #15803d;
}

/* 3. Gold — gold badge, dark accent */
.kbc-hb-scheme--gold {
    --kbc-badge-bg:              #FFD700;
    --kbc-badge-accent:          #111111;
    --kbc-heading-color:         #111111;
    --kbc-subtext-color:         #333333;
    --kbc-banner-bg:             #7a5c00;
    --kbc-banner-heading-color:  #FFD700;
    --kbc-banner-subtext-color:  rgba(255,255,255,.80);
    --kbc-banner-check-color:    #FFD700;
    --kbc-banner-tick-color:     #90ee90;
}

/* 4. Custom — SVG colours come from PHP/Elementor inline attrs.
      Heading/subtext colours come from Elementor inline styles.
      No additional overrides needed; root defaults act as fallback. */
.kbc-hb-scheme--custom {
    /* Intentionally inherits root defaults; Elementor overwrites via
       inline style="" on .kbc-hb-heading and .kbc-hb-subtext.       */
}

/* ══════════════════════════════════════════════════════════════════
   SHARED TEXT ELEMENTS
   ══════════════════════════════════════════════════════════════════ */

.kbc-hb-heading {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--kbc-heading-color, #111111);
    letter-spacing: -0.01em;
}

.kbc-hb-subtext {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--kbc-subtext-color, #555555);
}

.kbc-hb-text-wrap {
    flex: 1;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ALIGNMENT
   ══════════════════════════════════════════════════════════════════ */

.kbc-hb-align--left   { text-align: left; }
.kbc-hb-align--center { text-align: center; }
.kbc-hb-align--right  { text-align: right; }

.kbc-hb-align--left   .kbc-hb-horizontal-wrap,
.kbc-hb-align--left   .kbc-hb-vertical-wrap   { justify-content: flex-start; }
.kbc-hb-align--center .kbc-hb-horizontal-wrap,
.kbc-hb-align--center .kbc-hb-vertical-wrap   { justify-content: center; }
.kbc-hb-align--right  .kbc-hb-horizontal-wrap,
.kbc-hb-align--right  .kbc-hb-vertical-wrap   { justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════
   SVG / BADGE ICON
   ══════════════════════════════════════════════════════════════════ */

/* Default size fallback */
.kbc-halal-svg {
    display: block;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

/* Size variants */
.kbc-hb-size--small  .kbc-halal-svg { width: 60px;  height: 60px;  }
.kbc-hb-size--medium .kbc-halal-svg { width: 90px;  height: 90px;  }
.kbc-hb-size--large  .kbc-halal-svg { width: 130px; height: 130px; }
.kbc-hb-size--xl     .kbc-halal-svg { width: 180px; height: 180px; }

/* Drop shadow */
.kbc-hb-shadow .kbc-halal-svg {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

/* Hover spin animation */
@keyframes kbc-badge-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.kbc-hb-spin .kbc-hb-icon-wrap:hover .kbc-halal-svg {
    animation: kbc-badge-spin 2.5s linear infinite;
    cursor: default;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS  (5 options)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. HORIZONTAL — badge left, text right ────────────────────── */
.kbc-hb-layout--horizontal .kbc-hb-horizontal-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--kbc-gap-h, 18px);
    flex-wrap: wrap;
}

/* ── 2. VERTICAL — badge above text ────────────────────────────── */
.kbc-hb-layout--vertical .kbc-hb-vertical-wrap {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: var(--kbc-gap-v, 14px);
}

/* Honour alignment for the badge icon in vertical mode */
.kbc-hb-align--center .kbc-hb-layout--vertical .kbc-hb-icon-wrap,
.kbc-hb-align--center .kbc-hb-vertical-wrap     .kbc-hb-icon-wrap {
    align-self: center;
}
.kbc-hb-align--right  .kbc-hb-layout--vertical .kbc-hb-icon-wrap,
.kbc-hb-align--right  .kbc-hb-vertical-wrap     .kbc-hb-icon-wrap {
    align-self: flex-end;
}

/* ── 3. BADGE ONLY — circular badge with no text ───────────────── */
.kbc-hb-layout--badge_only .kbc-hb-icon-wrap {
    display: inline-block;
}

/* ── 4. TEXT ONLY — heading + subtext, no SVG ──────────────────── */
.kbc-hb-layout--text_only .kbc-hb-heading {
    font-size: 1.2rem;
}

/* ── 5. BANNER — full-width strip ──────────────────────────────── */
.kbc-hb-layout--banner .kbc-hb-banner {
    background: var(--kbc-banner-bg, #111111);
    border-radius: var(--kbc-banner-radius, 8px);
    padding: var(--kbc-banner-pad, 18px 24px);
    width: 100%;
    box-sizing: border-box;
}

.kbc-hb-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.kbc-hb-banner-icon {
    flex-shrink: 0;
}

/* Banner overrides badge SVG size */
.kbc-hb-layout--banner .kbc-halal-svg {
    width: 70px;
    height: 70px;
}

.kbc-hb-banner-text {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Banner heading uses its own var so it stays readable on dark bg */
.kbc-hb-banner-text .kbc-hb-heading {
    color: var(--kbc-banner-heading-color, #FFD700);
    font-size: 1.25rem;
    margin: 0;
}

.kbc-hb-banner-text .kbc-hb-subtext {
    color: var(--kbc-banner-subtext-color, rgba(255,255,255,.75));
    font-size: 0.82rem;
    margin: 0;
}

.kbc-hb-banner-checkmarks {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.kbc-hb-check {
    display: block;
    color: var(--kbc-banner-check-color, #ffffff);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Tick character colour — scheme-aware via CSS var */
.kbc-hb-check::first-letter {
    color: var(--kbc-banner-tick-color, #22c55e);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

    /* Horizontal → stack vertically */
    .kbc-hb-layout--horizontal .kbc-hb-horizontal-wrap {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .kbc-hb-text-wrap {
        text-align: center;
    }

    /* Banner → stack vertically */
    .kbc-hb-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .kbc-hb-banner-checkmarks {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    /* Cap XL at 120px to prevent viewport overflow */
    .kbc-hb-size--xl .kbc-halal-svg {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 400px) {
    /* Cap large + XL to medium on very small screens */
    .kbc-hb-size--large .kbc-halal-svg,
    .kbc-hb-size--xl    .kbc-halal-svg {
        width: 90px;
        height: 90px;
    }
}