/* =========================================================
   TOPPICKSKSA NEWSLETTER
========================================================= */

.tpknews-popup,
.tpknews-popup *,
.tpknews-unsubscribe,
.tpknews-unsubscribe *{
    box-sizing:border-box;
    font-family:"Tajawal",Arial,sans-serif !important;
}

.tpknews-popup{
    --green:#07513b;
    --green-dark:#043b2c;
    --gold:#c99b3c;
    --gold-light:#e2bc66;
    --cream:#fbfaf5;
    --soft:#f6faf8;
    --text:#18362d;
    --muted:#64716d;
    --border:#dce6e1;

    position:fixed;
    z-index:999999;
    inset:0;
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease;
}

.tpknews-popup.is-visible{
    opacity:1;
}

.tpknews-popup__backdrop{
    display:none;
}

.tpknews-popup__panel{
    position:absolute;
    overflow:hidden;
    color:var(--text);
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 24px 70px rgba(3,47,35,.18);
    pointer-events:auto;
    transform:translateY(12px);
    opacity:0;
    transition:transform .22s ease,opacity .22s ease;
}

.tpknews-popup.is-visible .tpknews-popup__panel{
    transform:translateY(0);
    opacity:1;
}

/* =========================================================
   MODAL VARIANT
========================================================= */

.tpknews-popup--modal{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.tpknews-popup--modal .tpknews-popup__backdrop{
    position:absolute;
    inset:0;
    display:block;
    background:rgba(3,47,35,.48);
    backdrop-filter:blur(3px);
    pointer-events:auto;
}

.tpknews-popup--modal .tpknews-popup__panel{
    position:relative;
    width:min(520px,100%);
    padding:27px;
    border-color:rgba(201,155,60,.42);
    border-radius:18px;
    background:
        radial-gradient(circle at 94% 4%,rgba(201,155,60,.12),transparent 26%),
        linear-gradient(135deg,#f7fbf9,#fff 58%,#fbf8ef);
}

/* =========================================================
   SIDE VARIANT
========================================================= */

.tpknews-popup--side .tpknews-popup__panel{
    right:22px;
    bottom:22px;
    width:min(410px,calc(100vw - 30px));
    padding:23px;
    border-radius:16px;
    border-color:rgba(201,155,60,.38);
    background:#fff;
}

.tpknews-popup--side .tpknews-popup__panel::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:5px;
    background:linear-gradient(90deg,var(--green),var(--gold));
}

/* =========================================================
   BAR VARIANT
========================================================= */

.tpknews-popup--bar .tpknews-popup__panel{
    left:50%;
    bottom:18px;
    width:min(980px,calc(100vw - 28px));
    padding:16px 18px;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr);
    grid-template-areas:
        "brand form"
        "copy form"
        "fine form";
    gap:4px 20px;
    border-radius:15px;
    transform:translate(-50%,16px);
    background:
        linear-gradient(100deg,#f7fbf9,#fff 55%,#fbf8ef);
}

.tpknews-popup--bar.is-visible .tpknews-popup__panel{
    transform:translate(-50%,0);
}

.tpknews-popup--bar .tpknews-popup__brand{ grid-area:brand; margin:0 0 5px; }
.tpknews-popup--bar .tpknews-popup__copy{ grid-area:copy; }
.tpknews-popup--bar .tpknews-popup__form{ grid-area:form; align-self:center; }
.tpknews-popup--bar .tpknews-popup__fine{ grid-area:fine; }
.tpknews-popup--bar .tpknews-popup__benefits{ display:none; }
.tpknews-popup--bar .tpknews-popup__copy h2{ font-size:19px; }
.tpknews-popup--bar .tpknews-popup__copy p{ font-size:11.5px; margin-top:4px; }

/* =========================================================
   COMMON CONTENT
========================================================= */

.tpknews-popup__close{
    position:absolute;
    z-index:5;
    top:11px;
    left:11px;
    width:32px;
    height:32px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--green);
    background:rgba(255,255,255,.94);
    border:1px solid var(--border);
    border-radius:50%;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.tpknews-popup__brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:13px;
}

.tpknews-popup__brandMark{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--green);
    border:2px solid var(--gold);
    border-radius:10px;
    font-size:12px;
    font-weight:700;
    direction:ltr;
}

.tpknews-popup__brand strong{
    display:block;
    color:var(--green);
    font-size:14px;
    line-height:1.15;
    font-weight:700;
    direction:ltr;
    text-align:right;
}

.tpknews-popup__brand small{
    display:block;
    margin-top:3px;
    color:#a77b2c;
    font-size:8.5px;
    line-height:1.25;
    font-weight:500;
}

.tpknews-popup__copy h2{
    margin:0!important;
    padding:0!important;
    color:var(--green-dark)!important;
    font-size:25px;
    line-height:1.35;
    font-weight:700;
}

.tpknews-popup__copy p{
    margin:7px 0 0!important;
    color:var(--muted)!important;
    font-size:12.5px;
    line-height:1.75;
}

.tpknews-popup__benefits{
    margin:14px 0 15px!important;
    padding:0!important;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    list-style:none!important;
}

.tpknews-popup__benefits li{
    min-width:0;
    padding:8px 7px;
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--green-dark);
    background:var(--soft);
    border:1px solid var(--border);
    border-radius:8px;
    font-size:8.5px;
    line-height:1.35;
    font-weight:500;
}

.tpknews-popup__benefits li span{
    color:var(--gold);
    font-weight:700;
}

.tpknews-popup__form{
    margin-top:14px;
}

