/* =========================================================
   MYSABUN BUSINESS PACK
   WEBBOOK MASTER STYLES
   Modul 4 — KIRA
   ========================================================= */


/* =========================================================
   1. MASTER VARIABLES
   ========================================================= */

.webbook-page {
    --wb-navy: #08275f;
    --wb-blue: #168ee5;
    --wb-cyan: #49bde8;
    --wb-pink: #f72585;
    --wb-pink-dark: #df1f72;
    --wb-purple: #7654f6;
    --wb-green: #18b978;
    --wb-yellow: #f5ad26;

    --wb-text: #17345f;
    --wb-muted: #647b9b;

    --wb-border: #cfe0f3;
    --wb-border-soft: #e4edf7;

    --wb-bg-blue: #edf8ff;
    --wb-bg-pink: #fff0f7;
    --wb-bg-purple: #f3efff;
    --wb-bg-green: #edfff6;
    --wb-bg-yellow: #fff9eb;

    --wb-shadow:
        0 8px 24px rgba(36, 73, 126, 0.07);

    width: 100%;
    color: var(--wb-text);
}


.webbook-page *,
.webbook-page *::before,
.webbook-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   2. DESKTOP WEBBOOK LAYOUT
   ========================================================= */

.webbook-layout {
    width: 100%;
    max-width: 1030px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 770px)
        220px;

    justify-content: center;
    align-items: start;

    gap: 18px;
}


.webbook-main {
    min-width: 0;
    width: 100%;
}


.webbook-rail {
    min-width: 0;

    position: sticky;
    top: 18px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}


/* =========================================================
   3. HERO
   ========================================================= */

.webbook-hero {
    position: relative;

    min-height: 225px;

    display: flex;
    align-items: center;

    overflow: hidden;

    margin-bottom: 14px;

    border: 1px solid #d8e7f5;
    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 247, 252, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 50%,
            rgba(238, 248, 255, 0.80) 100%
        ),
        url("https://mysabun.com/wp-content/uploads/2026/09/kira-header.png")
        right center / cover no-repeat;

    box-shadow: var(--wb-shadow);
}


.webbook-hero-inner {
    position: relative;
    z-index: 2;

    width: 64%;

    padding: 28px 30px;
}


.webbook-eyebrow {
    display: inline-flex;

    margin-bottom: 8px;
    padding: 5px 10px;

    border-radius: 999px;

    background: #ffe4f1;
    color: var(--wb-pink);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.webbook-hero h1 {
    margin: 0 0 8px;

    color: var(--wb-navy);

    font-size: 30px;
    line-height: 1.12;
    font-weight: 800;
}


.webbook-hero-subtitle {
    margin: 0;

    max-width: 510px;

    color: #4f6c91;

    font-size: 13px;
    line-height: 1.55;
}


.webbook-hero-note {
    display: inline-flex;

    margin-top: 13px;
    padding: 7px 11px;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #ffd5e7;

    color: var(--wb-pink-dark);

    font-size: 10.5px;
    font-weight: 750;
}


/* =========================================================
   4. JOURNEY
   ========================================================= */

.webbook-journey {
    margin-bottom: 14px;

    padding: 13px 16px;

    border: 1px solid var(--wb-border);
    border-radius: 15px;

    background: #ffffff;

    box-shadow: var(--wb-shadow);
}


.webbook-journey-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 6px;
}


.webbook-step {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    text-align: center;
}


.webbook-step:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 16px;
    left: calc(50% + 21px);

    width: calc(100% - 42px);
    height: 1px;

    background: #d8e6f4;
}


.webbook-step-icon {
    position: relative;
    z-index: 2;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f5f9fe;
    border: 1px solid #d3e3f4;

    color: var(--wb-blue);
}


.webbook-step:nth-child(2) .webbook-step-icon {
    color: var(--wb-pink);
    background: var(--wb-bg-pink);
}


.webbook-step:nth-child(3) .webbook-step-icon {
    color: var(--wb-purple);
    background: var(--wb-bg-purple);
}


.webbook-step:nth-child(4) .webbook-step-icon {
    color: var(--wb-green);
    background: var(--wb-bg-green);
}


.webbook-step:nth-child(5) .webbook-step-icon {
    color: var(--wb-blue);
    background: var(--wb-bg-blue);
}


.webbook-step-title {
    color: #456487;

    font-size: 9px;
    line-height: 1.25;
    font-weight: 700;
}


/* =========================================================
   5. GENERAL SECTION
   ========================================================= */

.webbook-section,
.webbook-case {
    margin-bottom: 14px;

    padding: 15px;

    border: 1px solid var(--wb-border);
    border-radius: 15px;

    background: #ffffff;

    box-shadow: var(--wb-shadow);
}


.webbook-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.webbook-section-title,
.webbook-case-title {
    margin: 0;

    display: flex;
    align-items: center;

    gap: 6px;

    color: var(--wb-navy);

    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
}


.webbook-section-badge {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 999px;

    background: #fff5e9;
    color: #bc7414;

    font-size: 9px;
    font-weight: 750;
}


.webbook-section-badge span {
    display: inline-flex;
}


.webbook-case > p {
    margin: 8px 0;

    color: #526d90;

    font-size: 11.5px;
    line-height: 1.55;
}


/* =========================================================
   6. CALLOUTS
   ========================================================= */

.webbook-tip,
.webbook-warning,
.webbook-formula,
.webbook-example {
    margin-top: 9px;
    padding: 9px 11px;

    border-radius: 9px;

    font-size: 10.5px;
    line-height: 1.5;
}


.webbook-tip {
    border-left: 3px solid var(--wb-blue);

    background: var(--wb-bg-blue);
    color: #315f8c;
}


.webbook-warning {
    border-left: 3px solid var(--wb-pink);

    background: #fff1f6;
    color: #80445e;
}


.webbook-formula {
    border: 1px solid #d9cffd;

    background: var(--wb-bg-purple);
    color: #584391;
}


.webbook-example {
    border: 1px solid #d5eadf;

    background: var(--wb-bg-green);
    color: #32735a;
}


/* =========================================================
   7. ISTILAH CARDS
   ========================================================= */

.webbook-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.webbook-topic-card {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--wb-border);
    border-radius: 12px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.webbook-topic-card:hover {
    border-color: #afcceb;

    box-shadow:
        0 5px 16px rgba(30, 74, 130, 0.06);
}


.webbook-topic-card[open] {
    grid-column: 1 / -1;
}


.webbook-topic-card summary {
    list-style: none;
}


.webbook-topic-card summary::-webkit-details-marker {
    display: none;
}


.webbook-topic-card summary::marker {
    content: "";
}


.webbook-topic-top {
    position: relative;

    min-height: 82px;

    display: grid;

    grid-template-columns:
        27px
        35px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    padding: 10px;

    cursor: pointer;
}


.webbook-topic-top::after {
    content: "›";

    position: absolute;

    right: 9px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    color: #8fa5c0;

    font-size: 17px;

    transition: transform 0.2s ease;
}


.webbook-topic-card[open]
.webbook-topic-top::after {
    transform:
        translateY(-50%)
        rotate(-90deg);
}


.webbook-topic-number {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--wb-pink);

    font-size: 10px;
    font-weight: 800;
}


.webbook-topic-card.is-purple
.webbook-topic-number {
    background: var(--wb-purple);
}


.webbook-topic-card.is-blue
.webbook-topic-number,
.webbook-topic-card.is-cyan
.webbook-topic-number {
    background: var(--wb-blue);
}


.webbook-topic-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #f7faff;
}


.webbook-topic-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding-right: 14px;
}


.webbook-topic-title {
    color: var(--wb-navy);

    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 800;
}


.webbook-topic-desc {
    color: #7185a1;

    font-size: 9.5px;
    line-height: 1.35;
}


