/* ============================================================
   ONCE60 CLIENTE
   Customer Experience
   Version 1.1
============================================================ */


/* ============================================================
   RESET
============================================================ */

* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/* ============================================================
   ROOT
============================================================ */

:root {

    --brand:#C89A3D;
    --brand-light:#E0B95A;

    --background:#101114;
    --panel:#181A1F;
    --card:#202329;
    --card-hover:#272B32;

    --text:#FFFFFF;
    --text-soft:#A9ADB7;

    --border:rgba(255,255,255,.08);

    --success:#22C55E;
    --success-soft:rgba(34,197,94,.12);

    --danger:#EF4444;
    --danger-soft:rgba(239,68,68,.12);

    --radius:20px;

    --shadow:
        0 15px 40px rgba(0,0,0,.35);

}


/* ============================================================
   BODY
============================================================ */

body {

    min-height:100vh;
    min-height:100dvh;

    background:

        radial-gradient(
            circle at 50% -10%,
            rgba(200,154,61,.16),
            transparent 42%
        ),

        var(--background);

    color:var(--text);

    font-family:
        "Akzidenz",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;

}


/* ============================================================
   CONTAINER
============================================================ */

.container {

    width:100%;

    max-width:520px;

    min-height:100vh;
    min-height:100dvh;

    margin:0 auto;

    padding:
        28px
        20px
        22px;

    display:flex;

    flex-direction:column;

}


/* ============================================================
   LOGO
============================================================ */

.logo {

    width:145px;

    max-width:55%;

    margin:
        8px auto
        30px;

    object-fit:contain;

}


/* ============================================================
   ZONE CARD
============================================================ */

.zoneCard {

    position:relative;

    padding:
        20px
        22px;

    margin-bottom:32px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:

        linear-gradient(
            135deg,
            rgba(200,154,61,.14),
            rgba(255,255,255,.025)
        );

    box-shadow:
        var(--shadow);

    overflow:hidden;

}


.zoneCard::before {

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:var(--brand);

}


.zoneLabel {

    display:block;

    margin-bottom:7px;

    color:var(--text-soft);

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

}


#zoneName {

    color:var(--text);

    font-size:1.45rem;

    line-height:1.1;

    font-weight:800;

    letter-spacing:.02em;

}


/* ============================================================
   TITLE
============================================================ */

.container > h2 {

    margin-bottom:16px;

    color:var(--text);

    font-size:1.05rem;

    font-weight:700;

}


/* ============================================================
   ACTIONS
============================================================ */

#actions {

    display:flex;

    flex-direction:column;

    gap:14px;

}


/* ============================================================
   ACTION BUTTON
============================================================ */

.actionButton {

    width:100%;

    min-height:92px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:18px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--card);

    color:var(--text);

    text-align:left;

    box-shadow:
        0 8px 24px rgba(0,0,0,.20);

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease,

        box-shadow .18s ease;

}


.actionButton:hover {

    background:
        var(--card-hover);

    border-color:
        rgba(200,154,61,.45);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.3);

}


.actionButton:active {

    transform:
        scale(.985);

}


.actionButton:disabled {

    opacity:.5;

    cursor:wait;

    transform:none;

}


/* ============================================================
   ICON
============================================================ */

.actionButton .icon {

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:
        rgba(200,154,61,.12);

    color:var(--brand);

}


.actionButton .icon svg {

    width:25px;

    height:25px;

    stroke-width:2;

}


/* ============================================================
   TEXT
============================================================ */

.actionButton .text {

    display:flex;

    flex-direction:column;

    gap:4px;

}


.actionButton .text strong {

    font-size:1rem;

    font-weight:800;

}


.actionButton .text span {

    color:var(--text-soft);

    font-size:.78rem;

    line-height:1.35;

}


/* ============================================================
   SUCCESS / STATUS
============================================================ */

#success {

    display:none;

    padding:
        34px
        22px;

    text-align:center;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--panel);

    box-shadow:
        var(--shadow);

}


.successIcon {

    width:70px;

    height:70px;

    margin:
        0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--success-soft);

    color:
        var(--success);

}


.successIcon svg {

    width:34px;

    height:34px;

    stroke-width:2;

}


#success h2 {

    margin-bottom:10px;

    font-size:1.25rem;

    font-weight:800;

}


#success p {

    color:var(--text-soft);

    font-size:.9rem;

    line-height:1.55;

}


/* ============================================================
   FOOTER
============================================================ */

footer {

    margin-top:auto;

    padding-top:32px;

    color:var(--text-soft);

    font-size:.72rem;

    line-height:1.5;

    text-align:center;

    opacity:.75;

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width:360px) {

    .container {

        padding:
            22px
            16px
            18px;

    }


    .logo {

        width:125px;

        margin-bottom:22px;

    }


    .zoneCard {

        margin-bottom:24px;

        padding:
            17px
            19px;

    }


    #zoneName {

        font-size:1.25rem;

    }


    .actionButton {

        min-height:82px;

    }

}


/* ============================================================
   LANDSCAPE MOBILE
============================================================ */

@media (
    orientation:landscape
) and (max-height:600px) {

    .container {

        max-width:760px;

        padding:
            18px
            24px;

    }


    .logo {

        width:110px;

        margin:
            0 auto
            16px;

    }


    .zoneCard {

        margin-bottom:18px;

        padding:
            14px
            18px;

    }


    #actions {

        display:grid;

        grid-template-columns:
            1fr
            1fr;

    }


    .actionButton {

        min-height:76px;

    }


    footer {

        padding-top:18px;

    }

}