/*
    Public gift-card balance scanner page.

    The layout is intentionally close to /scan-price so phone users see the
    same interaction pattern: result above camera, short camera window, manual
    fallback always available.

    Activity-log note:
        CSS has no durable behaviour and should not be logged. Server-side
        lookup activity is logged in GiftCardController::lookup().
*/
.gift-card-balance {
    width: min(100%, 720px);
    margin: 20px auto 30px;
    padding: 0 10px;
}

.gift-card-balance__card {
    background: #f6f8fb;
    border: 1px solid rgba(33, 54, 99, 0.22);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    padding: 18px;
}

.gift-card-balance h1 {
    margin: 0 0 8px;
    color: var(--wwd-colour-dark-blue, #213663);
    text-align: center;
}

.gift-card-balance__intro,
.gift-card-balance__status {
    margin: 10px 0;
    text-align: center;
}

.gift-card-balance__controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 14px 0;
}

.gift-card-balance__start,
.gift-card-balance__stop {
    min-width: 150px;
    min-height: 44px;
    font-size: 1.05rem;
}

.gift-card-balance__result {
    margin: 10px 0 12px;
    border: 1px solid rgba(33, 54, 99, 0.18);
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.gift-card-balance-result {
    text-align: center;
}

.gift-card-balance-result__label {
    margin: 0 0 5px;
    color: var(--wwd-colour-dark-blue, #213663);
    font-weight: bold;
}

.gift-card-balance-result__amount {
    margin: 0;
    color: #8b0000;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.08;
}

.gift-card-balance__error {
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(139, 0, 0, 0.35);
    border-radius: 8px;
    background: rgba(139, 0, 0, 0.08);
    color: #8b0000;
    font-weight: bold;
    text-align: center;
}

.gift-card-balance__camera {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--wwd-colour-dark-blue, #213663);
    border-radius: 12px;
    background: #111111;
    margin: 10px 0;
}

.gift-card-balance__video {
    display: block;
    width: 100%;
    height: clamp(170px, 32vh, 260px);
    object-fit: cover;
}

.gift-card-balance__scan-frame {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 34%;
    height: 30%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.gift-card-balance__camera--scanned .gift-card-balance__scan-frame {
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 999px rgba(33, 54, 99, 0.32), 0 0 18px rgba(255, 255, 255, 0.95);
}

.gift-card-balance__manual {
    margin-top: 12px;
}

.gift-card-balance__manual label {
    display: block;
    font-weight: bold;
    margin: 10px 0 6px;
    color: var(--wwd-colour-dark-blue, #213663);
}

.gift-card-balance__manual input {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(33, 54, 99, 0.4);
    border-radius: 8px;
    font-size: 1rem;
}

.gift-card-balance__optional {
    font-weight: normal;
}

.gift-card-balance__submit-row {
    margin: 14px 0 0;
    text-align: center;
}

.gift-card-balance__submit-row .button {
    min-width: 150px;
    min-height: 44px;
    font-size: 1.05rem;
}

@media (max-width: 520px) {
    .gift-card-balance {
        width: calc(100% - 14px);
        margin-top: 8px;
        margin-bottom: 12px;
        padding: 0;
    }

    .gift-card-balance__card {
        padding: 12px;
    }

    .gift-card-balance h1 {
        margin-bottom: 4px;
        font-size: 1.7rem;
    }

    .gift-card-balance__intro {
        display: none;
    }

    .gift-card-balance__controls {
        gap: 8px;
        margin: 8px 0;
    }

    .gift-card-balance__start,
    .gift-card-balance__stop {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        font-size: 1rem;
    }

    .gift-card-balance__result {
        margin: 8px 0;
        padding: 10px;
    }

    .gift-card-balance-result__amount {
        font-size: 1.65rem;
    }

    .gift-card-balance__status {
        margin: 6px 0;
        font-size: 0.95rem;
    }

    .gift-card-balance__camera {
        margin: 8px 0;
    }

    .gift-card-balance__video {
        height: clamp(150px, 26vh, 210px);
    }

    .gift-card-balance__manual {
        margin-top: 8px;
    }

    .gift-card-balance__manual label {
        margin: 8px 0 4px;
    }

    .gift-card-balance__manual input {
        padding: 9px 10px;
    }

    .gift-card-balance__submit-row {
        margin-top: 10px;
    }

    .gift-card-balance__submit-row .button {
        width: 100%;
        min-height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 380px), (max-height: 760px) {
    .gift-card-balance__video {
        height: clamp(130px, 22vh, 180px);
    }

    .gift-card-balance-result__amount {
        font-size: 1.45rem;
    }
}

/*
    Most recent gift-card redemption summary.

    Activity-log note:
        This is public presentation only. The balance lookup controller already
        logs safe success/failure metadata and must never log the card number or
        full transaction details.
*/
.gift-card-balance-result__last-use {
    margin: 10px 0 0;
    color: #333333;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
}

/* =========================================================
   Cross-browser scan acknowledgement
   =========================================================

   Some browsers do not expose vibration to websites. The scanner therefore
   creates this temporary visible confirmation in addition to vibration or the
   prepared audio tone. It remains visible even after the gift-card camera is
   stopped immediately following a successful scan.

   Activity-log note:
       This is browser-only feedback. Balance lookup outcomes remain logged by
       GiftCardController without raw card numbers or ledger details.
   ========================================================= */
.gift-card-balance__scan-confirmation {
    position: fixed;
    z-index: 10000;
    top: 18%;
    left: 50%;
    min-width: 180px;
    padding: 14px 20px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    background: rgba(33, 54, 99, 0.94);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.96);
    transition: opacity 120ms ease, transform 120ms ease;
}

.gift-card-balance__scan-confirmation--show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.gift-card-balance__scan-confirmation[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .gift-card-balance__scan-confirmation {
        transition: none;
    }
}