/* =========================================================
   pay.css — Pay online (M-Pesa, Visa, Mastercard)
   Built on the shared showcase template + glass surface.
   ========================================================= */

.page-pay{
    /* the site-wide yellow (base.css default), like Home, Work and Contact */
    --accent:#facc15;
    --glow:rgba(250,204,21,.10);
    /* result colours stay distinct from the accent */
    --ok:#34d399;
    --warn:#fbbf24;
    --bad:#f87171;
    /* square corners, like the cards and buttons on the rest of the site */
    --radius-ui:0;
    --field-bg:rgba(255,255,255,.07);
    --field-line:rgba(255,255,255,.22);
    --error:#fca5a5;
}

/* pay/ keeps the real site-header (unlike other showcase pages, which use
   a floating back button instead), so it needs the header's own clearance,
   not the showcase template's extra top padding on top of that. */
.page-pay .showcase-main{
    padding:20px 18px 40px;
}

.page-pay .hero-section{
    margin-bottom:24px;
}

.pay{
    max-width:760px;
    margin:0 auto 40px;
    padding:26px;
}

.pay h2{
    color:#fff;
    font-size:1.2rem;
    font-weight:600;
    line-height:1.3;
}

/* ---------- Form ---------- */

.pay-form{
    display:grid;
    gap:16px;
}

.pay-form[hidden]{
    display:none;
}

.pay-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.pay-field{
    display:grid;
    gap:6px;
    min-width:0;
}

.pay-field label,
.pay-methods legend{
    color:#e5edf5;
    font-size:.8rem;
    font-weight:500;
}

.pay-hint{
    color:var(--secondary-text);
    font-size:.74rem;
    line-height:1.4;
}

.pay-field input{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid var(--field-line);
    border-radius:var(--radius-ui);
    background:var(--field-bg);
    color:#fff;
    font:inherit;
    font-size:.9rem;
    transition:border-color .2s ease, background .2s ease;
}

.pay-field input::placeholder{
    color:#8fa1b3;
}

.pay-field input:focus{
    outline:none;
    border-color:var(--accent);
    background:rgba(255,255,255,.1);
}

.pay-field input:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.pay-field.has-error input{
    border-color:var(--error);
}

.pay-error{
    color:var(--error);
    font-size:.76rem;
    line-height:1.4;
}

.pay-error:empty{
    display:none;
}

.pay-amount{
    position:relative;
}

.pay-amount .pay-prefix{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--secondary-text);
    font-size:.82rem;
    pointer-events:none;
}

.pay-amount input{
    padding-left:50px;
}