.webbook-topic-card.is-blue
.webbook-topic-top {
    background:
        linear-gradient(135deg, #ffffff, #f2f9ff);
}


.webbook-topic-card.is-pink
.webbook-topic-top {
    background:
        linear-gradient(135deg, #ffffff, #fff4f9);
}


.webbook-topic-card.is-purple
.webbook-topic-top {
    background:
        linear-gradient(135deg, #ffffff, #f7f3ff);
}


.webbook-topic-card.is-cyan
.webbook-topic-top {
    background:
        linear-gradient(135deg, #ffffff, #effbff);
}


.webbook-detail-card {
    padding: 3px 14px 14px;

    border-top: 1px solid #e5edf6;

    background: #ffffff;

    color: #496788;

    font-size: 11px;
    line-height: 1.55;
}


.webbook-detail-card p {
    margin: 9px 0;
}


.webbook-detail-card h4 {
    margin: 12px 0 5px;

    color: var(--wb-navy);

    font-size: 11px;
}


.webbook-detail-card ul {
    margin: 6px 0;
    padding-left: 18px;
}


.webbook-detail-card li {
    margin-bottom: 4px;
}


/* =========================================================
   8. MINI CASE STUDY
   ========================================================= */

.kira-mini-study-launcher {
    margin-bottom: 14px;
}


.webbook-case-study-intro {
    padding: 14px;

    border: 1px solid #cae0f4;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 52%,
            #fff5fa 100%
        );

    box-shadow: var(--wb-shadow);
}


.webbook-case-study-heading {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 7px;
}


.webbook-case-study-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--wb-bg-blue);
}


.webbook-case-study-label {
    display: block;

    margin-bottom: 2px;

    color: var(--wb-pink);

    font-size: 8.5px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 800;
}


.webbook-case-study-intro > p {
    margin: 7px 0 10px;

    color: #557293;

    font-size: 10.5px;
    line-height: 1.5;
}


.webbook-case-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 6px;

    margin: 9px 0;
}


.webbook-case-preview-item {
    padding: 8px;

    border: 1px solid #dce8f4;
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.86);
}


.webbook-case-preview-item span {
    display: block;

    margin-bottom: 2px;

    color: #7489a4;

    font-size: 8.5px;
}


.webbook-case-preview-item strong {
    color: var(--wb-navy);

    font-size: 11px;
}


.webbook-case-preview-item.is-highlight {
    border-color: #f7bfd7;

    background: #fff1f7;
}


.webbook-case-preview-item.is-highlight strong {
    color: var(--wb-pink);
}


.webbook-case-study-button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 9px;
    padding: 9px 12px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #f44a9b,
            #f72585
        );

    color: #ffffff;

    font-family: inherit;
    font-size: 10.5px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 5px 12px rgba(247, 37, 133, 0.17);
}


.webbook-case-study-button span {
    display: inline-flex;
}


.webbook-case-study-button:hover {
    filter: brightness(0.98);
}


.webbook-case-study-hint {
    margin: 5px 0 0 !important;

    text-align: center;

    color: #8698ae !important;

    font-size: 8.5px !important;
}


/* =========================================================
   9. CASE STUDY POPUP
   ========================================================= */

.webbook-image-dialog {
    width: min(920px, 94vw);
    max-height: 92vh;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 16px;

    background: transparent;

    box-shadow:
        0 24px 70px rgba(16, 42, 82, 0.25);
}


.webbook-image-dialog::backdrop {
    background:
        rgba(12, 31, 59, 0.72);

    backdrop-filter: blur(3px);
}


.webbook-image-dialog-panel {
    max-height: 92vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;
}


.webbook-image-dialog-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 12px 15px;

    border-bottom: 1px solid #e0e9f3;
}


.webbook-image-dialog-header h2 {
    margin: 2px 0 0;

    color: var(--wb-navy);

    font-size: 15px;
    line-height: 1.3;
}


.webbook-dialog-close {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d3e0ee;
    border-radius: 50%;

    background: #ffffff;
    color: #466584;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}


.webbook-dialog-close:hover {
    border-color: #f1a7c7;

    background: #fff2f7;
    color: var(--wb-pink);
}


.webbook-image-dialog-body {
    flex: 1 1 auto;

    overflow: auto;

    padding: 14px;

    text-align: center;

    background: #f5f8fc;
}


.webbook-case-study-image {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;

    transform-origin: top center;
}


.webbook-image-dialog-footer {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 14px;

    border-top: 1px solid #e0e9f3;

    background: #ffffff;

    color: #6d8098;

    font-size: 9.5px;
    line-height: 1.4;
}


.webbook-dialog-done {
    padding: 7px 14px;

    border: 0;
    border-radius: 8px;

    background: var(--wb-navy);
    color: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


/* Support untuk popup zoom yang sudah dibuat sebelum ini */

.webbook-zoom-controls,
.webbook-image-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


.webbook-zoom-button,
.webbook-image-zoom-button {
    min-width: 30px;
    height: 28px;

    padding: 0 7px;

    border: 1px solid #cad9e9;
    border-radius: 7px;

    background: #ffffff;
    color: var(--wb-navy);

    font-size: 11px;

    cursor: pointer;
}


.webbook-zoom-value,
.webbook-image-zoom-value {
    min-width: 44px;

    text-align: center;

    color: #526b8b;

    font-size: 9.5px;
    font-weight: 700;
}


/* =========================================================
   10. CALCULATOR OUTER CARD
   ========================================================= */

.webbook-calculator {
    margin-bottom: 14px;

    padding: 14px;

    border: 1px solid #ffbcd9;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #fffafb 0%,
            #ffffff 45%,
            #f3fbff 100%
        );

    box-shadow: var(--wb-shadow);
}


.webbook-tool-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}


.webbook-tool-title {
    margin: 0;

    color: var(--wb-navy);

    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}


.webbook-tool-desc {
    margin: 3px 0 0;

    color: #687f9e;

    font-size: 9.5px;
    line-height: 1.4;
}


.webbook-tool-badge {
    flex: 0 0 auto;

    padding: 5px 9px;

    border-radius: 999px;

    background: #ffe4f1;
    color: var(--wb-pink);

    font-size: 8px;
    line-height: 1;
    font-weight: 800;
}


/* Buang spacing generic module lama */

.webbook-calculator > .module-section,
.webbook-section > .module-section {
    margin: 0 !important;
    padding: 0 !important;
}


.webbook-calculator
.kira-soap-calculator.builder-card {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   11. CALCULATOR OPEN / CLOSE
   ========================================================= */

.kira-soap-details {
    width: 100%;

    margin: 0;
}


.kira-soap-launcher {
    list-style: none !important;

    display: grid;

    grid-template-columns:
        35px
        minmax(0, 1fr)
        28px;

    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 9px 11px;

    border: 1px solid #cddff2;
    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #fff7fb 0%,
            #ffffff 55%,
            #f3f9ff 100%
        );

    cursor: pointer;
}


.kira-soap-launcher::-webkit-details-marker {
    display: none !important;
}


.kira-soap-launcher::marker {
    content: "" !important;
    display: none !important;
}


.kira-soap-launcher-icon {
    width: 33px;
    height: 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #ffe5f1;
    color: var(--wb-pink);
}


.kira-soap-launcher-icon svg {
    width: 19px;
    height: 19px;
}


.kira-soap-launcher-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 1px;
}


.kira-soap-launcher-eyebrow {
    display: none !important;
}


.kira-soap-launcher-copy strong {
    color: var(--wb-navy);

    font-size: 11.5px;
    line-height: 1.25;
}


.kira-soap-launcher-copy small {
    color: #7386a1;

    font-size: 8.5px;
    line-height: 1.3;
}


.kira-soap-launcher-action {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f3f8fe;
    color: #315d90;
}


.kira-soap-launcher-text {
    display: none !important;
}


/*
   SVG asal menghala kanan.
   Rotate 90deg supaya hanya nampak ▼.
*/

.kira-soap-launcher-action svg {
    width: 17px;
    height: 17px;

    transform: rotate(90deg);
}


/*
   Bila terbuka, summary hilang terus.
   Jadi TIADA arrow kedua.
   Tutup guna ×.
*/

.kira-soap-details[open]
> .kira-soap-launcher {
    display: none !important;
}


.kira-soap-details-body {
    width: 100%;

    padding: 0 !important;
}


/* =========================================================
   12. OPEN CALCULATOR HEADER
   ========================================================= */

.kira-soap-open-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
    padding: 9px 10px;

    border: 1px solid #ffd0e4;
    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #fff6fa,
            #ffffff
        );
}


.kira-active-label {
    display: inline-flex;

    margin-bottom: 2px;
    padding: 3px 6px;

    border-radius: 999px;

    background: #ffe5f1;
    color: var(--wb-pink);

    font-size: 7.5px;
    line-height: 1;
    font-weight: 800;
}


.kira-soap-open-header h3 {
    margin: 2px 0;

    color: var(--wb-navy);

    font-size: 13px;
    line-height: 1.2;
}


.kira-soap-open-header p {
    max-width: 570px;

    margin: 0;

    color: #70839d;

    font-size: 8.5px;
    line-height: 1.35;
}