.tpknews-popup__field{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
}

.tpknews-popup__field input[type="email"]{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    margin:0!important;
    padding:0 13px!important;
    color:var(--text)!important;
    background:#fff!important;
    border:1px solid #d6e0dc!important;
    border-radius:8px!important;
    outline:0!important;
    box-shadow:none!important;
    font-size:12px!important;
    text-align:right!important;
}

.tpknews-popup__field input[type="email"]:focus{
    border-color:rgba(201,155,60,.8)!important;
    box-shadow:0 0 0 3px rgba(201,155,60,.08)!important;
}

.tpknews-popup__field button{
    min-width:112px!important;
    height:44px!important;
    margin:0!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    background:var(--green)!important;
    border:1px solid var(--green)!important;
    border-radius:8px!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:600!important;
    cursor:pointer!important;
}

.tpknews-popup__field button:hover{
    background:var(--green-dark)!important;
    border-color:var(--green-dark)!important;
}

.tpknews-popup__field button:disabled{
    opacity:.6;
    cursor:wait!important;
}

.tpknews-popup__consent{
    margin-top:9px;
    display:flex;
    align-items:flex-start;
    gap:7px;
    color:#71807b;
    font-size:8.5px;
    line-height:1.55;
    cursor:pointer;
}

.tpknews-popup__consent input{
    flex:0 0 auto;
    margin:2px 0 0!important;
}

.tpknews-popup__consent a{
    color:#a77b2c!important;
    text-decoration:underline!important;
    text-underline-offset:2px;
}

.tpknews-popup__hp{
    position:absolute!important;
    left:-99999px!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
}

.tpknews-popup__message{
    min-height:0;
    margin-top:7px;
    font-size:9px;
    line-height:1.4;
}

.tpknews-popup__message.is-error{ color:#a22b2b; }
.tpknews-popup__message.is-success{ color:var(--green); font-weight:600; }

.tpknews-popup__form.is-success .tpknews-popup__field,
.tpknews-popup__form.is-success .tpknews-popup__consent{
    opacity:.45;
    pointer-events:none;
}

.tpknews-popup__fine{
    margin-top:10px;
    color:#87928e;
    font-size:8px;
    line-height:1.45;
}

/* =========================================================
   UNSUBSCRIBE PAGE
========================================================= */

.tpknews-unsubscribe{
    width:100%;
    padding:55px 18px;
    direction:rtl;
    background:#f8faf9;
}

.tpknews-unsubscribe__card{
    width:min(620px,100%);
    margin:0 auto;
    padding:34px;
    text-align:center;
    background:
        radial-gradient(circle at 92% 5%,rgba(201,155,60,.12),transparent 25%),
        #fff;
    border:1px solid #dce6e1;
    border-radius:18px;
    box-shadow:0 14px 40px rgba(3,47,35,.07);
}

.tpknews-unsubscribe__kicker{
    display:block;
    margin-bottom:7px;
    color:#c99b3c;
    font-size:10px;
    font-weight:700;
    direction:ltr;
}

.tpknews-unsubscribe__mark{
    width:48px;
    height:48px;
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:#07513b;
    border:2px solid #c99b3c;
    border-radius:13px;
    font-size:20px;
}

.tpknews-unsubscribe h1{
    margin:0!important;
    color:#07513b!important;
    font-size:30px!important;
    line-height:1.35!important;
    font-weight:700!important;
}

.tpknews-unsubscribe p{
    max-width:500px;
    margin:9px auto 0!important;
    color:#64716d!important;
    font-size:13.5px!important;
    line-height:1.8!important;
}

.tpknews-unsubscribe form{
    margin-top:18px;
}

.tpknews-unsubscribe button{
    min-height:43px;
    padding:0 18px;
    color:#fff;
    background:#07513b;
    border:1px solid #07513b;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

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

@media(max-width:700px){
    .tpknews-popup--modal{
        align-items:flex-end;
        padding:10px;
    }

    .tpknews-popup--modal .tpknews-popup__panel,
    .tpknews-popup--side .tpknews-popup__panel,
    .tpknews-popup--bar .tpknews-popup__panel{
        position:absolute;
        right:10px;
        left:10px;
        bottom:10px;
        width:auto;
        padding:20px 16px 17px;
        display:block;
        border-radius:15px;
        transform:translateY(18px);
    }

    .tpknews-popup--bar.is-visible .tpknews-popup__panel,
    .tpknews-popup--side.is-visible .tpknews-popup__panel,
    .tpknews-popup--modal.is-visible .tpknews-popup__panel{
        transform:translateY(0);
    }

    .tpknews-popup__copy h2{
        padding-left:24px!important;
        font-size:22px;
    }

    .tpknews-popup__benefits{
        grid-template-columns:1fr;
        gap:5px;
        margin:11px 0 12px!important;
    }

    .tpknews-popup__benefits li{
        min-height:31px;
        padding:6px 8px;
        font-size:8.5px;
    }

    .tpknews-popup--bar .tpknews-popup__benefits{
        display:none;
    }

    .tpknews-popup__field{
        grid-template-columns:1fr;
        gap:6px;
    }

    .tpknews-popup__field button{
        width:100%!important;
    }

    .tpknews-unsubscribe{
        padding:34px 12px;
    }

    .tpknews-unsubscribe__card{
        padding:27px 18px;
        border-radius:15px;
    }

    .tpknews-unsubscribe h1{
        font-size:26px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .tpknews-popup,
    .tpknews-popup__panel{
        transition:none!important;
    }
}