/* honeypot: off-screen, not display:none, so simple bots still fill it */
.pay-trap{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* ---------- Method tiles ---------- */

.pay-methods{
    border:0;
    min-width:0;
}

.pay-methods legend{
    margin-bottom:8px;
    padding:0;
}

.pay-method-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.pay-method{
    position:relative;
    display:block;
    cursor:pointer;
}

.pay-method input{
    position:absolute;
    opacity:0;
    inset:0;
    margin:0;
    cursor:pointer;
}

.pay-method-body{
    height:100%;
    display:grid;
    gap:4px;
    padding:14px;
    border:1px solid var(--field-line);
    border-radius:var(--radius-ui);
    background:var(--field-bg);
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.pay-method:hover .pay-method-body{
    transform:translateY(-2px);
}

.pay-method input:checked + .pay-method-body{
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
}

.pay-method input:focus-visible + .pay-method-body{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.pay-method svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:var(--accent);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.pay-method-name{
    color:#fff;
    font-size:.92rem;
    font-weight:600;
}

.pay-method-note{
    color:var(--secondary-text);
    font-size:.74rem;
    line-height:1.4;
}

/* ---------- Submit ---------- */

.pay-submit{
    width:100%;
    min-height:48px;
    padding:12px 20px;
    border:1px solid var(--accent);
    border-radius:var(--radius-ui);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    transition:transform .25s ease, opacity .2s ease;
}

.pay-submit:hover:not(:disabled){
    transform:translateY(-2px);
}

.pay-submit:disabled{
    opacity:.65;
    cursor:progress;
}

.pay-form-error{
    padding:10px 14px;
    border:1px solid rgba(252,165,165,.45);
    border-radius:var(--radius-ui);
    background:rgba(248,113,113,.1);
    color:#ffe1e1;
    font-size:.82rem;
    line-height:1.5;
}

.pay-form-error[hidden]{
    display:none;
}

.pay-form-error a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}

.pay-fine{
    color:var(--secondary-text);
    font-size:.74rem;
    line-height:1.6;
    text-align:center;
}

.pay-fine a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}

/* ---------- Result / notice panels ---------- */

.pay-panel{
    text-align:center;
}

.pay-panel[hidden]{
    display:none;
}

.pay-panel-icon{
    width:56px;
    height:56px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:2px solid var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
}

.pay-panel-icon svg{
    width:26px;
    height:26px;
    fill:none;
    stroke:var(--accent);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.pay-panel[data-state="success"] .pay-panel-icon{ --accent:var(--ok); }
.pay-panel[data-state="review"] .pay-panel-icon{ --accent:var(--warn); }
.pay-panel[data-state="failed"] .pay-panel-icon{ --accent:var(--bad); }

.pay-panel[data-state="checking"] .pay-panel-icon svg{
    animation:paySpin 1.1s linear infinite;
}

.pay-panel h2{
    margin-bottom:8px;
}

.pay-panel h2:focus{
    outline:none;
}

.pay-panel p{
    max-width:420px;
    margin:0 auto 18px;
    color:#d3dde8;
    font-size:.85rem;
    line-height:1.7;
}

.pay-details{
    max-width:380px;
    margin:0 auto 20px;
    text-align:left;
    border-top:1px solid rgba(255,255,255,.12);
}

.pay-details div{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:.82rem;
}

.pay-details dt{
    color:var(--secondary-text);
}

.pay-details dd{
    color:#fff;
    font-weight:500;
    text-align:right;
    overflow-wrap:anywhere;
}

.pay-details:empty{
    display:none;
}

@keyframes paySpin{
    to{ transform:rotate(360deg); }
}

@media (max-width:768px){

    .page-pay .showcase-main{
        padding:15px 12px 40px;
    }

    .pay{
        padding:18px 16px;
    }

    .pay-row{
        grid-template-columns:1fr;
    }

    /* 16px stops iOS zooming into the field on focus */
    .pay-field input{
        font-size:16px;
    }
}

@media (max-width:380px){

    .pay-method-grid{
        grid-template-columns:1fr;
    }
}

@media (prefers-reduced-motion:reduce){
    .pay-panel[data-state="checking"] .pay-panel-icon svg{ animation:none; }
}

/* =========================================================
   Order steps, service search, website builder, price summary
   ========================================================= */

.pay-step{
    display:grid;
    gap:16px;
    margin-bottom:28px;
}

.pay-step-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.05rem !important;
}

.pay-step-num{
    width:26px;
    height:26px;
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:.8rem;
    font-weight:600;
}

.pay-step h3{
    color:#fff;
    font-size:.95rem;
    font-weight:600;
}

/* ---------- category filter chips ---------- */

.svc-cats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.svc-cat-chip{
    padding:7px 14px;
    border:1px solid var(--field-line);
    border-radius:var(--radius-ui);
    background:var(--field-bg);
    color:#d3dde8;
    font-size:.78rem;
    font-weight:500;
    line-height:1.3;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.svc-cat-chip:hover{
    border-color:var(--accent);
}

.svc-cat-chip.is-active{
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    color:#fff;
}

.svc-cat-chip:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* ---------- service list ---------- */

.svc-list{
    display:grid;
    gap:8px;
    max-height:380px;
    overflow-y:auto;
    padding-right:4px;
    overscroll-behavior:contain;
    scrollbar-color:rgba(255,255,255,.3) transparent;   /* dark scrollbar, not the white default */
    scrollbar-width:thin;
}

.svc-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:start;
    padding:12px;
    border:1px solid var(--field-line);
    border-radius:var(--radius-ui);
    background:var(--field-bg);
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}

.svc-row:hover{
    border-color:var(--accent);
}

.svc-row input{
    margin-top:3px;
    accent-color:var(--accent);
}

.svc-row:has(input:checked){
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
}

.svc-row:focus-within{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.svc-main{
    display:grid;
    gap:2px;
    min-width:0;
}

.svc-name{
    color:#fff;
    font-size:.88rem;
    font-weight:600;
    line-height:1.4;
}

.svc-sum{
    color:var(--secondary-text);
    font-size:.76rem;
    line-height:1.45;
}

.svc-cat{
    color:var(--accent);
    font-size:.68rem;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.svc-price{
    color:#fff;
    font-size:.82rem;
    font-weight:600;
    white-space:nowrap;
}

.svc-empty{
    color:#d3dde8;
    font-size:.85rem;
    line-height:1.6;
}

.svc-empty[hidden]{
    display:none;
}

.svc-empty a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}

#svc-picker[hidden]{
    display:none;
}

/* ---------- chosen service ---------- */

.svc-selected{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    padding:16px;
    border:1px solid var(--accent);
    border-radius:var(--radius-ui);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
}

.svc-selected[hidden]{
    display:none;
}

.svc-selected:focus{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.svc-selected-text{
    display:grid;
    gap:4px;
    min-width:0;
}

.svc-change{
    flex:none;
    padding:7px 16px;
    border:1px solid var(--field-line);
    border-radius:var(--radius-ui);
    background:transparent;
    color:#fff;
    font-size:.78rem;
    cursor:pointer;
    transition:border-color .2s ease;
}

.svc-change:hover{
    border-color:var(--accent);
}

/* ---------- website builder ---------- */

.site-config{
    display:grid;
    gap:14px;
}

.site-config[hidden]{
    display:none;
}

.feat-group{
    display:grid;
    gap:8px;
    min-width:0;
    border:0;
}

.feat-group legend{
    margin-bottom:4px;
    padding:0;
    color:var(--accent);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.feat{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:start;
    padding:10px 12px;
    border:1px solid var(--field-line);
    border-radius:var(--radius-ui);
    background:var(--field-bg);
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}

.feat:hover{
    border-color:var(--accent);
}

.feat:has(input:checked){
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 10%, transparent);
}

.feat:focus-within{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.feat input{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--accent);
}

.feat.is-required{
    cursor:default;
}

.feat-text{
    display:grid;
    gap:2px;
    min-width:0;
}

.feat-name{
    color:#fff;
    font-size:.84rem;
    font-weight:500;
}

.feat-sum{
    color:var(--secondary-text);
    font-size:.74rem;
    line-height:1.45;
}

.feat-price{
    color:#fff;
    font-size:.8rem;
    font-weight:600;
    white-space:nowrap;
}

/* ---------- price summary ---------- */

.pay-summary{
    display:grid;
    gap:12px;
    padding:16px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--radius-ui);
    background:rgba(0,0,0,.28);
}

.pay-summary[hidden]{
    display:none;
}

.sum-lines{
    list-style:none;
    display:grid;
    gap:6px;
}

.sum-lines li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#e5edf5;
    font-size:.82rem;
}