.kira-close-calculator {
    flex: 0 0 auto;

    width: 29px;
    height: 29px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d0dfed;
    border-radius: 50%;

    background: #ffffff;
    color: #335a83;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}


.kira-close-calculator:hover {
    border-color: #f3a3c5;

    background: #fff0f6;
    color: var(--wb-pink);
}


/* =========================================================
   13. CALCULATOR SECTIONS
   ========================================================= */

.kira-soap-section {
    display: grid !important;

    grid-template-columns:
        29px
        minmax(0, 1fr);

    align-items: start;

    gap: 8px;

    margin: 0 0 8px !important;
    padding: 9px !important;

    border: 1px solid #d4e2f2;
    border-radius: 10px;

    background: #ffffff;
}


.kira-ui-step-number {
    width: 29px !important;
    height: 29px !important;

    min-width: 29px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--wb-pink);
    color: #ffffff;

    font-size: 10px;
    line-height: 1;
    font-weight: 800;

    box-shadow:
        0 4px 9px rgba(247, 37, 133, 0.16);
}


.kira-ui-step-number.is-purple {
    background: var(--wb-purple);
}


.kira-ui-section-content {
    min-width: 0;
}


.kira-ui-section-heading {
    margin-bottom: 6px !important;
}


.kira-ui-section-heading h3 {
    margin: 0;

    color: var(--wb-navy);

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
}


.kira-ui-section-heading p {
    margin: 1px 0 0;

    color: #71839c;

    font-size: 8.5px;
    line-height: 1.3;
}


/* =========================================================
   14. PRODUCT INPUTS — 2 COLUMN
   ========================================================= */

.kira-ui-input-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;
}


.kira-ui-input-card {
    min-height: 0 !important;

    padding: 7px !important;

    border: 1px solid #d2e1f1 !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    box-shadow: none !important;
}


.kira-ui-field-head {
    display: flex;
    align-items: center;

    gap: 6px !important;

    margin-bottom: 4px !important;
}


.kira-ui-field-icon {
    flex: 0 0 auto;

    width: 24px !important;
    height: 24px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;
}


.kira-ui-field-icon svg {
    width: 14px !important;
    height: 14px !important;
}


.kira-ui-field-icon.is-blue {
    background: #eaf6ff;
    color: var(--wb-blue);
}


.kira-ui-field-icon.is-purple {
    background: #f1edff;
    color: var(--wb-purple);
}


/*
   Puan mahu compact.
   Penerangan dalam setiap card tidak perlu.
*/

.kira-ui-input-card .form-hint {
    display: none !important;
}


/* =========================================================
   15. PRODUCTION COST GRID — COMPACT 2 COLUMN
   ========================================================= */

.kira-production-cost-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;
}


.kira-production-cost-card {
    min-height: 0 !important;

    padding: 7px !important;

    border: 1px solid #d2e1f1 !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    box-shadow: none !important;
}


.kira-production-head {
    display: flex;
    align-items: center;

    gap: 6px !important;

    margin: 0 0 4px !important;
}


.kira-production-icon {
    flex: 0 0 auto;

    width: 24px !important;
    height: 24px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;
}


.kira-production-icon svg {
    width: 14px !important;
    height: 14px !important;
}


.kira-production-icon.is-green {
    background: #eafbf3;
    color: var(--wb-green);
}


.kira-production-icon.is-pink {
    background: #fff0f7;
    color: var(--wb-pink);
}


.kira-production-icon.is-purple {
    background: #f2edff;
    color: var(--wb-purple);
}


.kira-production-icon.is-yellow {
    background: #fff6e6;
    color: #ed9d16;
}


.kira-production-icon.is-blue {
    background: #eaf6ff;
    color: var(--wb-blue);
}


/*
   Buang ayat kecil setiap bahan.
   Ini yang menjadikan form lama panjang.
*/

.kira-production-cost-card
.form-hint {
    display: none !important;
}


/* =========================================================
   16. INPUT LABELS
   ========================================================= */

.kira-soap-calculator .form-label {
    display: block;

    margin: 0 !important;

    color: var(--wb-navy) !important;

    font-size: 9.5px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}


/* =========================================================
   17. MONEY / UNIT INPUTS
   ========================================================= */

.kira-money-input,
.kira-unit-input {
    width: 100%;

    height: 33px !important;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    border: 1px solid #bfd3eb !important;
    border-radius: 7px !important;

    background: #ffffff !important;
}


.kira-money-input .form-input,
.kira-unit-input .form-input {
    min-width: 0 !important;

    width: 100% !important;

    height: 31px !important;
    min-height: 31px !important;

    margin: 0 !important;
    padding: 4px 8px !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    background: #ffffff !important;

    color: var(--wb-navy);

    font-family: inherit;
    font-size: 10.5px !important;
    font-weight: 600;
}


.kira-money-input .form-input:focus,
.kira-unit-input .form-input:focus {
    background: #fafdff !important;

    box-shadow:
        inset 0 0 0 1px var(--wb-blue) !important;
}


.kira-input-prefix,
.kira-unit-suffix {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    background: #f2f8fe;

    color: var(--wb-navy);

    font-size: 9.5px;
    line-height: 1;
    font-weight: 800;
}


.kira-input-prefix {
    border-right: 1px solid #d5e2ef;
}


.kira-unit-suffix {
    border-left: 1px solid #d5e2ef;
}


/* =========================================================
   18. BATCH WEIGHT
   ========================================================= */

.kira-batch-weight {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 6px !important;
    padding: 6px 8px !important;

    border: 1px solid #d7eafb;
    border-radius: 7px;

    background: #eef8ff;
}


.kira-batch-weight-icon {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--wb-blue);
}


.kira-batch-weight-icon svg {
    width: 14px;
    height: 14px;
}


.kira-batch-weight > div {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 4px;
}


.kira-batch-weight span {
    color: #527398;

    font-size: 8.5px;
}


.kira-batch-weight strong {
    color: var(--wb-navy);

    font-size: 9.5px;
}


.kira-batch-weight small {
    margin-left: auto;

    color: #8799af;

    font-size: 7.5px;
}


/* =========================================================
   19. CARA KIRA BOX
   ========================================================= */

.kira-calculation-info {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 6px !important;
    padding: 6px 8px !important;

    border-radius: 7px;

    background: #eef8ff;
}


.kira-calculation-info-icon {
    flex: 0 0 auto;

    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--wb-blue);
}


.kira-calculation-info-icon svg {
    width: 15px;
    height: 15px;
}


.kira-calculation-info strong {
    color: var(--wb-navy);

    font-size: 8.5px;
}


.kira-calculation-info p {
    margin: 0 !important;

    color: #577696;

    font-size: 8px !important;
    line-height: 1.35;
}


/* =========================================================
   20. MARGIN
   ========================================================= */

.kira-margin-row {
    display: grid !important;

    grid-template-columns:
        27px
        minmax(140px, 185px)
        minmax(0, 1fr);

    align-items: center;

    gap: 8px !important;
}


.kira-margin-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #f2edff;
    color: var(--wb-purple);
}


.kira-margin-icon svg {
    width: 16px;
    height: 16px;
}


.kira-margin-field .form-hint {
    margin: 3px 0 0 !important;

    color: #758aa4;

    font-size: 7.5px !important;
    line-height: 1.3;
}


.kira-margin-explain {
    padding: 7px 8px;

    border: 1px solid #e0d9fa;
    border-radius: 7px;

    background: #faf8ff;
}


.kira-margin-explain strong {
    display: block;

    color: var(--wb-navy);

    font-size: 8.5px;
}


.kira-margin-explain span {
    display: block;

    margin-top: 2px;

    color: #76839b;

    font-size: 7.5px;
}


/* =========================================================
   21. BOTTOM CLOSE BUTTON
   ========================================================= */

.kira-close-bottom {
    width: 100%;

    margin: 0 0 8px;
    padding: 7px 10px;

    border: 1px solid #efb1cd;
    border-radius: 8px;

    background: #fff4f9;
    color: var(--wb-pink-dark);

    font-family: inherit;
    font-size: 9.5px;
    font-weight: 750;

    cursor: pointer;
}


.kira-close-bottom:hover {
    background: #ffe9f3;
}


/* =========================================================
   22. CALCULATOR RESULTS
   ========================================================= */

.kira-results-master {
    margin-top: 9px;

    padding: 11px;

    border: 1px solid #c9dcf2;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #eff9ff,
            #ffffff 45%,
            #fff4fa
        );
}


.kira-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 9px;

    margin-bottom: 8px;
}


.kira-results-heading > div {
    display: flex;
    align-items: center;

    gap: 7px;
}


.kira-results-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #edf7ff;
    color: var(--wb-blue);
}


.kira-results-icon svg {
    width: 17px;
    height: 17px;
}


.kira-results-heading h3 {
    margin: 0;

    color: var(--wb-navy);

    font-size: 13px;
    line-height: 1.2;
}


.kira-results-heading p {
    margin: 1px 0 0;

    color: #70839b;

    font-size: 8px;
    line-height: 1.3;
}


.kira-results-auto-label {
    padding: 4px 7px;

    border: 1px solid #bcd9f7;
    border-radius: 999px;

    background: #ffffff;
    color: var(--wb-blue);

    font-size: 7px;
    line-height: 1;
    font-weight: 800;
}


