/* =========================================================
   Alo Print Calculator — Frontend UI/UX v7.10
   ========================================================= */
.alo-pc-safe{
    --pc-primary:#2450b8;
    --pc-primary-dark:#183f9c;
    --pc-primary-soft:#eef4ff;
    --pc-text:#172033;
    --pc-muted:#667085;
    --pc-border:#e4e9f1;
    --pc-bg:#f7f9fc;
    --pc-success:#12a36a;
    max-width:1180px;
    margin:28px auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:22px;
    align-items:start;
    color:var(--pc-text);
    font-family:inherit;
}
.alo-pc-form,
.alo-pc-summary{
    background:#fff;
    border:1px solid var(--pc-border);
    border-radius:20px;
    box-shadow:0 10px 35px rgba(20,34,66,.06);
}
.alo-pc-form{padding:28px}
.alo-pc-heading{
    margin-bottom:24px;
    padding:0 0 22px;
    border-bottom:1px solid #edf0f5;
}
.alo-pc-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}
.alo-pc-kicker{
    display:inline-flex;
    align-items:center;
    margin-bottom:5px;
    color:var(--pc-primary);
    font-size:12px;
    font-weight:800;
    letter-spacing:-.1px;
}
.alo-pc-heading h2{
    margin:0 0 6px;
    font-size:25px;
    line-height:1.5;
    letter-spacing:-.4px;
}
.alo-pc-heading p{
    margin:0;
    color:var(--pc-muted);
    font-size:13px;
    line-height:1.9;
}
.alo-pc-live-badge{
    flex:none;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid #d9e8df;
    border-radius:999px;
    background:#f5fbf7;
    color:#17845b;
    font-size:11px;
    font-weight:700;
}
.alo-pc-live-badge i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#16a36c;
    box-shadow:0 0 0 4px rgba(22,163,108,.10);
}
.alo-pc-step{
    padding:19px;
    margin-bottom:16px;
    border:1px solid #e8edf4;
    border-radius:16px;
    background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
}
.alo-pc-step-head{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:17px;
}
.alo-pc-step-head>div{min-width:0}
.alo-pc-step-head strong{
    display:block;
    font-size:14px;
    line-height:1.6;
}
.alo-pc-step-head small{
    display:block;
    margin-top:2px;
    color:var(--pc-muted);
    font-size:11px;
    line-height:1.7;
}
.alo-pc-step-number{
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--pc-primary-soft);
    color:var(--pc-primary);
    font-size:13px;
    font-weight:900;
}
.alo-pc-field{margin:0 0 16px}
.alo-pc-field:last-child{margin-bottom:0}
.alo-pc-field label,
.alo-pc-upload>label{
    display:block;
    margin-bottom:8px;
    color:#344054;
    font-size:13px;
    font-weight:800;
}
.alo-pc-field label b,
.alo-pc-upload>label b{color:#e53935}
.alo-pc-select-shell{position:relative}
.alo-pc-field select,
.alo-pc-number,
.alo-pc-variable-select{
    width:100%;
    min-height:51px;
    box-sizing:border-box;
    border:1px solid #d8dee8;
    border-radius:11px;
    padding:8px 14px;
    background:#fff;
    color:#344054;
    font:inherit;
    outline:none;
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.alo-pc-field select{
    appearance:none;
    padding-left:44px;
    cursor:pointer;
}
.alo-pc-select-arrow{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-55%);
    color:#667085;
    pointer-events:none;
    font-size:18px;
    line-height:1;
}
.alo-pc-field select:hover,
.alo-pc-number:hover,
.alo-pc-variable-select:hover{border-color:#b9c5d7}
.alo-pc-field select:focus,
.alo-pc-number:focus,
.alo-pc-variable-select:focus{
    border-color:var(--pc-primary);
    box-shadow:0 0 0 4px rgba(36,80,184,.10);
}
.alo-pc-dynamic{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:2px;
}
.alo-pc-dynamic>.alo-pc-field,
.alo-pc-dynamic>.alo-pc-binding-vars{
    min-width:0;
}
.alo-pc-dynamic>.alo-pc-binding-field{
    grid-column:auto;
}
.alo-pc-binding-vars{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.alo-pc-service-field{margin-bottom:0}
.alo-pc-service-desc{
    background:#f7f9fc;
    border:1px solid #edf0f5;
    border-radius:11px;
    padding:11px 13px;
    margin:-3px 0 18px;
    color:var(--pc-muted);
    font-size:12px;
}
.alo-pc-hint{
    display:flex;
    gap:10px;
    align-items:center;
    background:#f7f9fc;
    border:1px dashed #d6ddea;
    border-radius:12px;
    padding:13px;
    margin-top:8px;
}
.alo-pc-hint-icon{
    width:31px;height:31px;flex:0 0 31px;
    border-radius:50%;
    background:var(--pc-primary-soft);
    color:var(--pc-primary);
    display:flex;align-items:center;justify-content:center;
}
.alo-pc-hint strong,.alo-pc-hint small{display:block}
.alo-pc-hint small{color:var(--pc-muted);margin-top:2px;font-size:11px}
.alo-pc-number{text-align:center}
.alo-pc-upload{margin:0}
.alo-pc-upload-box{
    position:relative;
    min-height:92px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    border:1.5px dashed #c8d2e2;
    border-radius:14px;
    background:#fafcff;
    cursor:pointer;
    transition:border-color .18s,background .18s,transform .18s;
}
.alo-pc-upload-box:hover{
    border-color:var(--pc-primary);
    background:#f6f9ff;
}
.alo-pc-upload-box input{
    position:absolute;
    width:1px;height:1px;
    opacity:0;
    pointer-events:none;
}
.alo-pc-upload-icon{
    width:42px;height:42px;flex:0 0 42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:var(--pc-primary-soft);
    color:var(--pc-primary);
    font-size:23px;
    font-weight:700;
}
.alo-pc-upload-copy{flex:1;min-width:0}
.alo-pc-upload-copy strong,
.alo-pc-upload-copy small{display:block}
.alo-pc-upload-copy strong{font-size:13px;color:#344054}
.alo-pc-upload-copy small{margin-top:3px;color:var(--pc-muted);font-size:11px;line-height:1.7}
.alo-pc-upload-button{
    flex:none;
    padding:9px 13px;
    border:1px solid #d8e1f0;
    border-radius:9px;
    background:#fff;
    color:var(--pc-primary);
    font-size:11px;
    font-weight:800;
}
.alo-pc-file-status{
    min-height:18px;
    margin-top:7px;
    color:var(--pc-primary);
    font-size:11px;
    line-height:1.7;
}
.alo-pc-note{margin:0}
.alo-pc-note-input{
    width:100%;
    min-height:100px;
    box-sizing:border-box;
    resize:vertical;
    border:1px solid #d8dee8;
    border-radius:11px;
    padding:12px 14px;
    background:#fff;
    color:#344054;
    font:inherit;
    line-height:1.9;
    outline:none;
    transition:border-color .18s,box-shadow .18s;
}
.alo-pc-note-input:focus{
    border-color:var(--pc-primary);
    box-shadow:0 0 0 4px rgba(36,80,184,.10);
}
.alo-pc-action{margin-top:5px}
.alo-pc-order-btn{
    width:100%;
    min-height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--pc-primary),#2e64d0);
    color:#fff;
    font:inherit;
    font-weight:800;
    font-size:14px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(36,80,184,.18);
    transition:transform .18s,box-shadow .18s,opacity .18s;
}
.alo-pc-order-btn:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 11px 25px rgba(36,80,184,.24);
}
.alo-pc-order-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
}
.alo-pc-order-arrow{font-size:18px}
.alo-pc-secure-note{
    display:block;
    margin-top:9px;
    color:#98a2b3;
    font-size:10px;
    line-height:1.8;
    text-align:center;
}
.alo-pc-order-message{
    margin-top:8px;
    padding:0;
    color:#b42318;
    font-size:12px;
    line-height:1.8;
}
.alo-pc-summary{
    position:sticky;
    top:20px;
    overflow:hidden;
}
.alo-pc-summary-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:19px 20px;
    border-bottom:1px solid #edf0f5;
}
.alo-pc-summary-head>div>span{
    display:block;
    color:var(--pc-primary);
    font-size:10px;
    font-weight:800;
    margin-bottom:2px;
}
.alo-pc-summary h3{
    margin:0;
    padding:0;
    border:0;
    font-size:18px;
    line-height:1.6;
}
.alo-pc-summary-icon{
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    border-radius:11px;
    background:#f1f8f5;
    color:#159566;
    font-weight:900;
}
.alo-pc-summary-body{padding:7px 20px 10px}
.alo-pc-summary-empty{
    margin:0;
    padding:15px 0;
    color:var(--pc-muted);
    font-size:12px;
    line-height:1.9;
}
.alo-pc-row,
.alo-pc-summary-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid #edf0f4;
    font-size:12px;
    line-height:1.75;
}
.alo-pc-row span,
.alo-pc-summary-item span{color:var(--pc-muted)}
.alo-pc-row b,
.alo-pc-summary-item strong{
    color:#1d2939;
    text-align:left;
    font-weight:800;
}
.alo-pc-notice,
.alo-pc-price-note{
    margin:11px 0 5px;
    padding:10px 11px;
    border-radius:9px;
    background:#fffaeb;
    color:#8a5a00;
    font-size:11px;
    line-height:1.8;
}
.alo-pc-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px;
    background:linear-gradient(180deg,#f8faff,#f3f6fc);
    border-top:1px solid #edf0f5;
}
.alo-pc-total div span,
.alo-pc-total div small{display:block}
.alo-pc-total div span{font-size:13px;font-weight:900}
.alo-pc-total div small{margin-top:2px;color:#98a2b3;font-size:10px}
.alo-pc-total strong{
    color:var(--pc-primary);
    font-size:19px;
    font-weight:900;
    white-space:nowrap;
}
.alo-pc-empty{
    padding:20px;
    border:1px solid #ddd;
    border-radius:12px;
}

/* Tablet */
@media(max-width:950px){
    .alo-pc-safe{
        grid-template-columns:minmax(0,1fr) 310px;
        gap:16px;
        margin:20px auto;
    }
    .alo-pc-form{padding:22px}
}

/* Mobile */
@media(max-width:760px){
    .alo-pc-safe{
        display:flex;
        flex-direction:column;
        width:calc(100% - 24px);
        max-width:none;
        margin:12px auto 24px;
        gap:14px;
    }
    .alo-pc-form{
        padding:16px;
        border-radius:16px;
        /* .alo-pc-safe is a column flex container on mobile; without an
           explicit width here, .alo-pc-form's cross-axis size follows its
           own (potentially oversized) content instead of the container —
           unlike .alo-pc-summary just below, which already sets width:100%.
           A long real filename inside a file card was enough to make that
           content wider than the viewport, dragging the whole form (and
           visually, the page) wider than the screen along with it. */
        width:100%;
        min-width:0;
    }
    .alo-pc-summary{
        position:static;
        width:100%;
        border-radius:16px;
        order:2;
    }
    .alo-pc-title-row{display:block}
    .alo-pc-live-badge{display:inline-flex;margin-top:12px}
    .alo-pc-heading{margin-bottom:16px;padding-bottom:17px}
    .alo-pc-heading h2{font-size:21px}
    .alo-pc-heading p{font-size:12px}
    .alo-pc-step{padding:15px;margin-bottom:12px;border-radius:14px}
    .alo-pc-step-head{margin-bottom:13px}
    .alo-pc-dynamic{
        grid-template-columns:1fr;
        gap:0;
    }
    .alo-pc-dynamic>.alo-pc-binding-field{grid-column:auto}
    .alo-pc-binding-vars{
        grid-template-columns:1fr;
        gap:0;
    }
    .alo-pc-upload-box{min-height:82px;padding:12px}
    .alo-pc-upload-icon{width:38px;height:38px;flex-basis:38px}
    .alo-pc-upload-button{padding:8px 10px}
    .alo-pc-summary-head{padding:15px 16px}
    .alo-pc-summary-body{padding:6px 16px 9px}
    .alo-pc-total{padding:16px}
}

/* Very small phones */
@media(max-width:430px){
    .alo-pc-safe{width:calc(100% - 16px)}
    .alo-pc-form{padding:13px}
    .alo-pc-heading h2{font-size:19px}
    .alo-pc-step{padding:13px}
    .alo-pc-step-number{width:28px;height:28px;flex-basis:28px;border-radius:9px}
    .alo-pc-upload-copy small{font-size:10px}
    .alo-pc-upload-button{display:none}
    .alo-pc-order-btn{min-height:52px}
    .alo-pc-row{font-size:11px}
}


/* v7.11 — Black / Red theme */
.alo-pc-safe{
    --pc-primary:#d71920;
    --pc-primary-dark:#a90f15;
    --pc-primary-soft:#fff1f2;
    --pc-text:#171717;
    --pc-muted:#666;
}
.alo-pc-live-badge{
    border-color:#f1c9cb;
    background:#fff7f7;
    color:#b51218;
}
.alo-pc-live-badge i{
    background:#d71920;
    box-shadow:0 0 0 4px rgba(215,25,32,.10);
}
.alo-pc-kicker,
.alo-pc-total strong{
    color:#d71920;
}
.alo-pc-step-number,
.alo-pc-upload-icon,
.alo-pc-summary-icon{
    background:#fff1f2;
    color:#d71920;
}
.alo-pc-field select:focus,
.alo-pc-number:focus,
.alo-pc-variable-select:focus,
.alo-pc-note-input:focus{
    border-color:#d71920;
    box-shadow:0 0 0 4px rgba(215,25,32,.10);
}
.alo-pc-field select:hover,
.alo-pc-number:hover,
.alo-pc-variable-select:hover{
    border-color:#c9a0a2;
}
.alo-pc-upload-box:hover{
    border-color:#d71920;
    background:#fff8f8;
}
.alo-pc-upload-button{
    color:#d71920;
}
.alo-pc-summary-icon{
    color:#d71920;
    background:#fff1f2;
}
.alo-pc-total{
    background:linear-gradient(180deg,#fafafa,#f3f3f3);
}

/* Payment CTA is intentionally inside the summary card, directly under final total. */
.alo-pc-summary .alo-pc-action{
    padding:14px 20px 17px;
    margin:0;
    background:#fff;
}
.alo-pc-summary .alo-pc-order-btn{
    margin:0;
    background:#d71920;
    color:#fff;
    border-radius:11px;
    box-shadow:0 7px 17px rgba(215,25,32,.18);
}
.alo-pc-summary .alo-pc-order-btn:not(:disabled):hover{
    background:#b90f15;
    box-shadow:0 10px 22px rgba(215,25,32,.25);
}
.alo-pc-summary .alo-pc-order-btn:disabled{
    background:#1d1d1d;
    color:#fff;
    opacity:.42;
    box-shadow:none;
}
.alo-pc-summary .alo-pc-secure-note{
    margin-top:8px;
    color:#999;
}
.alo-pc-summary .alo-pc-order-message{
    margin-top:7px;
}

/* Keep the summary CTA clean on small screens. */
@media(max-width:760px){
    .alo-pc-summary .alo-pc-action{
        padding:12px 16px 15px;
    }
}


/* v7.12 — richer black/red visual treatment */
.alo-pc-safe{
    --pc-primary:#e21b23;
    --pc-primary-dark:#b90f16;
    --pc-primary-soft:#fff0f1;
    --pc-text:#171717;
    --pc-muted:#6b6b6b;
    --pc-border:#e7e1e2;
    --pc-bg:#faf7f7;
}

/* Main surfaces */
.alo-pc-form,
.alo-pc-summary{
    border-color:#e6dedf;
    box-shadow:0 12px 38px rgba(40,15,18,.08);
}
.alo-pc-form{
    background:linear-gradient(180deg,#fff 0%,#fffdfd 100%);
}
.alo-pc-heading{
    border-bottom-color:#f0e5e6;
}
.alo-pc-title-row{
    position:relative;
}
.alo-pc-title-row:before{
    content:"";
    position:absolute;
    right:0;
    top:-8px;
    width:46px;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg,#e21b23,#ff6a6f);
}
.alo-pc-kicker{
    color:#d71920;
}
.alo-pc-heading h2{
    color:#151515;
}

/* Steps become more colorful and easier to scan */
.alo-pc-step{
    border-color:#eee5e6;
    background:linear-gradient(135deg,#fff 0%,#fffafa 100%);
    box-shadow:0 3px 12px rgba(50,15,18,.025);
}
.alo-pc-step-number{
    background:linear-gradient(135deg,#e21b23,#c9141b);
    color:#fff;
    box-shadow:0 5px 12px rgba(226,27,35,.18);
}
.alo-pc-step-head strong{
    color:#202020;
}

/* Inputs */
.alo-pc-field select,
.alo-pc-number,
.alo-pc-variable-select,
.alo-pc-note-input{
    border-color:#ddd5d6;
    background:#fff;
}
.alo-pc-field select:hover,
.alo-pc-number:hover,
.alo-pc-variable-select:hover{
    border-color:#e08b8f;
    background:#fff;
}
.alo-pc-field select:focus,
.alo-pc-number:focus,
.alo-pc-variable-select:focus,
.alo-pc-note-input:focus{
    border-color:#e21b23;
    box-shadow:0 0 0 4px rgba(226,27,35,.11);
}

/* Live badge */
.alo-pc-live-badge{
    border-color:#f1c2c5;
    background:linear-gradient(135deg,#fff5f5,#fffafa);
    color:#c3131a;
}
.alo-pc-live-badge i{
    background:#e21b23;
    box-shadow:0 0 0 4px rgba(226,27,35,.12);
}

/* Upload area */
.alo-pc-upload-box{
    border-color:#e1c7c9;
    background:linear-gradient(135deg,#fffafa,#fff);
}
.alo-pc-upload-box:hover{
    border-color:#e21b23;
    background:linear-gradient(135deg,#fff1f2,#fffafa);
}
.alo-pc-upload-icon{
    background:linear-gradient(135deg,#e21b23,#c9141b);
    color:#fff;
    box-shadow:0 6px 14px rgba(226,27,35,.18);
}
.alo-pc-upload-button{
    border-color:#efc4c7;
    background:#fff5f6;
    color:#c3131a;
}

/* Summary */
.alo-pc-summary{
    background:#fff;
}
.alo-pc-summary-head{
    background:linear-gradient(135deg,#fff,#fff7f7);
    border-bottom-color:#f0e4e5;
}
.alo-pc-summary-head>div>span{
    color:#d71920;
}
.alo-pc-summary-icon{
    background:linear-gradient(135deg,#e21b23,#c9141b);
    color:#fff;
    box-shadow:0 6px 14px rgba(226,27,35,.18);
}
.alo-pc-row b,
.alo-pc-summary-item strong{
    color:#181818;
}
.alo-pc-total{
    background:linear-gradient(135deg,#fff5f5 0%,#f9eeee 100%);
    border-top-color:#f0d9da;
}
.alo-pc-total strong{
    color:#d71920;
    text-shadow:0 1px 0 #fff;
}

/* Payment button */
.alo-pc-summary .alo-pc-action{
    background:linear-gradient(180deg,#fff,#fffafa);
}
.alo-pc-summary .alo-pc-order-btn{
    background:linear-gradient(135deg,#e21b23 0%,#c9141b 100%);
    box-shadow:0 9px 22px rgba(226,27,35,.24);
}
.alo-pc-summary .alo-pc-order-btn:not(:disabled):hover{
    background:linear-gradient(135deg,#ef252d 0%,#b90f16 100%);
    box-shadow:0 12px 27px rgba(226,27,35,.30);
}
.alo-pc-summary .alo-pc-order-btn:disabled{
    background:linear-gradient(135deg,#343434,#171717);
    opacity:.42;
}

/* Notices */
.alo-pc-notice,
.alo-pc-price-note{
    background:#fff8e9;
    border:1px solid #f3dfae;
    color:#795400;
}

/* Make the empty state feel intentional */
.alo-pc-summary-empty{
    color:#7b7374;
    background:#fffafa;
    border-radius:10px;
    padding:13px 12px;
}

/* Mobile polish */
@media(max-width:760px){
    .alo-pc-form,
    .alo-pc-summary{
        box-shadow:0 8px 25px rgba(40,15,18,.07);
    }
    .alo-pc-title-row:before{
        top:-5px;
        width:34px;
        height:3px;
    }
}


/* v7.13 — refined visual polish + optional upload */
.alo-pc-safe{
    background:
      radial-gradient(circle at 92% 0%, rgba(226,27,35,.055), transparent 28%),
      radial-gradient(circle at 5% 55%, rgba(226,27,35,.035), transparent 24%);
    padding:4px;
    border-radius:24px;
}
.alo-pc-form,
.alo-pc-summary{
    position:relative;
}
.alo-pc-form:before,
.alo-pc-summary:before{
    content:"";
    position:absolute;
    top:0;
    right:28px;
    left:28px;
    height:3px;
    border-radius:0 0 8px 8px;
    background:linear-gradient(90deg,#151515 0%,#151515 42%,#e21b23 42%,#ff5960 100%);
}
.alo-pc-form{
    padding-top:31px;
}
.alo-pc-summary{
    overflow:hidden;
}
.alo-pc-heading h2{
    font-weight:900;
    letter-spacing:-.7px;
}
.alo-pc-heading p{
    max-width:620px;
}
.alo-pc-live-badge{
    box-shadow:0 5px 16px rgba(226,27,35,.06);
}
.alo-pc-step{
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.alo-pc-step:hover{
    border-color:#e8c9cb;
    box-shadow:0 7px 20px rgba(80,20,24,.045);
}
.alo-pc-step-head{
    position:relative;
}
.alo-pc-step-head:after{
    content:"";
    position:absolute;
    right:43px;
    bottom:-9px;
    width:24px;
    height:2px;
    border-radius:4px;
    background:#f1d1d3;
}
.alo-pc-step-head strong{
    font-weight:900;
}
.alo-pc-field label,
.alo-pc-upload>label{
    color:#262626;
}
.alo-pc-field label b{
    font-size:14px;
}
.alo-pc-optional{
    display:inline-flex;
    align-items:center;
    padding:2px 7px;
    margin-right:5px;
    border-radius:999px;
    background:#f2f2f2;
    color:#777;
    font-size:9px;
    font-weight:700;
    vertical-align:middle;
}
.alo-pc-upload-box{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.alo-pc-upload-copy strong{
    font-weight:900;
}
.alo-pc-summary-head{
    padding-top:23px;
}
.alo-pc-summary-head h3{
    font-weight:900;
}
.alo-pc-summary-body{
    background:linear-gradient(180deg,#fff 0%,#fffdfd 100%);
}
.alo-pc-total{
    position:relative;
}
.alo-pc-total:before{
    content:"";
    position:absolute;
    right:20px;
    left:20px;
    top:0;
    height:1px;
    background:#efcfd1;
}
.alo-pc-total strong{
    font-size:20px;
}
.alo-pc-summary .alo-pc-action{
    border-top:1px solid #f1e3e4;
}
.alo-pc-summary .alo-pc-order-btn{
    min-height:57px;
    font-size:14px;
    letter-spacing:-.1px;
}
.alo-pc-summary .alo-pc-order-btn:after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:10px;
    pointer-events:none;
    box-shadow:inset 0 1px rgba(255,255,255,.2);
}
.alo-pc-summary .alo-pc-order-btn{
    position:relative;
}
.alo-pc-secure-note{
    font-size:10px;
}

/* On desktop, give the summary a slightly stronger visual role. */
@media(min-width:951px){
    .alo-pc-summary{
        transform:translateY(2px);
    }
}

/* Mobile */
@media(max-width:760px){
    .alo-pc-safe{
        padding:2px;
        border-radius:20px;
    }
    .alo-pc-form{
        padding-top:25px;
    }
    .alo-pc-form:before,
    .alo-pc-summary:before{
        right:18px;
        left:18px;
    }
    .alo-pc-step:hover{
        transform:none;
    }
}


/* =========================================================
   v7.14 — UI/UX visual refinement only
   Structure, calculation, checkout and upload logic unchanged.
   ========================================================= */
.alo-pc-safe{
    --pc-primary:#df1820;
    --pc-primary-dark:#b90d14;
    --pc-primary-soft:#fff0f1;
    --pc-text:#151515;
    --pc-muted:#747474;
    --pc-border:#eadfe0;
    --pc-bg:#fff7f7;
    position:relative;
    isolation:isolate;
    max-width:1210px;
    padding:18px;
    border-radius:28px;
    background:
        radial-gradient(500px 240px at 100% 0%,rgba(223,24,32,.10),transparent 70%),
        radial-gradient(430px 260px at 0% 55%,rgba(223,24,32,.045),transparent 72%),
        #fffafa;
}
.alo-pc-safe:after{
    content:"";
    position:absolute;
    z-index:-1;
    top:10px;
    right:10px;
    width:110px;
    height:110px;
    border-radius:50%;
    background:rgba(223,24,32,.055);
    filter:blur(1px);
}
.alo-pc-form,
.alo-pc-summary{
    border:1px solid #eadfe0;
    box-shadow:0 16px 45px rgba(55,17,20,.075);
}
.alo-pc-form{
    background:rgba(255,255,255,.96);
    padding:31px;
}
.alo-pc-form:before,
.alo-pc-summary:before{
    right:24px;
    left:24px;
    height:4px;
    background:linear-gradient(90deg,#171717 0 28%,#df1820 28% 100%);
}
.alo-pc-heading{
    padding-bottom:25px;
    border-bottom:1px solid #f0e3e4;
}
.alo-pc-title-row{
    align-items:center;
}
.alo-pc-title-row:before{
    display:none;
}
.alo-pc-kicker{
    position:relative;
    padding-right:12px;
    color:#df1820;
    font-size:12px;
    font-weight:900;
}
.alo-pc-kicker:before{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#df1820;
    box-shadow:0 0 0 5px rgba(223,24,32,.10);
    transform:translateY(-50%);
}
.alo-pc-heading h2{
    font-size:27px;
    font-weight:950;
    color:#111;
    letter-spacing:-.8px;
}
.alo-pc-heading p{
    color:#777;
    max-width:650px;
}
.alo-pc-live-badge{
    padding:9px 13px;
    border:1px solid #f0c7ca;
    background:#fff4f5;
    color:#bd1017;
    box-shadow:0 7px 18px rgba(223,24,32,.07);
}
.alo-pc-live-badge i{
    background:#df1820;
    box-shadow:0 0 0 4px rgba(223,24,32,.10);
}
.alo-pc-step{
    position:relative;
    padding:21px;
    margin-bottom:17px;
    border:1px solid #eee3e4;
    border-radius:18px;
    background:linear-gradient(145deg,#fff 0%,#fffafa 100%);
    box-shadow:0 5px 18px rgba(45,15,18,.035);
}
.alo-pc-step:before{
    content:"";
    position:absolute;
    top:19px;
    right:0;
    width:3px;
    height:34px;
    border-radius:5px 0 0 5px;
    background:#df1820;
}
.alo-pc-step-head{
    margin-bottom:18px;
}
.alo-pc-step-number{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:11px;
    background:linear-gradient(135deg,#e31b23,#c50f16);
    color:#fff;
    box-shadow:0 7px 16px rgba(223,24,32,.20);
}
.alo-pc-step-head strong{
    color:#171717;
    font-size:14px;
    font-weight:900;
}
.alo-pc-step-head small{
    color:#858585;
}
.alo-pc-step-head:after{
    right:45px;
    bottom:-10px;
    width:30px;
    height:2px;
    background:#f2cfd1;
}
.alo-pc-field label,
.alo-pc-upload>label{
    color:#282828;
    font-weight:900;
}
.alo-pc-field select,
.alo-pc-number,
.alo-pc-variable-select,
.alo-pc-note-input{
    min-height:53px;
    border-color:#dfd4d5;
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 5px rgba(30,10,12,.025);
}
.alo-pc-field select:hover,
.alo-pc-number:hover,
.alo-pc-variable-select:hover{
    border-color:#df9b9f;
    box-shadow:0 4px 12px rgba(223,24,32,.045);
}
.alo-pc-field select:focus,
.alo-pc-number:focus,
.alo-pc-variable-select:focus,
.alo-pc-note-input:focus{
    border-color:#df1820;
    box-shadow:0 0 0 4px rgba(223,24,32,.10);
}
.alo-pc-upload-box{
    min-height:98px;
    border:1.5px dashed #e2b9bc;
    border-radius:15px;
    background:linear-gradient(135deg,#fff8f8,#fff);
    box-shadow:inset 0 0 25px rgba(223,24,32,.018);
}
.alo-pc-upload-box:hover{
    border-color:#df1820;
    background:linear-gradient(135deg,#fff0f1,#fff9f9);
}
.alo-pc-upload-icon{
    background:linear-gradient(135deg,#df1820,#b90d14);
    color:#fff;
    box-shadow:0 8px 18px rgba(223,24,32,.20);
}
.alo-pc-upload-button{
    border-color:#efc3c6;
    background:#fff1f2;
    color:#bd1017;
}
.alo-pc-optional{
    background:#f4f1f1;
    color:#777;
}
.alo-pc-summary{
    background:#fff;
}
.alo-pc-summary-head{
    padding:22px 22px 18px;
    background:linear-gradient(135deg,#fff 20%,#fff3f4 100%);
    border-bottom:1px solid #f0e0e2;
}
.alo-pc-summary-head>div>span{
    color:#df1820;
    font-weight:900;
}
.alo-pc-summary-head h3{
    color:#111;
    font-size:19px;
    font-weight:950;
}
.alo-pc-summary-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    background:linear-gradient(135deg,#df1820,#bd0e15);
    color:#fff;
    box-shadow:0 8px 18px rgba(223,24,32,.20);
}
.alo-pc-summary-body{
    padding:8px 22px 11px;
}
.alo-pc-row{
    padding:13px 0;
    border-bottom:1px solid #f1e9e9;
}
.alo-pc-row span{
    color:#777;
}
.alo-pc-row b{
    color:#161616;
    font-weight:900;
}
.alo-pc-summary-empty{
    margin:8px 0;
    border:1px dashed #e7cacc;
    background:#fff8f8;
    color:#777;
}
.alo-pc-total{
    padding:20px 22px;
    background:linear-gradient(135deg,#fff1f2 0%,#ffe8ea 100%);
    border-top:1px solid #f2d1d3;
}
.alo-pc-total:before{
    right:22px;
    left:22px;
    background:#e9aeb2;
}
.alo-pc-total div span{
    color:#151515;
    font-weight:950;
}
.alo-pc-total strong{
    color:#c81018;
    font-size:21px;
    font-weight:950;
}
.alo-pc-summary .alo-pc-action{
    padding:15px 22px 19px;
    background:#fff;
    border-top:1px solid #f1e2e3;
}
.alo-pc-summary .alo-pc-order-btn{
    min-height:58px;
    border-radius:13px;
    background:linear-gradient(135deg,#e21b23 0%,#c30e15 100%);
    box-shadow:0 10px 24px rgba(223,24,32,.23);
    font-weight:950;
}
.alo-pc-summary .alo-pc-order-btn:not(:disabled):hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#ed252d 0%,#b90d14 100%);
    box-shadow:0 13px 28px rgba(223,24,32,.30);
}
.alo-pc-summary .alo-pc-order-btn:disabled{
    background:linear-gradient(135deg,#292929,#151515);
    opacity:.43;
}
.alo-pc-secure-note{
    color:#999;
}
@media(max-width:950px){
    .alo-pc-safe{padding:12px}
    .alo-pc-form{padding:25px}
}
@media(max-width:760px){
    .alo-pc-safe{
        width:calc(100% - 12px);
        padding:6px;
        border-radius:21px;
    }
    .alo-pc-form{padding:18px}
    .alo-pc-form:before,
    .alo-pc-summary:before{right:18px;left:18px}
    .alo-pc-heading h2{font-size:22px}
    .alo-pc-title-row{align-items:flex-start}
    .alo-pc-live-badge{margin-top:11px}
    .alo-pc-step{padding:16px;border-radius:15px}
    .alo-pc-summary-head{padding:18px 17px 15px}
    .alo-pc-summary-body{padding:7px 17px 9px}
    .alo-pc-total{padding:17px}
    .alo-pc-summary .alo-pc-action{padding:13px 17px 17px}
}


/* v7.16 — remove upload icon from inside the upload box */
.alo-pc-upload-box .alo-pc-upload-icon{
    display:none !important;
}
.alo-pc-upload-box .alo-pc-upload-copy{
    margin-right:0;
}

/* =========================================================
   v8.0 — multi-file upload with per-file settings
   ========================================================= */
.alo-pc-upload-box.alo-pc-drag-over{
    border-color:var(--pc-primary);
    background:linear-gradient(135deg,#fff0f1,#fffafa);
}
.alo-pc-files{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:16px;
}
.alo-pc-file-card{
    border:1px solid #eee3e4;
    border-radius:16px;
    background:linear-gradient(180deg,#fff 0%,#fffdfd 100%);
    box-shadow:0 4px 16px rgba(45,15,18,.035);
    overflow:hidden;
}
.alo-pc-file-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #f1e6e7;
    background:#fffafa;
}
.alo-pc-file-thumb{
    flex:0 0 46px;
    width:46px;
    height:58px;
    border-radius:7px;
    border:1px solid #e6dbdc;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.alo-pc-file-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.alo-pc-file-thumb-icon{
    font-size:10px;
    font-weight:900;
    color:var(--pc-primary);
    letter-spacing:.3px;
}
.alo-pc-file-meta{flex:1;min-width:0}
.alo-pc-file-name{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:#222;
}
.alo-pc-file-status{
    display:block;
    margin-top:3px;
    color:var(--pc-muted);
    font-size:11px;
}
.alo-pc-file-remove{
    flex:none;
    width:30px;
    height:30px;
    border:1px solid #eee0e1;
    border-radius:9px;
    background:#fff;
    color:#9a9a9a;
    font-size:13px;
    cursor:pointer;
    transition:color .15s,border-color .15s,background .15s;
}
.alo-pc-file-remove:hover{
    color:var(--pc-primary);
    border-color:#f0c7ca;
    background:#fff5f6;
}
.alo-pc-file-body{padding:16px}
.alo-pc-file-service-field{margin-bottom:14px}
.alo-pc-file-row{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.alo-pc-file-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:#faf7f7;
    border-top:1px solid #f1e6e7;
    font-size:12px;
    color:var(--pc-muted);
}
.alo-pc-file-footer b{
    color:var(--pc-primary);
    font-size:14px;
    font-weight:900;
}
@media(max-width:760px){
    .alo-pc-file-row{grid-template-columns:1fr}
    .alo-pc-file-body{padding:14px}
}

/* =========================================================
   v8.1 — optional "no file / send via messenger" order path
   ========================================================= */
.alo-pc-upload-sep{
    position:relative;
    margin:14px 0;
    text-align:center;
    color:#aaa;
    font-size:11px;
}
.alo-pc-upload-sep:before{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    left:0;
    height:1px;
    background:#eee1e2;
    z-index:0;
}
.alo-pc-upload-sep span{
    position:relative;
    z-index:1;
    padding:0 10px;
    background:#fffdfd;
}
.alo-pc-add-manual{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    width:100%;
    box-sizing:border-box;
    padding:13px 14px;
    border:1.5px dashed #d8dee8;
    border-radius:14px;
    background:#fafcff;
    cursor:pointer;
    transition:border-color .18s,background .18s;
    font:inherit;
}
.alo-pc-add-manual:hover{
    border-color:var(--pc-primary);
    background:#fff6f6;
}
.alo-pc-add-manual strong{
    color:#344054;
    font-size:12.5px;
    font-weight:800;
}
.alo-pc-add-manual small{
    display:block;
    margin-top:2px;
    color:var(--pc-muted);
    font-size:11px;
    line-height:1.7;
}
.alo-pc-manual-thumb{
    background:#f7f9fc;
    border-style:dashed;
}
.alo-pc-manual-thumb .alo-pc-file-thumb-icon{
    font-size:18px;
}
.alo-pc-file-status.alo-pc-manual-note{
    color:var(--pc-primary);
}

/* =========================================================
   v8.2 — mode-choice step, softer visuals, upload feedback
   ========================================================= */
.alo-pc-step[hidden],
.alo-pc-add-manual[hidden],
.alo-pc-mode-choices[hidden],
.alo-pc-mode-summary[hidden]{
    display:none !important;
}

.alo-pc-mode-choices{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.alo-pc-mode-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    padding:24px 16px;
    border-radius:18px;
    cursor:pointer;
    font:inherit;
    position:relative;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
/* Elementor's global kit button reset (`.elementor-kit-6 button{border-style:
   none;background-color:var(--e-global-color-primary)}`) targets this
   element too — since these cards are <button> elements — and its selector
   (class+type) out-specifies a plain `.alo-pc-mode-card` rule regardless of
   source order, silently killing the border (border-style:none makes width/
   color irrelevant) and replacing the background with the theme's red. That
   was true even before this round (the border was NEVER actually visible),
   which is exactly the client's complaint. Doubling the class raises
   specificity above Elementor's rule, scoped to only the contested
   properties (see the CSS-specificity notes elsewhere in this file for why
   we boost narrowly instead of the whole rule or reaching for !important). */
.alo-pc-mode-card.alo-pc-mode-card{
    border:2px solid #e0c7c9;
    background:#fff;
    box-shadow:0 4px 16px rgba(45,15,18,.055);
}
.alo-pc-mode-card:hover{
    border-color:#e2b9bc;
    box-shadow:0 8px 22px rgba(45,15,18,.07);
    transform:translateY(-2px);
}
.alo-pc-mode-card.is-selected{
    border-color:var(--pc-primary);
    background:linear-gradient(180deg,#fff6f6 0%,#fffafa 100%);
    box-shadow:0 8px 22px rgba(223,24,32,.10);
}
.alo-pc-mode-card.is-selected:after{
    content:"✓";
    position:absolute;
    top:10px;
    left:10px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--pc-primary);
    color:#fff;
    font-size:11px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}
.alo-pc-mode-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--pc-primary-soft);
    color:var(--pc-primary);
    font-size:20px;
}
.alo-pc-mode-card strong{
    font-size:13.5px;
    color:#222;
    font-weight:800;
}
.alo-pc-mode-card small{
    color:var(--pc-muted);
    font-size:11px;
    line-height:1.7;
}
.alo-pc-mode-summary{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border:1.5px solid var(--pc-primary);
    border-radius:16px;
    background:linear-gradient(180deg,#fff6f6 0%,#fffafa 100%);
}
.alo-pc-mode-summary-icon{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--pc-primary);
    color:#fff;
    font-size:14px;
}
.alo-pc-mode-summary-text{
    flex:1;
    min-width:0;
    font-size:13px;
    font-weight:800;
    color:#222;
}
.alo-pc-mode-change{
    flex:none;
    padding:7px 14px;
    border:1px solid #e6dbdc;
    border-radius:999px;
    background:#fff;
    color:var(--pc-primary);
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    transition:border-color .18s,background .18s;
}
.alo-pc-mode-change:hover{
    border-color:var(--pc-primary);
    background:#fff6f6;
}

/* Redesigned centered upload dropzone.
   `display` is repeated as a doubled class to out-specificity the legacy
   ".alo-pc-upload>label{display:block}" rule, which otherwise wins over a
   plain ".alo-pc-upload-box{display:flex}" and collapses this back to
   normal block/inline flow (text overlapping the button). Sizing stays in
   a normal-specificity rule below so the mobile override can still win it
   via source order. */
.alo-pc-upload-box.alo-pc-upload-box{
    display:flex;
}
.alo-pc-upload-box{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    min-height:auto;
    padding:34px 20px;
    border-radius:20px;
}
.alo-pc-upload-cloud-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--pc-primary-soft);
    color:var(--pc-primary);
    font-size:24px;
    margin-bottom:4px;
}
.alo-pc-upload-box .alo-pc-upload-copy{
    flex:none;
    text-align:center;
}
.alo-pc-upload-box .alo-pc-upload-copy strong{
    font-size:14px;
}
.alo-pc-upload-box .alo-pc-upload-copy small{
    margin-top:4px;
}
.alo-pc-upload-box .alo-pc-upload-button{
    margin-top:8px;
    padding:11px 24px;
    border-radius:999px;
}

.alo-pc-add-manual{
    margin-top:2px;
}

/* Upload progress / success feedback */
.alo-pc-file-card{
    border-radius:18px;
    border-right:3px solid #d8dee8;
    transition:border-color .25s ease,box-shadow .25s ease;
}
.alo-pc-file-card.is-uploading{
    border-right-color:var(--pc-primary);
}
.alo-pc-file-card.is-ready{
    border-right-color:#12a36a;
    box-shadow:0 6px 18px rgba(18,163,106,.08);
}
.alo-pc-file-card.is-error{
    border-right-color:#d92d20;
}
.alo-pc-status-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:15px;
    height:15px;
    border-radius:50%;
    font-size:9px;
    margin-left:4px;
    vertical-align:middle;
    background:var(--pc-muted);
    color:#fff;
}
.alo-pc-file-card.is-ready .alo-pc-file-status{
    color:#12a36a;
    font-weight:800;
}
.alo-pc-file-card.is-ready .alo-pc-status-icon{
    background:#12a36a;
}
.alo-pc-file-card.is-error .alo-pc-file-status{
    color:#d92d20;
    font-weight:700;
}
.alo-pc-file-card.is-error .alo-pc-status-icon{
    background:#d92d20;
}
.alo-pc-spinner{
    display:inline-block;
    width:11px;
    height:11px;
    border-radius:50%;
    border:2px solid #e4e9f1;
    border-top-color:var(--pc-primary);
    margin-left:4px;
    vertical-align:middle;
    animation:alo-pc-spin .7s linear infinite;
}
@keyframes alo-pc-spin{
    to{transform:rotate(360deg)}
}
.alo-pc-file-thumb{
    position:relative;
}
.alo-pc-thumb-check{
    display:none;
    position:absolute;
    bottom:-4px;
    left:-4px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#12a36a;
    color:#fff;
    font-size:10px;
    font-weight:900;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
}
.alo-pc-file-card.is-ready .alo-pc-thumb-check{
    display:flex;
}

@media(max-width:760px){
    .alo-pc-mode-choices{
        grid-template-columns:1fr;
    }
    .alo-pc-upload-box{
        padding:26px 14px;
    }
}

/* =========================================================
   v8.4 — true multi-page wizard, compact per-file settings grid,
   stepper controls for pages/runs
   ========================================================= */

/* Plain section heading (replaces the numbered step-head badge —
   the wizard bar above now carries the step numbering) */
.alo-pc-step-head-plain{
    margin-bottom:16px;
}
.alo-pc-step-head-plain strong{
    display:block;
    color:#171717;
    font-size:14px;
    font-weight:900;
}
.alo-pc-step-head-plain small{
    display:block;
    margin-top:3px;
    color:#858585;
    font-size:11px;
    line-height:1.7;
}

/* Wizard progress bar */
.alo-pc-wizard-bar{
    display:flex;
    justify-content:center;
    gap:0;
    margin-bottom:24px;
    padding-bottom:20px;
    border-bottom:1px solid #f0e3e4;
}
.alo-pc-wizard-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    min-width:70px;
}
.alo-pc-wizard-circle{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f2f2f2;
    color:#9a9a9a;
    font-size:13px;
    font-weight:900;
    border:2px solid #f2f2f2;
    box-sizing:border-box;
    transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.alo-pc-wizard-label{
    font-size:10.5px;
    color:var(--pc-muted);
    font-weight:700;
    white-space:nowrap;
    transition:color .2s ease;
}
.alo-pc-wizard-step.is-active .alo-pc-wizard-circle{
    background:var(--pc-primary);
    border-color:var(--pc-primary);
    color:#fff;
    box-shadow:0 4px 12px rgba(223,24,32,.25);
}
.alo-pc-wizard-step.is-active .alo-pc-wizard-label{
    color:#171717;
    font-weight:900;
}
.alo-pc-wizard-step.is-done .alo-pc-wizard-circle{
    background:#12a36a;
    border-color:#12a36a;
    color:#fff;
}
.alo-pc-wizard-step.is-done .alo-pc-wizard-label{
    color:#12a36a;
}
.alo-pc-wizard-line{
    flex:1 1 auto;
    align-self:flex-start;
    margin-top:15px;
    height:2px;
    min-width:16px;
    max-width:60px;
    background:#f0e3e4;
}

/* Page visibility */
.alo-pc-page[hidden]{
    display:none !important;
}

/* Wizard next/prev navigation buttons */
.alo-pc-wizard-nav{
    display:flex;
    justify-content:flex-end;
    margin-top:22px;
}
.alo-pc-wizard-nav-split{
    justify-content:space-between;
}
.alo-pc-wizard-next,
.alo-pc-wizard-prev{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:12px;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.alo-pc-wizard-next{
    border:none;
    background:linear-gradient(135deg,var(--pc-primary),var(--pc-primary-dark));
    color:#fff;
    box-shadow:0 8px 20px rgba(223,24,32,.18);
}
.alo-pc-wizard-next:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 11px 24px rgba(223,24,32,.24);
}
.alo-pc-wizard-next:disabled{
    opacity:.42;
    cursor:not-allowed;
    box-shadow:none;
}
.alo-pc-wizard-prev{
    border:1.5px solid #e6dbdc;
    background:#fff;
    color:#555;
}
.alo-pc-wizard-prev:hover{
    border-color:var(--pc-primary);
    color:var(--pc-primary);
}

/* Compact "just added" view for step 1 — settings body/footer stay
   hidden until the user reaches the dedicated تنظیمات step. The v8.8
   header fields (نوع خدمت/سایز کاغذ/تعداد صفحات) must hide here too —
   otherwise the آپلود فایل step shows a half-populated card (those three
   fields with no سایز کاغذ context and no row-2 fields below them) instead
   of the plain "file added" preview this step was always meant to show. */
.alo-pc-files.alo-pc-files-compact .alo-pc-file-body,
.alo-pc-files.alo-pc-files-compact .alo-pc-file-footer,
.alo-pc-files.alo-pc-files-compact .alo-pc-file-head-fields{
    display:none;
}
.alo-pc-files.alo-pc-files-compact .alo-pc-file-head{
    border-bottom:none;
}

/* Denser per-file settings grid: as many short fields per row as fit,
   instead of one field per row — cuts the settings section down to a
   couple of clean rows instead of a long list. */
.alo-pc-dynamic{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px 14px;
    align-items:start;
}
.alo-pc-binding-vars{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px 14px;
    align-items:start;
}
/* Field labels can come from admin-configured names of unpredictable
   length (e.g. "نوع چاپ (تک رو - پشت و رو)"); truncating to one line
   keeps every column's select starting at the same height instead of
   some labels wrapping to 2 lines and throwing the row out of line. */
.alo-pc-dynamic .alo-pc-field label,
.alo-pc-binding-vars .alo-pc-field label{
    display:flex;
    align-items:baseline;
    gap:3px;
}
.alo-pc-field-label-text{
    display:inline-block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* +/- stepper for page count / run count */
.alo-pc-stepper{
    display:flex;
    align-items:stretch;
    border:1px solid #d8dee8;
    border-radius:11px;
    overflow:hidden;
    background:#fff;
}
.alo-pc-stepper-btn{
    flex:0 0 34px;
    border:none;
    background:#f7f9fc;
    color:var(--pc-primary);
    font-size:16px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease;
}
.alo-pc-stepper-btn:hover{
    background:var(--pc-primary-soft);
}
.alo-pc-stepper .alo-pc-number{
    flex:1;
    min-width:0;
    border:none !important;
    border-right:1px solid #e8edf4 !important;
    border-left:1px solid #e8edf4 !important;
    border-radius:0 !important;
    text-align:center;
    min-height:auto;
    padding:8px 4px;
    box-shadow:none !important;
}

@media(max-width:760px){
    .alo-pc-wizard-bar{
        margin-bottom:18px;
        padding-bottom:16px;
    }
    .alo-pc-wizard-step{
        min-width:0;
        flex:1 1 0;
    }
    .alo-pc-wizard-label{
        font-size:9.5px;
        white-space:normal;
        text-align:center;
    }
    .alo-pc-wizard-line{
        min-width:10px;
    }
    .alo-pc-dynamic{
        grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
        gap:10px;
    }
    .alo-pc-binding-vars{
        grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
        gap:10px;
    }
    .alo-pc-wizard-nav{
        margin-top:16px;
    }
    .alo-pc-wizard-next,
    .alo-pc-wizard-prev{
        padding:11px 16px;
        font-size:12px;
    }
}

/* =========================================================
   v8.6 — mode-choice as its own step, real page-change feel,
   softer / less-monochrome visual pass
   ========================================================= */

/* Every .alo-pc-page plays this animation the moment the [hidden]
   attribute is removed — browsers treat display:none → displayed as a
   fresh element, so the animation restarts on every step change with
   no JS involved. This is what makes switching steps read as moving to
   a new page rather than a section quietly reflowing in place. */
.alo-pc-page{
    animation:alo-pc-page-in .38s cubic-bezier(.16,1,.3,1);
}
@keyframes alo-pc-page-in{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

/* Big page header — icon + title + subtitle — repeated per step so
   each one visually reads as a distinct screen, not a form section. */
.alo-pc-page-header{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px;
    padding-bottom:20px;
    border-bottom:1px solid #f0e3e4;
}
.alo-pc-page-header-icon{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--pc-primary),var(--pc-primary-dark));
    color:#fff;
    font-size:21px;
    box-shadow:0 7px 18px rgba(223,24,32,.22);
}
.alo-pc-page-header>div{
    flex:1;
    min-width:0;
}
.alo-pc-page-header h3{
    margin:0 0 4px;
    font-size:17px;
    font-weight:900;
    color:#171717;
    letter-spacing:-.2px;
}
.alo-pc-page-header p{
    margin:0;
    font-size:12px;
    color:var(--pc-muted);
    line-height:1.8;
}
.alo-pc-mode-change-link{
    flex:none;
    align-self:center;
    padding:8px 14px;
    border:1.5px solid #e6dbdc;
    border-radius:999px;
    background:#fff;
    color:#666;
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.alo-pc-mode-change-link:hover{
    border-color:var(--pc-primary);
    color:var(--pc-primary);
    background:var(--pc-primary-soft);
}

/* A soft secondary (messenger-blue) accent on the "send later" card so
   the two choices read as genuinely different options at a glance,
   instead of two identically red-tinted buttons. */
.alo-pc-mode-card-alt .alo-pc-mode-icon{
    background:linear-gradient(135deg,#2f7fe0,#1c5fb0);
    color:#fff;
}
.alo-pc-mode-card-alt:hover{
    border-color:#bcd6f5;
    box-shadow:0 8px 22px rgba(28,95,176,.10);
}
.alo-pc-mode-card-alt.is-selected{
    border-color:#2f7fe0;
    background:linear-gradient(180deg,#f3f8ff 0%,#fbfdff 100%);
    box-shadow:0 8px 22px rgba(47,127,224,.14);
}
.alo-pc-mode-card-alt.is-selected:after{
    background:#2f7fe0;
}

/* A touch more depth/life on cards without leaving the red/white
   palette behind — softer shadows, slightly rounder corners, a gentle
   lift on hover so the whole calculator feels less flat. */
.alo-pc-mode-card,
.alo-pc-file-card{
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.alo-pc-file-card:hover{
    box-shadow:0 8px 22px rgba(45,15,18,.06);
}
.alo-pc-summary{
    box-shadow:0 14px 40px rgba(20,34,66,.07);
}

@media(max-width:760px){
    .alo-pc-page-header{
        gap:11px;
        margin-bottom:18px;
        padding-bottom:16px;
    }
    .alo-pc-page-header-icon{
        flex-basis:40px;
        width:40px;
        height:40px;
        font-size:17px;
        border-radius:13px;
    }
    .alo-pc-page-header h3{
        font-size:15px;
    }
    .alo-pc-mode-change-link{
        padding:7px 11px;
        font-size:10px;
    }
}

/* =========================================================
   v8.7 — per-file price breakdown in the order summary
   ========================================================= */
.alo-pc-row-file{
    display:block;
}
.alo-pc-row-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}
.alo-pc-row-breakdown{
    margin-top:7px;
    padding-top:7px;
    border-top:1px dashed #eee1e2;
}
.alo-pc-row-breakdown:empty{
    display:none;
}
.alo-pc-price-line{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    padding:2px 0;
    font-size:11px;
    line-height:1.7;
}
.alo-pc-price-line span{
    color:#9a9a9a;
}
.alo-pc-price-line b{
    color:#666;
    font-weight:700;
    white-space:nowrap;
}

/* =========================================================
   v8.8 — per-file card layout compaction (client feedback):
   نوع خدمت + first variable (سایز کاغذ) + page count move up next
   to the filename; the "آپلود شد" success text is replaced by the
   page count once known (an upload error still shows explicitly);
   the remaining fields collapse into a single row below; the whole
   card gets a full green frame once every required field is filled.
   ========================================================= */
.alo-pc-file-head{
    flex-wrap:wrap;
    row-gap:10px;
}
.alo-pc-file-meta{
    /* Doesn't grow — only the filename/status text needs its space; letting
       head-fields (flex-grow:1) claim all the leftover room keeps نوع خدمت/
       سایز کاغذ/تعداد سری چاپ from being squeezed too small. */
    flex:0 1 150px;
}
.alo-pc-file-head-fields{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:8px;
    flex:1 1 240px;
    /* Without this, a flex item that is itself a wrapping flex container
       ignores its own wrapped size when contributing to the PARENT layout —
       it still claims room for all its children laid out in a single line
       (the "automatic minimum size" rule), so on narrow screens it forced
       the whole card (and briefly the page, before the v8.11 overflow
       guards) wider than the viewport instead of actually wrapping. */
    min-width:0;
}
.alo-pc-field-compact{
    margin:0;
    flex:1 1 92px;
    min-width:86px;
}
/* Stepper-based header fields (تعداد صفحات when editable, تعداد سری چاپ)
   need more room than a plain select for their +/- buttons — give them a
   bit more without starving نوع خدمت/سایز کاغذ down to illegible widths
   (client feedback after the first pass: those two had gotten too small). */
.alo-pc-field-compact.alo-pc-field-compact-wide{
    flex:1 1 122px;
    min-width:112px;
}
.alo-pc-field-compact label{
    margin-bottom:4px;
    font-size:10.5px;
}
.alo-pc-field-compact select,
.alo-pc-field-compact .alo-pc-number{
    min-height:38px;
    padding:6px 10px;
    font-size:12px;
    border-radius:9px;
}
.alo-pc-field-compact select{
    padding-left:26px;
}
.alo-pc-field-compact .alo-pc-stepper-btn{
    flex-basis:26px;
    font-size:14px;
}
@media(max-width:760px){
    /* The head-fields block goes full-width and wraps to its own line on
       mobile — but since it sits before the remove (✕) button in the
       markup, a plain flex-wrap pushed ✕ onto a lonely third line by
       itself instead of staying next to the filename. Reordering keeps
       thumb+filename+✕ together on line one, fields below on line two. */
    .alo-pc-file-remove{
        order:1;
    }
    .alo-pc-file-head-fields{
        order:2;
        flex-basis:100%;
    }
    .alo-pc-field-compact{
        flex:1 1 80px;
    }
    /* When تعداد سری چاپ wraps onto its own line alone, flex-grow:1 was
       stretching its stepper across the full card width, leaving a wide
       empty gap between the +/- buttons and the number. Stop it from
       growing so it stays a normal, compact stepper size instead. */
    .alo-pc-field-compact.alo-pc-field-compact-wide{
        flex:0 1 170px;
    }
}

/* Full green frame once the file's settings are complete — replaces the
   thin single-side accent from is-ready with a proper "done" box per
   client feedback ("دورش یه کادر سبز بیاد"). */
.alo-pc-file-card.is-complete{
    border:1.5px solid #12a36a;
    box-shadow:0 8px 22px rgba(18,163,106,.12);
}
.alo-pc-file-card.is-complete .alo-pc-file-head{
    background:#f5fbf8;
    border-bottom-color:#d9f0e3;
}

/* =========================================================
   v8.9 — read-only page count once auto-detected from a real
   uploaded file (client feedback: a detected count shouldn't be
   hand-editable; only the no-file/پیام‌رسان path stays editable).
   ========================================================= */
.alo-pc-stepper.alo-pc-stepper-locked{
    background:#f7f9fc;
}
.alo-pc-number[readonly]{
    background:#f7f9fc;
    color:#475467;
    cursor:default;
}
.alo-pc-stepper.alo-pc-stepper-locked .alo-pc-number[readonly]{
    border-left:none !important;
    border-right:none !important;
}

/* Real-file page count shown as plain meta text next to "آپلود شد",
   matching the client's reference layout exactly (no boxed field for a
   count the plugin itself detected). */
.alo-pc-file-meta-line{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.alo-pc-file-meta-line .alo-pc-file-status,
.alo-pc-file-meta-line .alo-pc-file-pagecount{
    margin-top:0;
}
.alo-pc-file-pagecount{
    color:var(--pc-muted);
    font-size:11px;
}
.alo-pc-file-pagecount b{
    color:#171717;
    font-weight:800;
}

/* =========================================================
   v8.11 — defensive overflow guards for real-device mobile
   (a long real filename, unlike the short ones used while
   testing, was defeating the ellipsis truncation on real
   mobile Safari's RTL text handling and forcing the whole
   page wider than the viewport — "not responsive at all").
   These clip runaway content at every relevant level instead
   of relying on ellipsis alone, so no single long string can
   ever blow out the layout again.
   ========================================================= */
.alo-pc-safe{
    overflow-x:hidden;
}
.alo-pc-file-card{
    max-width:100%;
    overflow:hidden;
}
.alo-pc-file-head{
    min-width:0;
    max-width:100%;
}
.alo-pc-file-meta{
    max-width:100%;
    overflow:hidden;
}
.alo-pc-file-meta-line{
    max-width:100%;
    min-width:0;
}
.alo-pc-file-pagecount,
.alo-pc-file-status{
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

/* =========================================================
   v8.13 — every <button> in this plugin was silently losing
   background-color (and, on hover/focus, background-color +
   text color) to Elementor's global kit reset:
     .elementor-kit-6 button, input[type=button], ... {
         background-color:var(--e-global-color-primary);
         border-style:none;
     }
     .elementor-kit-6 button:hover, :focus, ... {
         background-color:var(--e-global-color-8285f4a);
         color:#fff;
     }
   Both rules combine one class + one type selector, which beats
   any of our plain single-class button rules regardless of
   source order — exactly the same fight already documented for
   .alo-pc-mode-card above. It stayed invisible everywhere our
   buttons use a gradient background-image (the image paints over
   whichever background-color "won"), which is why the primary
   نوع next/order buttons always looked right. Every button with a
   *flat* background — the page-count +/- steppers, "مرحله قبل",
   "افزودن مورد دیگر بدون فایل", the ✕ remove button, and the
   mode-choice cards on hover — was rendering in Elementor's solid
   red/kit-hover color instead of its own design. Fixed the same
   way as before: a doubled class raises specificity above
   Elementor's rule, scoped to only the contested properties. */
.alo-pc-mode-card.alo-pc-mode-card:hover{
    background:#fff;
}
.alo-pc-wizard-prev.alo-pc-wizard-prev{
    background-color:#fff;
    color:#555;
}
.alo-pc-wizard-prev.alo-pc-wizard-prev:hover{
    background-color:#fff;
    color:var(--pc-primary);
}
/* v8.16 — client feedback: white was hard to notice, wants the ✕
   remove-file button red too, matching the +/- steppers. */
.alo-pc-file-remove.alo-pc-file-remove{
    background-color:var(--pc-primary);
    color:#fff;
    border-color:var(--pc-primary);
}
.alo-pc-file-remove.alo-pc-file-remove:hover{
    background-color:var(--pc-primary-dark);
    border-color:var(--pc-primary-dark);
    color:#fff;
}
.alo-pc-add-manual.alo-pc-add-manual{
    background-color:#fafcff;
}
.alo-pc-add-manual.alo-pc-add-manual:hover{
    background-color:#fff6f6;
}
/* The +/- stepper buttons additionally inherited Elementor's global
   button padding (8px 16px) — with no padding of our own to compete
   with, that isn't a color fight, it's just an unset property, so
   normal specificity is enough to zero it out. Combined with the
   flexbox "automatic minimum size" rule (a flex item won't shrink
   below its own content size unless min-width is set), that extra
   padding was inflating every stepper button from its intended
   26-34px square into a ~40px+ rectangle and throwing off the
   spacing between the +, the number, and the − (most visible on
   تعداد سری چاپ, which had nothing to visually anchor its width). */
.alo-pc-stepper-btn{
    padding:0;
    min-width:0;
}
/* v8.15 — client feedback: the +/- buttons should read as red/primary
   (matching the rest of the calculator's action color), not neutral
   grey — the grey was the correct fix for the earlier Elementor bug
   (which made them solid red unintentionally, with the icon nearly
   invisible), but the client wants that same spot to be red on
   purpose this time, with the icon in white for contrast. */
.alo-pc-stepper-btn.alo-pc-stepper-btn{
    background-color:var(--pc-primary);
    color:#fff;
}
.alo-pc-stepper-btn.alo-pc-stepper-btn:hover{
    background-color:var(--pc-primary-dark);
}

/* A stepper field left alone on its own wrapped line (typically
   تعداد سری چاپ once نوع خدمت/سایز کاغذ already filled line one)
   still has flex-grow:1 from .alo-pc-field-compact-wide, so it was
   stretching to the full remaining row width — a wide empty gap
   between the +/- buttons and the number instead of a tidy stepper.
   Capping its width keeps it compact regardless of how the row wraps. */
.alo-pc-field-compact.alo-pc-field-compact-wide{
    max-width:190px;
}

/* A touch more presence on the mode-choice cards at rest — per
   client feedback the cards themselves should read as clearly
   clickable, and hovering one shouldn't swap its whole background
   to a color the way it currently does elsewhere; it should just
   lift, the way a physical card would. */
.alo-pc-mode-card.alo-pc-mode-card{
    border-color:#e3c3c6;
    background:linear-gradient(180deg,#fff 0%,#fffafa 100%);
    box-shadow:0 6px 20px rgba(45,15,18,.08);
}
.alo-pc-mode-card:hover{
    box-shadow:0 16px 34px rgba(45,15,18,.13);
    transform:translateY(-4px);
}
.alo-pc-mode-card-alt:hover{
    box-shadow:0 16px 34px rgba(28,95,176,.18);
}

/* =========================================================
   v8.14 — تنظیمات field polish + real upload progress bar
   ========================================================= */

/* Every <select> in the form reserved space for a dropdown arrow
   (padding-left:44px / 26px on compact fields) but no arrow was ever
   actually drawn — appearance:none removes the native one and nothing
   replaced it, so every select in the calculator has read as a plain
   text box with no visual cue that it opens a list. A small inline SVG
   chevron (color-matched to the muted text tone already used
   elsewhere) fixes that everywhere at once, since every select in the
   form is a descendant of .alo-pc-field. */
.alo-pc-field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a6a6d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:left 16px center;
}
.alo-pc-field-compact select{
    background-position:left 9px center;
    background-size:8px 5px;
}
/* A select still sitting on its placeholder option ("انتخاب کنید" /
   "بدون صحافی") reads in a muted tone so an untouched field is visibly
   different from one the customer has actually filled in — every
   generated <select> now carries `required` specifically so this
   native :invalid/:valid split has something to key off, even though
   nothing in this form is ever submitted natively. */
.alo-pc-field select:invalid{
    color:#9a9a9a;
}
.alo-pc-field select:valid{
    color:#1f2430;
    font-weight:700;
}
/* A touch of resting depth so fields read as tactile controls instead
   of flat outlined boxes — kept subtle, doesn't compete with the
   existing focus ring. */
.alo-pc-field select,
.alo-pc-number,
.alo-pc-variable-select{
    box-shadow:0 1px 2px rgba(35,15,17,.03);
}

/* Real upload progress bar (client request: "برای اینکه آپلود میخواد
   بشه یه خط بزارید که داره پر میشه"). front.js switched the upload
   request from fetch() to XMLHttpRequest specifically to get this —
   fetch has no event for request-body (upload) progress, only
   xhr.upload.onprogress does. */
.alo-pc-upload-progress{
    margin-top:7px;
    height:5px;
    border-radius:999px;
    background:#f1e2e3;
    overflow:hidden;
}
.alo-pc-upload-progress-bar{
    height:100%;
    width:4%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--pc-primary),var(--pc-primary-dark));
    transition:width .25s ease;
}
.alo-pc-file-card.is-ready .alo-pc-upload-progress,
.alo-pc-file-card.is-error .alo-pc-upload-progress{
    display:none;
}