.sum-lines li span:last-child{
    white-space:nowrap;
}

.sum-totals div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-top:1px solid rgba(255,255,255,.14);
    font-size:.86rem;
}

.sum-totals dt{
    color:var(--secondary-text);
}

.sum-totals dd{
    color:#fff;
    font-weight:600;
}

.sum-total dd{
    font-size:1rem;
}

.sum-now dt,
.sum-now dd{
    color:var(--accent);
    font-weight:600;
}

/* ---------- terms checkbox ---------- */

.pay-field.pay-check label{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:start;
    color:#e5edf5;
    font-size:.78rem;
    font-weight:400;
    line-height:1.6;
    cursor:pointer;
}

.pay-field.pay-check input{
    width:18px;
    height:18px;
    margin-top:2px;
    padding:0;
    accent-color:var(--accent);
}

.pay-check a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}

#pay-after[hidden]{
    display:none;
}

/* ---------- existing order ---------- */

.pay-order-pay{
    display:grid;
    gap:16px;
    max-width:520px;
    margin:0 auto 18px;
    text-align:left;
}

.pay-order-pay[hidden]{
    display:none;
}

.pay-order .cta-row{
    margin-top:4px;
}

@media (max-width:520px){

    .svc-row{
        grid-template-columns:auto 1fr;
    }

    .svc-row .svc-price{
        grid-column:2;
    }

    .feat{
        grid-template-columns:auto 1fr;
    }

    .feat .feat-price{
        grid-column:2;
    }

    .svc-selected{
        flex-direction:column;
    }

    .svc-list{
        max-height:320px;
    }
}

/* running total that stays in view while the website extras are ticked */
.pay{
    overflow:hidden;
    overflow:clip;           /* clips the glow but, unlike hidden, lets sticky children stick */
}

.price-bar{
    position:sticky;
    top:12px;
    z-index:6;
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    border:1px solid var(--accent);
    border-radius:var(--radius-ui);
    background:rgba(10,22,19,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--secondary-text);
    font-size:.8rem;
}

.price-bar strong{
    color:#fff;
    font-weight:600;
    margin-left:4px;
}

.price-bar span:last-child strong{
    color:var(--accent);
}

@media (max-width:768px){
    .price-bar{
        top:56px;            /* clear of the sticky site header (50px tall on mobile) */
    }
}