.kira-main-results {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 7px !important;
}


.kira-main-result-card {
    min-width: 0;

    min-height: 92px;

    display: flex;
    align-items: flex-start;

    gap: 6px;

    padding: 8px;

    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 9px;
}


.kira-main-result-card.is-blue {
    background: #eaf7ff;
}


.kira-main-result-card.is-pink {
    background: #fff0f7;
}


.kira-main-result-card.is-purple {
    background: #f2edff;
}


.kira-main-result-card.is-green {
    background: #ebfff4;
}


.kira-result-icon {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.72);
}


.is-blue .kira-result-icon {
    color: var(--wb-blue);
}


.is-pink .kira-result-icon {
    color: var(--wb-pink);
}


.is-purple .kira-result-icon {
    color: var(--wb-purple);
}


.is-green .kira-result-icon {
    color: var(--wb-green);
}


.kira-result-icon svg {
    width: 16px;
    height: 16px;
}


.kira-main-result-card > div {
    min-width: 0;
}


.kira-main-result-label {
    min-height: 24px;

    display: block;

    color: var(--wb-navy);

    font-size: 7.5px;
    line-height: 1.25;
    font-weight: 800;
}


.kira-main-result-card strong {
    display: block;

    margin: 4px 0 3px;

    color: var(--wb-navy);

    font-size: 14px;
    line-height: 1.1;
    font-weight: 800;
}


.kira-main-result-card small {
    display: block;

    color: #71849c;

    font-size: 7px;
    line-height: 1.25;
}


/* =========================================================
   23. RESULT NOTE
   ========================================================= */

.kira-results-note {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    margin-top: 8px;
    padding: 8px 9px;

    border-radius: 9px;

    background: #fff1f7;
}


.kira-results-note-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--wb-pink);
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
}


.kira-results-note strong {
    display: block;

    color: var(--wb-navy);

    font-size: 8.5px;
}


.kira-results-note p {
    margin: 2px 0 0;

    color: #657a98;

    font-size: 7.5px;
    line-height: 1.35;
}


.kira-results-quote {
    color: var(--wb-pink);

    text-align: right;

    font-size: 8px;
    line-height: 1.25;
    font-weight: 800;
    font-style: italic;
}


/* =========================================================
   24. GENERIC BUILDER CARDS
   Market / Offer / Summary
   ========================================================= */

.webbook-section .builder-card {
    padding: 12px !important;

    border: 1px solid var(--wb-border) !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    box-shadow: none !important;
}


.webbook-section .builder-helper {
    margin: 0 0 9px;

    color: #627a99;

    font-size: 9.5px;
    line-height: 1.45;
}


.webbook-section .form-field {
    min-width: 0;
}


.webbook-section .form-label {
    display: block;

    margin-bottom: 4px;

    color: var(--wb-navy);

    font-size: 9px;
    font-weight: 750;
}


.webbook-section .form-input {
    width: 100%;

    min-height: 34px;

    padding: 6px 8px;

    border: 1px solid #c8d9eb;
    border-radius: 7px;

    background: #ffffff;
    color: var(--wb-navy);

    font-family: inherit;
    font-size: 10px;
}


.webbook-section .form-input:focus {
    outline: 0;

    border-color: var(--wb-blue);

    box-shadow:
        0 0 0 2px rgba(22, 142, 229, 0.08);
}


.kira-cost-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


.kira-market-display {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 9px;
    padding: 8px 10px;

    border-radius: 8px;

    background: var(--wb-bg-blue);
}


.kira-market-label {
    color: #557393;

    font-size: 9px;
}


.kira-market-value {
    color: var(--wb-navy);

    font-size: 13px;
    font-weight: 800;
}


.webbook-section .callout {
    margin: 8px 0;
    padding: 8px 10px;

    border-radius: 8px;

    font-size: 9px;
    line-height: 1.4;
}


.webbook-section .callout-info {
    border-left: 3px solid var(--wb-blue);

    background: var(--wb-bg-blue);
    color: #476c93;
}


/* =========================================================
   25. OFFER RESULTS
   ========================================================= */

.kira-result-card {
    margin-top: 9px;
    padding: 9px;

    border-radius: 9px;

    background: #f6f9fc;
}


.kira-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 6px 0;

    border-bottom: 1px solid #e1e9f2;
}


.kira-result-row:last-child {
    border-bottom: 0;
}


.kira-result-label {
    color: #627894;

    font-size: 9px;
}


.kira-result-value {
    color: var(--wb-navy);

    font-size: 10px;
    font-weight: 800;
}


.kira-status {
    padding: 4px 7px;

    border-radius: 999px;

    background: #edf2f8;
    color: #526c89;

    font-size: 8px;
    font-weight: 800;
}


.kira-status[data-status="positive"] {
    background: #e9fff4;
    color: #128052;
}


.kira-status[data-status="thin"] {
    background: #fff7df;
    color: #a76b00;
}


.kira-status[data-status="negative"] {
    background: #fff0f2;
    color: #be3046;
}


/* =========================================================
   26. KIRA SUMMARY
   ========================================================= */

.kira-summary h3 {
    margin: 0 0 8px;

    color: var(--wb-navy);

    font-size: 13px;
}


.kira-summary-content {
    overflow: hidden;

    border: 1px solid #d9e4ef;
    border-radius: 9px;
}


.kira-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 7px 9px;

    border-bottom: 1px solid #e8eef5;
}


.kira-summary-row:last-child {
    border-bottom: 0;
}


.kira-summary .summary-label {
    color: #627997;

    font-size: 8.5px;
}


.kira-summary .summary-value {
    color: var(--wb-navy);

    font-size: 9.5px;
    font-weight: 800;
}


.kira-divider-sm {
    display: none;
}


/* =========================================================
   27. WARNING
   ========================================================= */

.kira-warning {
    margin-top: 8px;
    padding: 7px 9px;

    border: 1px solid #ffc5cf;
    border-radius: 8px;

    background: #fff2f4;
    color: #a83d4c;

    font-size: 9px;
}


/* =========================================================
   28. RIGHT RAIL
   ========================================================= */

.webbook-progress {
    padding: 10px;

    border: 1px solid #d5e2ef;
    border-radius: 11px;

    background: #ffffff;

    box-shadow: var(--wb-shadow);
}


.webbook-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;

    color: #536e90;

    font-size: 8.5px;
    font-weight: 700;
}


.webbook-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #e7edf5;
}


.webbook-progress-bar {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--wb-blue),
            var(--wb-purple)
        );
}


.webbook-rail-card {
    padding: 11px;

    border: 1px solid #d6e3f0;
    border-radius: 11px;

    background: #ffffff;

    box-shadow: var(--wb-shadow);
}


.webbook-rail-card.is-quote {
    text-align: center;

    border-color: #f8d2e4;

    background:
        linear-gradient(
            145deg,
            #fff4f9,
            #ffffff
        );
}


.webbook-rail-card.is-note {
    background:
        linear-gradient(
            145deg,
            #eef9ff,
            #ffffff
        );
}


.webbook-quote {
    margin: 3px 0 6px;

    color: var(--wb-pink);

    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    font-style: italic;
}


.webbook-quote-source {
    color: #8090a4;

    font-size: 8px;
}


.webbook-rail-title {
    margin: 0 0 7px;

    color: var(--wb-navy);

    font-size: 10.5px;
    line-height: 1.3;
}


.webbook-rail-text {
    margin: 5px 0;

    color: #627995;

    font-size: 8.5px;
    line-height: 1.5;
}


.webbook-rail-text strong {
    color: var(--wb-navy);

    font-size: 10.5px;
}


.webbook-rail-card hr {
    margin: 7px 0;

    border: 0;
    border-top: 1px solid #e5edf5;
}


/* =========================================================
   29. SIGNATURE
   ========================================================= */

.webbook-signature {
    padding: 11px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #fff1f7,
            #ffffff
        );

    color: var(--wb-pink);

    text-align: center;

    font-size: 9px;
    line-height: 1.45;
    font-weight: 750;
    font-style: italic;
}


/* =========================================================
   30. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .webbook-layout {
        max-width: 790px;

        grid-template-columns:
            minmax(0, 1fr);
    }


    .webbook-rail {
        position: static;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .webbook-progress {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   31. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .webbook-layout {
        display: block;
    }


    .webbook-hero {
        min-height: 190px;
    }


    .webbook-hero-inner {
        width: 80%;

        padding: 22px 20px;
    }


    .webbook-hero h1 {
        font-size: 25px;
    }


    .webbook-journey-track {
        grid-template-columns:
            repeat(5, minmax(58px, 1fr));

        overflow-x: auto;
    }


    .webbook-card-grid {
        grid-template-columns:
            1fr;
    }


    .webbook-topic-card[open] {
        grid-column: auto;
    }


    .webbook-case-preview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
       Kekalkan 2 kolum selagi skrin masih cukup.
       Ini ikut kehendak puan supaya tidak panjang.
    */

    .kira-ui-input-grid,
    .kira-production-cost-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .kira-main-results {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .kira-margin-row {
        grid-template-columns:
            27px
            minmax(0, 1fr);
    }


    .kira-margin-explain {
        grid-column: 2;
    }


    .webbook-rail {
        grid-template-columns:
            1fr;
    }


    .webbook-progress {
        grid-column: auto;
    }

}


/* =========================================================
   32. RESPONSIVE — SMALL PHONE
   ========================================================= */

@media (max-width: 460px) {

    .webbook-hero-inner {
        width: 100%;
    }


    .webbook-hero {
        background:
            linear-gradient(
                135deg,
                #fff4f9,
                #f0f9ff
            );
    }


    .webbook-section,
    .webbook-case,
    .webbook-calculator {
        padding: 11px;
    }


    .webbook-section-header,
    .webbook-tool-header {
        align-items: flex-start;
    }


    .webbook-section-badge,
    .webbook-tool-badge {
        display: none;
    }


    .kira-ui-input-grid,
    .kira-production-cost-grid {
        grid-template-columns:
            1fr !important;
    }


    .kira-main-results {
        grid-template-columns:
            1fr !important;
    }


    .kira-results-note {
        grid-template-columns:
            27px
            minmax(0, 1fr);
    }


    .kira-results-quote {
        display: none;
    }


    .kira-batch-weight {
        flex-wrap: wrap;
    }


    .kira-batch-weight small {
        width: 100%;

        margin-left: 28px;
    }


    .kira-cost-grid {
        grid-template-columns:
            1fr;
    }


    .webbook-image-dialog-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================================
   FINAL POLISH — MOBILE + DESKTOP UI IMPROVEMENT
   - kecilkan zoom control
   - kecilkan logo desktop
   - hasil kiraan 2 kolum
   - kad hasil lebih pekat & cantik
   - input style ikut reference
========================================================= */

/* ---------------------------------------------------------
   1) LOGO DESKTOP KECIL SIKIT
--------------------------------------------------------- */
.header-brand-logo {
    width: 190px;
    max-width: 190px;
    max-height: 54px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 639px) {
    .header-brand-logo {
        width: 170px;
        max-width: 170px;
        max-height: 50px;
    }
}

/* ---------------------------------------------------------
   2) POPUP ZOOM CONTROL — KECILKAN
--------------------------------------------------------- */
.webbook-image-dialog-header {
    padding: 12px 16px;
}

.webbook-image-dialog-header h2 {
    font-size: 0.94rem;
    line-height: 1.25;
}

.webbook-image-zoom-controls,
.webbook-zoom-controls,
.kira-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 5px 8px;

    border: 1px solid #d8e4ef;
    border-radius: 12px;

    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 10px rgba(24, 57, 92, 0.06);
}

.webbook-image-zoom-controls button,
.webbook-zoom-controls button,
.kira-zoom-controls button {
    width: 34px;
    height: 34px;

    border: 1px solid #cddbea;
    border-radius: 10px;

    background: #ffffff;
    color: #173254;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;
}

.webbook-image-zoom-controls span,
.webbook-zoom-controls span,
.kira-zoom-controls span {
    min-width: 52px;
    text-align: center;

    font-size: 0.92rem;
    font-weight: 800;
    color: #173254;
}

.webbook-dialog-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 1.2rem;
}

@media (max-width: 639px) {
    .webbook-image-dialog-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .webbook-image-dialog-header h2 {
        font-size: 0.86rem;
    }

    .webbook-image-zoom-controls,
    .webbook-zoom-controls,
    .kira-zoom-controls {
        gap: 6px;
        padding: 4px 6px;
        border-radius: 10px;
    }

    .webbook-image-zoom-controls button,
    .webbook-zoom-controls button,
    .kira-zoom-controls button {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .webbook-image-zoom-controls span,
    .webbook-zoom-controls span,
    .kira-zoom-controls span {
        min-width: 40px;
        font-size: 0.82rem;
    }

    .webbook-dialog-close {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 1.05rem;
    }
}

/* ---------------------------------------------------------
   3) STAIL KALCULATOR — IKUT LOOK REFERENCE
--------------------------------------------------------- */
.webbook-calculator,
.kira-calculator-shell,
.kira-calculator-wrap {
    border: 1px solid rgba(238, 61, 141, 0.22);
    border-radius: 20px;
    background: linear-gradient(135deg, #fff8fc 0%, #ffffff 45%, #f4fbff 100%);
    box-shadow: 0 12px 28px rgba(31, 67, 104, 0.06);
}

.webbook-tool-header,
.kira-tool-header {
    align-items: center;
    gap: 12px;
}

.webbook-tool-title,
.kira-tool-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0c2f66;
}

.webbook-tool-desc,
.kira-tool-desc {
    font-size: 0.74rem;
    line-height: 1.45;
    color: #637b92;
}

.webbook-tool-badge,
.kira-tool-badge {
    padding: 7px 10px;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: 999px;
    color: #eb2f88;
    background: #ffeaf4;
    border: 1px solid #ffd1e4;
}

/* ---------------------------------------------------------
   4) BUTANG BUKA / TUTUP KALKULATOR
--------------------------------------------------------- */
.kira-calculator-toggle,
.webbook-calculator-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;

    padding: 15px 16px;
    margin-bottom: 14px;

    border: 1px solid #cfe0ef;
    border-radius: 16px;

    background: #f7fbff;
    color: #0b2f66;

    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kira-calculator-toggle strong,
.webbook-calculator-toggle strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0b2f66;
}

.kira-calculator-toggle span,
.webbook-calculator-toggle span {
    display: block;
    font-size: 0.73rem;
    color: #6a8298;
}

.kira-calculator-toggle .toggle-icon,
.webbook-calculator-toggle .toggle-icon {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: #355d86;
}

/* ---------------------------------------------------------
   5) KAD SECTION DALAM KALKULATOR
--------------------------------------------------------- */
.kira-section-card,
.webbook-kira-section,
.kira-form-section {
    background: #ffffff;
    border: 1px solid #d7e5f2;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(27, 63, 96, 0.04);
    margin-bottom: 14px;
}

.kira-section-title,
.webbook-kira-section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #0b2f66;
}

.kira-section-desc,
.webbook-kira-section-desc {
    margin: 0 0 14px;
    font-size: 0.73rem;
    line-height: 1.45;
    color: #6b8299;
}

/* ---------------------------------------------------------
   6) INPUT GRID — COMPACT, KEMAS
--------------------------------------------------------- */
.kira-input-grid,
.webbook-kira-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kira-input-card,
.webbook-kira-input-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid #d9e6f2;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.kira-input-head,
.webbook-kira-input-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.kira-input-icon,
.webbook-kira-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: 11px;
    background: #eef6ff;
    color: #1f73d8;
}

.kira-input-title,
.webbook-kira-input-title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    color: #0b2f66;
}

.kira-input-note,
.webbook-kira-input-note {
    margin: 2px 0 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: #71879d;
}

/* input style macam reference */
.kira-field-wrap,
.webbook-kira-field-wrap,
.kira-inline-input,
.webbook-inline-input {
    display: flex;
    align-items: stretch;
    overflow: hidden;

    border: 1px solid #bcd3e8;
    border-radius: 12px;
    background: #ffffff;
}

.kira-prefix,
.kira-suffix,
.webbook-kira-prefix,
.webbook-kira-suffix {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    padding: 0 12px;

    background: #edf6ff;
    color: #0c2f66;

    font-size: 0.78rem;
    font-weight: 800;

    border-right: 1px solid #d2e1ef;
}

.kira-suffix,
.webbook-kira-suffix {
    border-right: 0;
    border-left: 1px solid #d2e1ef;
}

.kira-field-wrap input,
.webbook-kira-field-wrap input,
.kira-inline-input input,
.webbook-inline-input input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 44px;

    padding: 0 12px;
    border: 0;
    outline: none;
    background: #ffffff;

    font-size: 0.92rem;
    font-weight: 700;
    color: #173254;
}

.kira-field-wrap input::placeholder,
.webbook-kira-field-wrap input::placeholder,
.kira-inline-input input::placeholder,
.webbook-inline-input input::placeholder {
    color: #90a1b4;
    font-weight: 600;
}

/* ---------------------------------------------------------
   7) HASIL KIRAAN — 2 KOLUM + KAD LEBIH CANTIK
--------------------------------------------------------- */
.kira-result-grid,
.webbook-result-grid,
.kira-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kira-result-card,
.webbook-result-card,
.kira-summary-card {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(220, 231, 241, 0.9);
    box-shadow: 0 6px 16px rgba(24, 57, 92, 0.04);
}

.kira-result-card.is-blue,
.webbook-result-card.is-blue,
.kira-summary-card.is-blue {
    background: linear-gradient(135deg, #dff0ff 0%, #edf7ff 100%);
}

.kira-result-card.is-pink,
.webbook-result-card.is-pink,
.kira-summary-card.is-pink {
    background: linear-gradient(135deg, #ffe8f2 0%, #fff3f8 100%);
}

.kira-result-card.is-purple,
.webbook-result-card.is-purple,
.kira-summary-card.is-purple {
    background: linear-gradient(135deg, #eee8ff 0%, #f7f2ff 100%);
}

.kira-result-card.is-green,
.webbook-result-card.is-green,
.kira-summary-card.is-green {
    background: linear-gradient(135deg, #e2f8ea 0%, #eefbf2 100%);
}

.kira-result-top,
.webbook-result-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kira-result-icon,
.webbook-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    border-radius: 14px;
    background: rgba(255,255,255,0.72);

    box-shadow: 0 4px 10px rgba(24,57,92,0.06);
}

.kira-result-icon svg,
.webbook-result-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.2;
}

.kira-result-label,
.webbook-result-label {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0b2f66;
}

.kira-result-value,
.webbook-result-value {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.1;
    color: #08295b;
}

.kira-result-desc,
.webbook-result-desc {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
    color: #6d8298;
}

/* ---------------------------------------------------------
   8) HASIL KIRAAN FOOTER NOTE
--------------------------------------------------------- */
.kira-result-note,
.webbook-result-note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    margin-top: 12px;
    padding: 14px 15px;

    border-radius: 15px;
    background: linear-gradient(135deg, #fff4f9 0%, #fff9fc 100%);
    border: 1px solid #ffd8e7;
}

.kira-result-note-left,
.webbook-result-note-left {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.kira-result-note-icon,
.webbook-result-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    border-radius: 50%;
    background: #ec2c89;
    color: #fff;
    font-weight: 800;
}

.kira-result-note-title,
.webbook-result-note-title {
    margin: 0 0 3px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0b2f66;
}

.kira-result-note-text,
.webbook-result-note-text {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.45;
    color: #6c8096;
}

.kira-result-note-quote,
.webbook-result-note-quote {
    margin: 0;
    align-self: center;
    text-align: right;
    color: #ec2c89;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1.2;
}

/* ---------------------------------------------------------
   9) MOBILE TUNING
--------------------------------------------------------- */
@media (max-width: 639px) {
    .kira-input-grid,
    .webbook-kira-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kira-result-grid,
    .webbook-result-grid,
    .kira-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kira-result-card,
    .webbook-result-card,
    .kira-summary-card {
        padding: 13px;
        border-radius: 16px;
    }

    .kira-result-top,
    .webbook-result-top {
        gap: 10px;
    }

    .kira-result-icon,
    .webbook-result-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    .kira-result-icon svg,
    .webbook-result-icon svg {
        width: 21px;
        height: 21px;
    }

    .kira-result-label,
    .webbook-result-label {
        font-size: 0.74rem;
    }

    .kira-result-value,
    .webbook-result-value {
        font-size: 1rem;
    }

    .kira-result-desc,
    .webbook-result-desc {
        font-size: 0.66rem;
    }

    .kira-result-note,
    .webbook-result-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .kira-result-note-quote,
    .webbook-result-note-quote {
        text-align: left;
        font-size: 0.78rem;
    }
}

/* ---------------------------------------------------------
   10) VERY SMALL MOBILE
--------------------------------------------------------- */
@media (max-width: 390px) {
    .kira-result-grid,
    .webbook-result-grid,
    .kira-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kira-result-card,
    .webbook-result-card,
    .kira-summary-card {
        padding: 11px;
    }

    .kira-result-label,
    .webbook-result-label {
        font-size: 0.7rem;
    }

    .kira-result-value,
    .webbook-result-value {
        font-size: 0.92rem;
    }

    .kira-result-desc,
    .webbook-result-desc {
        font-size: 0.62rem;
    }
}
/* =========================================================
   MODUL 4 — BEZAKAN SECTION KALKULATOR
   Calculator = soft blue / lavender / pink
========================================================= */

.webbook-calculator {
    position: relative;

    padding: 16px !important;

    border: 1px solid #bcdaf3 !important;
    border-radius: 20px !important;

    background:
        linear-gradient(
            135deg,
            #eaf7ff 0%,
            #f3f2ff 48%,
            #fff0f7 100%
        ) !important;

    box-shadow:
        0 12px 28px rgba(39, 91, 145, 0.08) !important;
}


/* Garisan warna di bahagian atas
   supaya terus nampak ini TOOL */
.webbook-calculator::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;
    right: 22px;

    height: 4px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #28a9e8,
            #7654f6,
            #f72585
        );
}


/* Header calculator lebih bersih */
.webbook-calculator .webbook-tool-header {
    padding: 3px 4px 8px;
}


/* Bar Buka Kalkulator kekalkan putih
   supaya menonjol atas background berwarna */
.webbook-calculator .kira-soap-launcher {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.96),
            rgba(247,251,255,0.96)
        ) !important;

    border-color: #bcd5ed !important;

    box-shadow:
        0 4px 12px rgba(38, 81, 127, 0.05);
}


/* Apabila calculator dibuka,
   setiap bahagian input nampak sebagai card putih */
.webbook-calculator .kira-soap-section {
    background:
        rgba(255,255,255,0.94) !important;

    border-color: #c8ddef !important;

    box-shadow:
        0 5px 14px rgba(42, 82, 125, 0.04);
}


/* Hasil Kiraan juga sedikit berbeza
   tetapi masih sebahagian daripada calculator */
.webbook-calculator .kira-results-master {
    background:
        linear-gradient(
            135deg,
            #eaf7ff 0%,
            #f5fbff 50%,
            #fff5fa 100%
        ) !important;

    border-color: #b8d8f0 !important;
}


/* MOBILE */
@media (max-width: 639px) {

    .webbook-calculator {
        padding: 12px !important;

        border-radius: 18px !important;
    }

    .webbook-calculator::before {
        left: 16px;
        right: 16px;

        height: 3px;
    }

}
/* =========================================================
   KIRA — HASIL KIRAAN FINAL
   Desktop 4 kolum | Mobile 2 kolum
   ========================================================= */


/* GRID */
.webbook-calculator .kira-main-results {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}


/* RESULT CARD */
.webbook-calculator .kira-main-result-card {
    min-width: 0 !important;
    min-height: 118px !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 10px !important;

    padding: 14px !important;

    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.9) !important;

    box-shadow:
        0 5px 14px rgba(26, 67, 110, 0.05) !important;
}


/* WARNA LEBIH JELAS */
.webbook-calculator
.kira-main-result-card.is-blue {
    background:
        linear-gradient(
            135deg,
            #d9f0ff,
            #eaf7ff
        ) !important;
}


.webbook-calculator
.kira-main-result-card.is-pink {
    background:
        linear-gradient(
            135deg,
            #ffe1ee,
            #fff0f7
        ) !important;
}


.webbook-calculator
.kira-main-result-card.is-purple {
    background:
        linear-gradient(
            135deg,
            #e9e1ff,
            #f3efff
        ) !important;
}


.webbook-calculator
.kira-main-result-card.is-green {
    background:
        linear-gradient(
            135deg,
            #d9f7e8,
            #eafff4
        ) !important;
}


/* ICON BESAR */
.webbook-calculator
.kira-main-result-card
.kira-result-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 13px !important;

    background: rgba(255,255,255,.75) !important;

    box-shadow:
        0 4px 10px rgba(20, 67, 106, 0.05) !important;
}


.webbook-calculator
.kira-main-result-card
.kira-result-icon svg {
    width: 23px !important;
    height: 23px !important;
}


/* LABEL */
.webbook-calculator
.kira-main-result-label {
    min-height: 0 !important;

    margin-bottom: 7px !important;

    font-size: 10px !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;

    color: #08275f !important;
}


/* NILAI RM */
.webbook-calculator
.kira-main-result-card strong {
    display: block !important;

    margin: 3px 0 6px !important;

    font-size: 20px !important;
    line-height: 1 !important;

    font-weight: 900 !important;

    color: #08275f !important;
}


/* DESCRIPTION */
.webbook-calculator
.kira-main-result-card small {
    font-size: 8px !important;
    line-height: 1.35 !important;

    color: #607b98 !important;
}



/* =========================================================
   MOBILE — KEKAL 2 KOLUM
   ========================================================= */

@media (max-width: 700px) {

    .webbook-calculator
    .kira-main-results {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }


    .webbook-calculator
    .kira-main-result-card {
        min-height: 135px !important;

        display: block !important;

        padding: 13px !important;

        border-radius: 15px !important;
    }


    .webbook-calculator
    .kira-main-result-card
    .kira-result-icon {
        width: 43px !important;
        height: 43px !important;

        margin-bottom: 9px !important;
    }


    .webbook-calculator
    .kira-main-result-label {
        font-size: 10px !important;
    }


    .webbook-calculator
    .kira-main-result-card strong {
        margin-top: 7px !important;

        font-size: 20px !important;
    }


    .webbook-calculator
    .kira-main-result-card small {
        font-size: 8px !important;
    }

}


/* JANGAN TUKAR KE 1 KOLUM WALAU PHONE KECIL */
@media (max-width: 460px) {

    .webbook-calculator
    .kira-main-results {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}
/* =========================================================
   KIRA — HASIL KIRAAN COMPACT / NIPIS
   Ikut gaya reference user
========================================================= */

.webbook-calculator-results {
    margin-top: 14px;
    padding: 14px;

    background: linear-gradient(180deg, #eef9ff 0%, #f8fcff 100%);
    border: 1px solid #cfe4f4;
    border-radius: 22px;
}

.webbook-calculator-results-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.webbook-calculator-results-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.webbook-calculator-results-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2083ee;
}

.webbook-calculator-results-icon svg {
    width: 24px;
    height: 24px;
}

.webbook-calculator-results-title {
    margin: 0;
    color: #0a2e66;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}

.webbook-calculator-results-subtitle {
    margin: 2px 0 0;
    color: #6b84a0;
    font-size: 0.74rem;
    line-height: 1.35;
}

.webbook-calculator-results-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;

    border: 1px solid #b8d6f2;
    border-radius: 999px;

    background: #f8fdff;
    color: #2b78e3;

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

/* GRID */
.webbook-calculator-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* RESULT CARD */
.webbook-calculator-result-card {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 112px;
    padding: 14px 16px;

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 12px rgba(29, 73, 124, 0.05);
}

/* warna kad */
.webbook-calculator-result-card.is-green {
    background: linear-gradient(135deg, #dcf7e9 0%, #edfdf4 100%);
}

.webbook-calculator-result-card.is-blue {
    background: linear-gradient(135deg, #e6f4ff 0%, #f2f9ff 100%);
}

.webbook-calculator-result-card.is-pink {
    background: linear-gradient(135deg, #ffe6f1 0%, #fff2f8 100%);
}

/* icon bulat */
.webbook-calculator-result-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;
    background: rgba(255,255,255,0.72);
}

.webbook-calculator-result-icon svg {
    width: 28px;
    height: 28px;
}

/* warna icon ikut card */
.webbook-calculator-result-card.is-green .webbook-calculator-result-icon {
    color: #00924b;
}

.webbook-calculator-result-card.is-blue .webbook-calculator-result-icon {
    color: #1878f2;
}

.webbook-calculator-result-card.is-pink .webbook-calculator-result-icon {
    color: #eb2f91;
}

/* content */
.webbook-calculator-result-content {
    min-width: 0;
}

.webbook-calculator-result-label {
    margin: 0 0 6px;
    color: #12366b;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
}

.webbook-calculator-result-value {
    margin: 0;
    color: #082b5d;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.05;
}

.webbook-calculator-result-note {
    margin: 6px 0 0;
    color: #6d83a0;
    font-size: 0.68rem;
    line-height: 1.35;
}

/* NOTA PENTING */
.webbook-calculator-results-note {
    margin-top: 12px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    background: linear-gradient(135deg, #fff0f6 0%, #fff7fb 100%);
    border-radius: 18px;
}

.webbook-calculator-results-note-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.webbook-calculator-results-note-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #f2318b;
    color: #ffffff;
}

.webbook-calculator-results-note-icon svg {
    width: 18px;
    height: 18px;
}

.webbook-calculator-results-note-title {
    margin: 0 0 3px;
    color: #17386b;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
}

.webbook-calculator-results-note-text {
    margin: 0;
    color: #5f7693;
    font-size: 0.73rem;
    line-height: 1.4;
    max-width: 560px;
}

.webbook-calculator-results-note-quote {
    flex: 0 0 auto;
    color: #ef2a88;
    font-size: 0.9rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.15;
    text-align: right;
}

/* =========================
   TABLET / MOBILE
========================= */
@media (max-width: 900px) {
    .webbook-calculator-results-grid {
        grid-template-columns: 1fr;
    }

    .webbook-calculator-results-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .webbook-calculator-results-note-quote {
        text-align: left;
    }
}

@media (max-width: 639px) {
    .webbook-calculator-results {
        padding: 12px;
        border-radius: 18px;
    }

    .webbook-calculator-results-header {
        gap: 10px;
    }

    .webbook-calculator-results-title {
        font-size: 0.95rem;
    }

    .webbook-calculator-results-subtitle {
        font-size: 0.7rem;
    }

    .webbook-calculator-results-badge {
        padding: 6px 10px;
        font-size: 0.62rem;
    }

    .webbook-calculator-result-card {
        min-height: 98px;
        padding: 12px;
        gap: 10px;
    }

    .webbook-calculator-result-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }

    .webbook-calculator-result-icon svg {
        width: 24px;
        height: 24px;
    }

    .webbook-calculator-result-label {
        font-size: 0.8rem;
    }

    .webbook-calculator-result-value {
        font-size: 1rem;
    }

    .webbook-calculator-result-note {
        font-size: 0.64rem;
    }

    .webbook-calculator-results-note {
        padding: 10px 12px;
    }

    .webbook-calculator-results-note-title {
        font-size: 0.78rem;
    }

    .webbook-calculator-results-note-text {
        font-size: 0.68rem;
    }

    .webbook-calculator-results-note-quote {
        font-size: 0.8rem;
    }
}
/* =========================================================
   MOBILE ONLY — HASIL KIRAAN LEBIH COMPACT
   Desktop tidak berubah
========================================================= */

@media (max-width: 639px) {

    /* ruang dalam 4 kad */
    .kira-final-results-grid > div {
        min-height: 82px !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    /* icon kecil sedikit */
    .kira-final-results-grid > div > span {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        border-radius: 11px !important;
    }

    .kira-final-results-grid > div > span svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* tajuk setiap kad */
    .kira-final-results-grid > div > div > div:first-child {
        font-size: 8px !important;
        line-height: 1.15 !important;
    }

    /* NILAI — RM3.00 / RM3000.00 */
    .kira-final-results-grid
    strong[data-kira-display] {
        margin: 4px 0 3px !important;

        font-size: 14px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    /* keterangan bawah nilai */
    .kira-final-results-grid > div > div > small {
        font-size: 6.5px !important;
        line-height: 1.25 !important;
    }

}
/* =========================================================
   MINI CASE STUDY — COMPACT ZOOM CONTROL
   Desktop + Mobile
========================================================= */

/* Kotak luar zoom */
.webbook-image-dialog .webbook-zoom-controls,
.webbook-image-dialog .webbook-image-zoom-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    padding: 3px 5px !important;

    border-radius: 10px !important;
}


/* Butang - dan + */
.webbook-image-dialog .webbook-zoom-button,
.webbook-image-dialog .webbook-image-zoom-button,
.webbook-image-dialog .webbook-dialog-zoom {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;

    padding: 0 !important;

    border-radius: 7px !important;

    font-size: 13px !important;
    line-height: 1 !important;
}


/* Nombor 75% / 100% / 150% */
.webbook-image-dialog .webbook-zoom-value,
.webbook-image-dialog .webbook-image-zoom-value,
.webbook-image-dialog .webbook-dialog-zoom-value {
    min-width: 38px !important;

    padding: 0 2px !important;

    font-size: 12px !important;
    line-height: 29px !important;

    text-align: center !important;
}


/* MOBILE — kecil lagi sedikit */
@media (max-width: 639px) {

    .webbook-image-dialog .webbook-zoom-controls,
    .webbook-image-dialog .webbook-image-zoom-controls {
        gap: 3px !important;
        padding: 2px 4px !important;
        border-radius: 8px !important;
    }


    .webbook-image-dialog .webbook-zoom-button,
    .webbook-image-dialog .webbook-image-zoom-button,
    .webbook-image-dialog .webbook-dialog-zoom {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;

        border-radius: 6px !important;

        font-size: 11px !important;
    }


    .webbook-image-dialog .webbook-zoom-value,
    .webbook-image-dialog .webbook-image-zoom-value,
    .webbook-image-dialog .webbook-dialog-zoom-value {
        min-width: 34px !important;

        font-size: 10px !important;
        line-height: 25px !important;
    }

}
/* =========================================================
   FIX — POPUP ZOOM KECIL + HERO GAMBAR SABUN JELAS
========================================================= */


/* =========================================================
   A. POPUP MINI CASE STUDY
   Kecilkan SEMUA control di kanan header
========================================================= */

.webbook-image-dialog .webbook-image-dialog-header {
    min-height: 48px !important;
    padding: 7px 10px !important;
}


/* Semua button dalam header termasuk -, + dan X */
.webbook-image-dialog
.webbook-image-dialog-header button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 7px !important;

    font-size: 11px !important;
    line-height: 1 !important;
}


/* X bulat pun kecil */
.webbook-image-dialog
.webbook-dialog-close {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;

    font-size: 14px !important;
}


/* Bekas zoom */
.webbook-image-dialog
.webbook-image-dialog-header
div:has(> button) {
    gap: 3px !important;
}


/* Nombor 75% / 100% / 150% */
.webbook-image-dialog
.webbook-image-dialog-header
button + span,
.webbook-image-dialog
.webbook-image-dialog-header
span:has(+ button) {
    min-width: 30px !important;

    padding: 0 2px !important;

    font-size: 10px !important;
    line-height: 24px !important;
}


/* MOBILE — kecil sedikit lagi */
@media (max-width: 639px) {

    .webbook-image-dialog
    .webbook-image-dialog-header {
        min-height: 42px !important;
        padding: 5px 7px !important;
    }


    .webbook-image-dialog
    .webbook-image-dialog-header button,
    .webbook-image-dialog
    .webbook-dialog-close {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        min-height: 21px !important;

        border-radius: 6px !important;

        font-size: 10px !important;
    }


    .webbook-image-dialog
    .webbook-image-dialog-header
    button + span,
    .webbook-image-dialog
    .webbook-image-dialog-header
    span:has(+ button) {
        min-width: 27px !important;

        font-size: 9px !important;
        line-height: 21px !important;
    }

}



/* =========================================================
   B. HERO MODUL 4
   Bagi gambar sabun nampak semula
========================================================= */

.webbook-hero {
    background:

        linear-gradient(
            90deg,
            rgba(255, 248, 252, 0.94) 0%,
            rgba(255, 255, 255, 0.76) 48%,
            rgba(240, 249, 255, 0.30) 100%
        ),

        url("https://mysabun.com/wp-content/uploads/2026/09/kira-header.png")
        right center / cover no-repeat !important;
}


/* Mobile kekalkan clean tetapi gambar masih nampak */
@media (max-width: 639px) {

    .webbook-hero {
        background:

            linear-gradient(
                90deg,
                rgba(255, 249, 252, 0.94) 0%,
                rgba(255, 255, 255, 0.70) 62%,
                rgba(240, 249, 255, 0.30) 100%
            ),

            url("https://mysabun.com/wp-content/uploads/2026/09/kira-header.png")
            right center / cover no-repeat !important;
    }

}
/* =========================================================
   DESKTOP ONLY — BESARKAN TEKS WEBBOOK
   Mobile tidak berubah
========================================================= */

@media (min-width: 901px) {

    /* Tajuk section utama */
    .webbook-section-title,
    .webbook-case-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    /* Badge kecil kanan */
    .webbook-section-badge {
        font-size: 10.5px !important;
        padding: 7px 11px !important;
    }


    /* =====================================
       FAHAM DULU ISTILAH KIRAAN
    ===================================== */

    .webbook-topic-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .webbook-topic-desc {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
    }

    .webbook-topic-number {
        font-size: 11px !important;
    }

    .webbook-topic-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .webbook-topic-icon svg {
        width: 21px !important;
        height: 21px !important;
    }

    .webbook-detail-card {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .webbook-detail-card h4 {
        font-size: 13px !important;
    }


    /* =====================================
       MINI CASE STUDY
    ===================================== */

    .webbook-case-study-label {
        font-size: 10px !important;
    }

    .webbook-case-study-intro > p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .webbook-case-preview-item span {
        font-size: 10.5px !important;
    }

    .webbook-case-preview-item strong {
        font-size: 14px !important;
    }

    .webbook-case-study-button {
        font-size: 12px !important;
        padding: 11px 14px !important;
    }

    .webbook-case-study-hint {
        font-size: 10px !important;
    }


    /* =====================================
       CALLOUT / PENERANGAN
    ===================================== */

    .webbook-tip,
    .webbook-warning,
    .webbook-formula,
    .webbook-example {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

}
/* =========================================================
   DESKTOP ONLY — BESARKAN SEDIKIT TEKS
   Ringkasan KIRA + Nombor Bisnes Anda
========================================================= */

@media (min-width: 901px) {

    /* Ringkasan KIRA Anda */
    .kira-summary h3 {
        font-size: 15px !important;
    }

    /* Label: Kos Seunit, Harga Jual dll */
    .kira-summary .summary-label {
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    /* Nilai RM */
    .kira-summary .summary-value {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }


    /* Panel kanan — Nombor Bisnes Anda */
    .webbook-rail-card .webbook-rail-title {
        font-size: 12px !important;
    }

    .webbook-rail-card .webbook-rail-text {
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .webbook-rail-card .webbook-rail-text strong {
        font-size: 12px !important;
    }

}
/* =========================================================
   MODUL 4 — FOOTER QUOTE
========================================================= */

.webbook-footer-quote {
    padding: 24px 28px !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    border: 1px solid #ffd3e5;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #fff1f7 0%,
            #ffffff 50%,
            #eef9ff 100%
        );

    text-align: center;
}

.webbook-footer-quote strong {
    color: #f72585;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
}

.webbook-footer-quote span {
    max-width: 650px;

    color: #496788;

    font-size: 13px;
    line-height: 1.65;
    font-weight: 500;
}

.webbook-footer-quote small {
    margin-top: 3px;

    color: #7b8fa7;

    font-size: 10px;
    font-weight: 700;
}


/* MOBILE */
@media (max-width: 639px) {

    .webbook-footer-quote {
        padding: 19px 17px !important;
    }

    .webbook-footer-quote strong {
        font-size: 17px;
    }

    .webbook-footer-quote span {
        font-size: 11.5px;
        line-height: 1.6;
    }

    .webbook-footer-quote small {
        font-size: 9px;
    }

}
/* =========================================
   BESARKAN STATUS OFFER
========================================= */

.kira-status {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 7px 12px !important;
}
/* =========================================================
   MOBILE — PROGRESS DI BAWAH HERO
========================================================= */

.webbook-mobile-progress {
    display: none !important;
}

@media (max-width: 900px) {

    /* Progress baru di bawah hero */
    .webbook-mobile-progress {
        display: block !important;
        margin: 12px 0 16px;
    }

    .webbook-mobile-progress .webbook-progress {
        margin: 0;
    }

    /* Sembunyikan progress lama dalam sidebar */
    .webbook-rail > .webbook-progress {
        display: none !important;
    }

}
/* =========================================================
   MOBILE — QUOTE PENUTUP PALING BAWAH
========================================================= */

/* Jangan tunjuk quote mobile pada desktop */
.webbook-mobile-bottom-quote {
    display: none;
}


/* MOBILE */
@media (max-width: 900px) {

    /* Sembunyikan quote asal yang berada dalam main */
    main .webbook-footer-quote {
        display: none !important;
    }

    /* Quote penutup khas mobile */
    .webbook-mobile-bottom-quote {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        margin: 16px 12px 90px;
        padding: 22px 18px;

        border: 1px solid #ffd3e5;
        border-radius: 18px;

        background:
            linear-gradient(
                135deg,
                #fff1f7 0%,
                #ffffff 50%,
                #eef9ff 100%
            );

        text-align: center;
    }

    .webbook-mobile-bottom-quote strong {
        color: #f72585;

        font-size: 18px;
        line-height: 1.3;
        font-weight: 800;
        font-style: italic;
    }

    .webbook-mobile-bottom-quote span {
        max-width: 380px;

        color: #496788;

        font-size: 12px;
        line-height: 1.65;
        font-weight: 500;
        font-style: italic;
    }

    .webbook-mobile-bottom-quote small {
        margin-top: 3px;

        color: #7b8fa7;

        font-size: 10px;
        font-weight: 700;
        font-style: italic;
    }

}
/* Sembunyikan quote kecil sidebar pada mobile */
@media (max-width: 900px) {

    .webbook-rail-signature {
        display: none !important;
    }

}
/* Nota Penting Hasil Kiraan — lebih jelas pada desktop */
@media (min-width: 901px) {
    .kira-important-note-copy {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }
}