/* ── SweetShop Corporate Portal v3 – Public Styles ─────────────────────────
   Brand tokens EXACTLY match the Wholesale plugin so both portals feel like
   one product. High-specificity selectors with `body` prefix to survive
   Elementor's style reset, same as Wholesale.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── CSS Variables – identical to Wholesale ── */
body .sscpv3-wrap,
body .sscpv3-form-wrap,
body .sscpv3-portal,
body .sscpv3-home-wrap {
    --cp-purple:       #BA00FF;
    --cp-purple-dark:  #8800bb;
    --cp-purple-light: #f7e5ff;
    --cp-pink:         #FF43AF;
    --cp-pink-light:   #FFA4DC;
    --cp-pink-bg:      #fff5fb;
    --cp-cyan:         #29DAE2;
    --cp-orange:       #FFAB66;
    --cp-text:         #2d1a3d;
    --cp-text-light:   #7a5a8a;
    --cp-border:       #e8c8f5;
    --cp-white:        #ffffff;
    --cp-radius:       16px;
    --cp-radius-sm:    10px;
    font-family: 'Nunito', sans-serif !important;
    color: #2d1a3d;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════
   BASE WRAPPERS
══════════════════════════════════════════════════ */

body .sscpv3-wrap,
body .sscpv3-form-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 50vh !important;
    padding: 40px 16px !important;
    font-family: 'Nunito', sans-serif !important;
}

body .sscpv3-form {
    width: min(640px, 96vw) !important;
    background: #fff !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 8px 40px rgba(186,0,255,.11) !important;
    font-family: 'Nunito', sans-serif !important;
}

body .sscpv3-portal {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 28px 20px 60px !important;
    font-family: 'Nunito', sans-serif !important;
}

/* ══════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════ */

body .sscpv3-form h2,
body .sscpv3-portal h1.sscpv3-portal-title,
body .sscpv3-home-wrap h1 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 900 !important;
    color: #BA00FF !important;
    font-size: 26px !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}

body .sscpv3-form h3,
body .sscpv3-portal h2,
body .sscpv3-card h3 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    color: #FF43AF !important;
    font-size: 18px !important;
    margin: 0 0 14px !important;
}

body .sscpv3-lede {
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #7a5a8a !important;
    margin: 0 0 24px !important;
}

body .sscpv3-mini {
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #7a5a8a !important;
}
body .sscpv3-mini a { color: #BA00FF !important; }

/* ══════════════════════════════════════════════════
   NOTICES
══════════════════════════════════════════════════ */

body .sscpv3-notice {
    padding: 13px 18px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: block !important;
}
body .sscpv3-notice[style*="display: none"],
body .sscpv3-notice[style*="display:none"] { display: none !important; }

body .sscpv3-notice-success { background: #eafff3 !important; border-left: 5px solid #00c060 !important; color: #006630 !important; }
body .sscpv3-notice-error   { background: #fff0f7 !important; border-left: 5px solid #FF43AF !important; color: #a0004a !important; }
body .sscpv3-notice-info    { background: #f7e5ff !important; border-left: 5px solid #BA00FF !important; color: #8800bb !important; }

/* feedback divs that JS sets .ok / .err classes on */
body #sscpv3-feedback.ok, body #sscpv3-sr-fb.ok, body #sscpv3-addr-feedback.ok,
body #sscpv3-pw-feedback.ok { background:#eafff3 !important; border-left:5px solid #00c060 !important; color:#006630 !important; }
body #sscpv3-feedback.err, body #sscpv3-sr-fb.err, body #sscpv3-addr-feedback.err,
body #sscpv3-pw-feedback.err { background:#fff0f7 !important; border-left:5px solid #FF43AF !important; color:#a0004a !important; }

/* ══════════════════════════════════════════════════
   FORM FIELDS  (exactly like Wholesale)
══════════════════════════════════════════════════ */

body .sscpv3-hr {
    border: none !important;
    border-top: 2px solid #e8c8f5 !important;
    margin: 28px 0 !important;
}

body .sscpv3-field { margin-bottom: 20px !important; }
body .sscpv3-field:last-child { margin-bottom: 0 !important; }

body .sscpv3-field label,
body .sscpv3-form label {
    display: block !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    color: #8800bb !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body .sscpv3-optional {
    font-weight: 600 !important;
    color: #FFA4DC !important;
    font-size: 11px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body .sscpv3-hint {
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    color: #7a5a8a !important;
    font-weight: 600 !important;
    margin: 5px 0 0 !important;
}

body .sscpv3-field input[type="text"],
body .sscpv3-field input[type="email"],
body .sscpv3-field input[type="tel"],
body .sscpv3-field input[type="password"],
body .sscpv3-field input[type="number"],
body .sscpv3-field input[type="url"],
body .sscpv3-field input[type="date"],
body .sscpv3-field select,
body .sscpv3-field textarea,
body .sscpv3-card input[type="text"],
body .sscpv3-card input[type="email"],
body .sscpv3-card input[type="number"],
body .sscpv3-card input[type="date"],
body .sscpv3-card select,
body .sscpv3-card textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 10px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2d1a3d !important;
    background: #fff !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: 1.4 !important;
}
body .sscpv3-field input:focus,
body .sscpv3-field select:focus,
body .sscpv3-field textarea:focus,
body .sscpv3-card input:focus,
body .sscpv3-card select:focus,
body .sscpv3-card textarea:focus {
    border-color: #BA00FF !important;
    box-shadow: 0 0 0 3px rgba(186,0,255,.13) !important;
}

body .sscpv3-field select,
body .sscpv3-card select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BA00FF' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

body .sscpv3-field textarea { min-height: 110px !important; resize: vertical !important; }

/* highlight field box (for radio group sections) */
body .sscpv3-field--highlight {
    background: #f7e5ff !important;
    border: 2px solid #e8c8f5 !important;
    padding: 16px !important;
    border-radius: 10px !important;
}

/* form rows */
body .sscpv3-form-row { display: flex !important; gap: 14px !important; }
body .sscpv3-form-row--two .sscpv3-field,
body .sscpv3-form-row--three .sscpv3-field { flex: 1 !important; min-width: 0 !important; }
body .sscpv3-form-row .sscpv3-field { margin-bottom: 0 !important; }

@media (max-width: 600px) { body .sscpv3-form-row { flex-direction: column !important; } }

/* address block */
body .sscpv3-address-block {
    background: #fff5fb !important;
    border: 2px solid #FFA4DC !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
    position: relative !important;
}

/* radio group */
body .sscpv3-radio-group { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 8px !important; }
body .sscpv3-radio-group label {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; font-size: 14px !important;
    color: #2d1a3d !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important;
}
body .sscpv3-radio-group input[type="radio"] {
    accent-color: #BA00FF !important;
    width: 17px !important; height: 17px !important;
    -webkit-appearance: auto !important; appearance: auto !important;
    border: none !important; box-shadow: none !important; padding: 0 !important; flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════
   BUTTONS  (identical pill shape to Wholesale)
══════════════════════════════════════════════════ */

body .sscpv3-btn,
body button.sscpv3-btn,
body a.sscpv3-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 13px 28px !important;
    border-radius: 50px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all .2s ease !important;
    box-sizing: border-box !important;
    border: 2.5px solid transparent !important;
}
body .sscpv3-btn--primary, body button.sscpv3-btn--primary, body a.sscpv3-btn--primary {
    background: #FF43AF !important; color: #fff !important;
    border-color: #FF43AF !important;
    box-shadow: 0 4px 16px rgba(255,67,175,.32) !important;
}
body .sscpv3-btn--primary:hover:not(:disabled) {
    background: #e0008f !important; border-color: #e0008f !important;
    box-shadow: 0 6px 22px rgba(255,67,175,.48) !important;
    transform: translateY(-1px) !important; text-decoration: none !important; color: #fff !important;
}
body .sscpv3-btn--secondary, body button.sscpv3-btn--secondary, body a.sscpv3-btn--secondary {
    background: transparent !important; color: #BA00FF !important;
    border-color: #BA00FF !important;
}
body .sscpv3-btn--secondary:hover {
    background: #BA00FF !important; color: #fff !important; text-decoration: none !important;
}
body .sscpv3-btn--ghost, body button.sscpv3-btn--ghost, body a.sscpv3-btn--ghost {
    background: transparent !important; color: #7a5a8a !important;
    border-color: #e8c8f5 !important; font-weight: 700 !important;
}
body .sscpv3-btn--ghost:hover {
    background: #f7e5ff !important; color: #BA00FF !important;
    border-color: #BA00FF !important; text-decoration: none !important;
}
body .sscpv3-btn--full { display: flex !important; width: 100% !important; justify-content: center !important; margin-top: 20px !important; }
body .sscpv3-btn:disabled, body button.sscpv3-btn:disabled {
    opacity: .5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}
body #sscpv3-loginform #wp-submit {
    display: block !important; width: 100% !important; padding: 14px !important;
    background: #FF43AF !important; color: #fff !important; border: none !important;
    border-radius: 50px !important; font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important; font-weight: 900 !important; letter-spacing: 0.6px !important;
    text-transform: uppercase !important; cursor: pointer !important; margin-top: 18px !important;
    transition: background .2s !important;
}
body #sscpv3-loginform #wp-submit:hover { background: #e0008f !important; }

/* ══════════════════════════════════════════════════
   STATUS PILLS
══════════════════════════════════════════════════ */

body .sscpv3-pills { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 6px !important; }
body .sscpv3-pill {
    display: inline-block !important; padding: 4px 12px !important;
    border-radius: 50px !important; font-size: 12px !important; font-weight: 700 !important;
    background: #f7e5ff !important; color: #8800bb !important;
    border: 1.5px solid #e8c8f5 !important;
}
body .sscpv3-pill-warn { background: #fff4e0 !important; color: #8a5000 !important; border-color: #FFAB66 !important; }
body .sscpv3-pill-ok   { background: #eafff3 !important; color: #006630 !important; border-color: #00c060 !important; }

/* ══════════════════════════════════════════════════
   PORTAL HEADER
══════════════════════════════════════════════════ */

body .sscpv3-portal-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
}
body .sscpv3-portal-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; align-items: center !important; }
body .sscpv3-welcome { font-size: 15px !important; font-weight: 700 !important; color: #7a5a8a !important; margin-top: 4px !important; }

/* ══════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════ */

body .sscpv3-card {
    background: #fff !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 3px 16px rgba(186,0,255,.07) !important;
    margin-bottom: 20px !important;
}
body .sscpv3-mode-card {
    background: linear-gradient(135deg, #f7e5ff 0%, #fff5fb 100%) !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
}
body .sscpv3-mode-row {
    display: flex !important; justify-content: space-between !important;
    align-items: center !important; gap: 16px !important; flex-wrap: wrap !important;
}

/* ══════════════════════════════════════════════════
   MODE TOGGLE (Batch / Single)
══════════════════════════════════════════════════ */

body .sscpv3-mode-toggle {
    display: flex !important;
    background: #fff !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
body .sscpv3-mode-toggle input[type="radio"] { display: none !important; }
body .sscpv3-mode-toggle label {
    padding: 9px 22px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #7a5a8a !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all .18s !important;
    margin: 0 !important;
    border: none !important;
}
body .sscpv3-mode-toggle input[type="radio"]:checked + label {
    background: #BA00FF !important;
    color: #fff !important;
    border-radius: 50px !important;
}

/* ══════════════════════════════════════════════════
   RECIPIENT CARDS (the redesigned batch layout)
   Each recipient = one card. Much less crowded than
   the old table approach.
══════════════════════════════════════════════════ */

body .sscpv3-recipients { display: flex !important; flex-direction: column !important; gap: 16px !important; margin-bottom: 20px !important; }

body .sscpv3-recipient-card {
    background: #fff !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(186,0,255,.06) !important;
    transition: box-shadow .2s !important;
}
body .sscpv3-recipient-card:hover { box-shadow: 0 4px 20px rgba(186,0,255,.13) !important; }

body .sscpv3-recipient-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #f0d5ff 0%, #fce8f7 100%) !important;
    padding: 12px 18px !important;
    gap: 12px !important;
}
body .sscpv3-recipient-card-num {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    background: #BA00FF !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
}
body .sscpv3-recipient-name-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #2d1a3d !important;
    outline: none !important;
    padding: 0 !important;
    min-width: 0 !important;
}
body .sscpv3-recipient-name-input::placeholder { color: #b694d0 !important; }
body .sscpv3-remove-recipient-btn {
    background: transparent !important; border: none !important;
    color: #FF43AF !important; font-size: 18px !important;
    cursor: pointer !important; padding: 4px 8px !important;
    border-radius: 8px !important; line-height: 1 !important;
    transition: background .15s !important;
}
body .sscpv3-remove-recipient-btn:hover { background: rgba(255,67,175,.12) !important; }

/* ── Recipient card body — 2-row layout ── */
body .sscpv3-recipient-card-body {
    display: flex !important;
    flex-direction: column !important;
}

/* Row 1: Address + Delivery Details side by side */
body .sscpv3-recipient-card-row--top {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    border-bottom: 1px solid #f0d8ff !important;
}
@media (max-width: 680px) {
    body .sscpv3-recipient-card-row--top { grid-template-columns: 1fr !important; }
}

body .sscpv3-recipient-section {
    padding: 16px 18px !important;
}
/* Divider between address and details in row 1 */
body .sscpv3-section--address {
    border-right: 1px solid #f0d8ff !important;
}
@media (max-width: 680px) {
    body .sscpv3-section--address { border-right: none !important; border-bottom: 1px solid #f0d8ff !important; }
}

/* Row 2: Products takes full width */
body .sscpv3-section--products {
    border-top: none !important;
    background: #fdfaff !important;
    border-radius: 0 0 16px 16px !important;
}

body .sscpv3-section-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #BA00FF !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* address grid within recipient card */
body .sscpv3-addr-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}
body .sscpv3-addr-row { display: grid !important; grid-template-columns: 1fr 64px 80px !important; gap: 6px !important; }
body .sscpv3-recipient-section input[type="text"],
body .sscpv3-recipient-section input[type="date"],
body .sscpv3-recipient-section textarea {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1.5px solid #e8c8f5 !important;
    border-radius: 8px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2d1a3d !important;
    background: #fff !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color .18s !important;
}
body .sscpv3-recipient-section input:focus,
body .sscpv3-recipient-section textarea:focus { border-color: #BA00FF !important; }
body .sscpv3-recipient-section textarea { min-height: 60px !important; resize: vertical !important; }

/* "save to address book" checkbox within card */
body .sscpv3-save-addr-check {
    display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 8px !important;
    font-size: 12px !important; font-weight: 600 !important; color: #7a5a8a !important; cursor: pointer !important;
}
body .sscpv3-save-addr-check input { accent-color: #BA00FF !important; flex-shrink: 0 !important; }

/* ── Product lines within a recipient card ── */
body .sscpv3-product-lines { display: flex !important; flex-direction: column !important; gap: 10px !important; }

body .sscpv3-product-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    background: #faf5ff !important;
    border: 1.5px solid #e8c8f5 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}
body .sscpv3-product-line-inner { display: flex !important; gap: 8px !important; align-items: flex-start !important; flex: 1 !important; flex-wrap: wrap !important; }
body .sscpv3-type-badge {
    display: inline-block !important;
    font-size: 10px !important; font-weight: 800 !important;
    padding: 2px 8px !important; border-radius: 20px !important; text-transform: uppercase !important;
    letter-spacing: .5px !important; margin-bottom: 5px !important;
}
body .sscpv3-type-arrangement { background: #e9d5ff !important; color: #6b21a8 !important; }
body .sscpv3-type-cookie      { background: #fde8d0 !important; color: #8a3900 !important; }

body .sscpv3-recipient-section select.sscpv3-item-select,
body .sscpv3-recipient-section select.sscpv3-variation {
    width: 100% !important;
    padding: 7px 32px 7px 10px !important;
    border: 1.5px solid #e8c8f5 !important;
    border-radius: 8px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2d1a3d !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23BA00FF' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    -webkit-appearance: none !important; appearance: none !important;
    margin-bottom: 5px !important;
    outline: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
body .sscpv3-recipient-section select:focus { border-color: #BA00FF !important; }

body .sscpv3-qty-row { display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 4px !important; }
body .sscpv3-qty-label { font-size: 12px !important; font-weight: 700 !important; color: #7a5a8a !important; white-space: nowrap !important; }
body .sscpv3-qty {
    width: 60px !important; padding: 6px 8px !important;
    border: 1.5px solid #e8c8f5 !important; border-radius: 8px !important;
    text-align: center !important; font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important; font-weight: 700 !important;
    -webkit-appearance: none !important;
}
body .sscpv3-remove-product-btn {
    background: transparent !important; border: none !important; color: #FF43AF !important;
    font-size: 16px !important; cursor: pointer !important; padding: 2px 6px !important;
    border-radius: 6px !important; line-height: 1 !important;
    transition: background .15s !important; flex-shrink: 0 !important;
}
body .sscpv3-remove-product-btn:hover { background: rgba(255,67,175,.12) !important; }

/* ── Catalog Tab Strip (6-per-row grid, no horizontal scroll) ── */

/* ── Catalog Tabs — underline filter style ── */

body .sscpv3-catalog-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid #e8c8f5 !important;
}
body .sscpv3-catalog-tab {
    padding: 8px 22px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7a5a8a !important;
    cursor: pointer !important;
    transition: color .15s, border-color .15s !important;
    letter-spacing: .2px !important;
}
body .sscpv3-catalog-tab.is-active {
    color: #BA00FF !important;
    border-bottom-color: #BA00FF !important;
}
body .sscpv3-catalog-tab:not(.is-active):hover {
    color: #BA00FF !important;
    border-bottom-color: #e8c8f5 !important;
}
body .sscpv3-catalog-tab-hint {
    margin-left: auto !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #c8a8e8 !important;
    padding-bottom: 4px !important;
    font-style: italic !important;
}

/* Hidden class used by JS instead of inline display:none */
body .sscpv3-catalog-hidden,
body .sscpv3-catalog-strip.sscpv3-catalog-hidden { display: none !important; }

/* 8-column wrapping grid — full card width now */
body .sscpv3-catalog-strip {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
@media (max-width: 1000px) {
    body .sscpv3-catalog-strip { grid-template-columns: repeat(6, 1fr) !important; }
}
@media (max-width: 680px) {
    body .sscpv3-catalog-strip { grid-template-columns: repeat(4, 1fr) !important; }
}

body .sscpv3-strip-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 5px !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    background: #fff !important;
    transition: all .18s !important;
    text-align: center !important;
}
body .sscpv3-strip-card:hover {
    border-color: #BA00FF !important;
    box-shadow: 0 3px 10px rgba(186,0,255,.16) !important;
    transform: translateY(-2px) !important;
}
body .sscpv3-strip-card.just-added {
    border-color: #FF43AF !important;
    background: #fff5fb !important;
    transform: scale(1.05) !important;
}
body .sscpv3-strip-card img {
    width: 100% !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
    cursor: zoom-in !important;
}
body .sscpv3-strip-placeholder {
    width: 100% !important;
    height: 72px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #f7e5ff 0%, #fce4f5 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
}
body .sscpv3-strip-card-name {
    font-family: 'Nunito', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #2d1a3d !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}

/* ── Greyed-out add-recipient button in Single mode (Fix 1) ── */
body .sscpv3-btn.is-disabled-single,
body button.sscpv3-btn.is-disabled-single {
    opacity: .38 !important;
    cursor: not-allowed !important;
    filter: grayscale(60%) !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Compact chip rows (selected items) ── */
body .sscpv3-product-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #faf5ff !important;
    border: 1.5px solid #e8c8f5 !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
}
body .sscpv3-chip-thumb {
    width: 38px !important;
    height: 38px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
body span.sscpv3-chip-thumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    background: linear-gradient(135deg, #f7e5ff, #fce4f5) !important;
}
body .sscpv3-chip-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
body .sscpv3-chip-name {
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #2d1a3d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body .sscpv3-chip-info .sscpv3-variation {
    font-size: 12px !important;
    padding: 4px 28px 4px 8px !important;
    border-radius: 6px !important;
    border: 1.5px solid #e8c8f5 !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    color: #2d1a3d !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23BA00FF' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center !important;
    -webkit-appearance: none !important; appearance: none !important;
    cursor: pointer !important; width: 100% !important;
    box-sizing: border-box !important;
}
body .sscpv3-chip-qty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}
body .sscpv3-chip-qty .sscpv3-qty-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #7a5a8a !important;
    text-transform: uppercase !important;
}
body .sscpv3-chip-qty .sscpv3-qty {
    width: 52px !important;
    padding: 5px 6px !important;
    border: 1.5px solid #e8c8f5 !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body .sscpv3-mini-btn {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 12px !important; font-weight: 800 !important;
    cursor: pointer !important; border: 1.5px solid #e8c8f5 !important;
    background: #fff !important; color: #7a5a8a !important;
    transition: all .15s !important;
}
body .sscpv3-mini-btn:hover { background: #f7e5ff !important; border-color: #BA00FF !important; color: #BA00FF !important; }

/* add-recipient row */
body .sscpv3-add-recipient-row {
    display: flex !important; gap: 10px !important; flex-wrap: wrap !important;
    margin-bottom: 20px !important; align-items: center !important;
}

/* cookie minimum banner */
body .sscpv3-cookie-banner {
    padding: 11px 16px !important; border-radius: 10px !important;
    font-family: 'Nunito', sans-serif !important; font-size: 13px !important; font-weight: 700 !important;
    margin-bottom: 16px !important;
}
body .sscpv3-cookie-banner-ok   { background: #eafff3 !important; border-left: 4px solid #00c060 !important; color: #006630 !important; }
body .sscpv3-cookie-banner-warn { background: #fff4e0 !important; border-left: 4px solid #FFAB66 !important; color: #7a4a00 !important; }

/* ══════════════════════════════════════════════════
   SUMMARY / PAY CARD
══════════════════════════════════════════════════ */

body .sscpv3-summary-card {
    background: linear-gradient(160deg, #f7e5ff 0%, #fff5fb 100%) !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(186,0,255,.10) !important;
    margin-top: 8px !important;
}
body .sscpv3-summary-head {
    display: flex !important; justify-content: space-between !important;
    align-items: center !important; gap: 20px !important; margin-bottom: 18px !important; flex-wrap: wrap !important;
}
body .sscpv3-summary-label { font-size: 12px !important; font-weight: 800 !important; color: #7a5a8a !important; text-transform: uppercase !important; letter-spacing: .5px !important; }
body .sscpv3-summary-total { font-size: 32px !important; font-weight: 900 !important; color: #BA00FF !important; margin-top: 2px !important; }
body .sscpv3-pay-choice { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 18px !important; }
body .sscpv3-radio {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: 14px !important; font-weight: 700 !important; color: #2d1a3d !important; cursor: pointer !important;
}
body .sscpv3-radio input[type="radio"] { accent-color: #BA00FF !important; width: 16px !important; height: 16px !important; -webkit-appearance: auto !important; }

body .sscpv3-card-pay { margin: 4px 0 18px !important; }
body .sscpv3-card-pay h3 { margin-top: 0 !important; }
body #sscpv3-card-container { min-height: 60px !important; padding: 4px 0 !important; }

/* Test account fake card placeholder */
body .sscpv3-test-card-mock {
    background: #fff3cd !important;
    border: 2px dashed #f0ad4e !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
}
body .sscpv3-test-card-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
body .sscpv3-test-card-icon { font-size: 24px !important; flex-shrink: 0 !important; line-height: 1 !important; }
body .sscpv3-test-card-mock strong {
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #856404 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
body .sscpv3-test-card-mock p {
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #856404 !important;
    margin: 0 !important;
    opacity: .85 !important;
}

/* ══════════════════════════════════════════════════
   LIVE ORDER SUMMARY PANEL (Fix 2)
══════════════════════════════════════════════════ */

body .sscpv3-order-summary {
    background: #fff !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 16px !important;
    padding: 20px 22px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 12px rgba(186,0,255,.07) !important;
}
body .sscpv3-order-summary-title {
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #7a5a8a !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    margin-bottom: 14px !important;
}
body .sscpv3-summ-recipient {
    padding: 10px 0 !important;
    border-top: 1px solid #f0d8ff !important;
}
body .sscpv3-summ-recipient:first-child { border-top: none !important; padding-top: 0 !important; }

body .sscpv3-summ-recip-name {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}
body .sscpv3-summ-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important; height: 20px !important;
    background: #BA00FF !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}
body .sscpv3-summ-recip-name strong {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #2d1a3d !important;
}
body .sscpv3-summ-addr {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #7a5a8a !important;
}
body .sscpv3-summ-date {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #BA00FF !important;
    margin-left: auto !important;
}
body .sscpv3-summ-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding-left: 28px !important;
}
body .sscpv3-summ-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2d1a3d !important;
}
body .sscpv3-summ-badge {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
body .sscpv3-summ-item-label { flex: 1 !important; }
body .sscpv3-summ-item-label em {
    font-style: normal !important;
    font-weight: 700 !important;
    color: #7a5a8a !important;
    margin-left: 4px !important;
}
body .sscpv3-summ-line-total {
    font-weight: 900 !important;
    color: #FF43AF !important;
    flex-shrink: 0 !important;
    min-width: 56px !important;
    text-align: right !important;
}

/* ══════════════════════════════════════════════════
   IMAGE LIGHTBOX (Fix 3)
══════════════════════════════════════════════════ */

body .sscpv3-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    display: none !important;
}
body .sscpv3-lightbox.is-open {
    display: flex !important;
}
body .sscpv3-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(20, 8, 32, 0.85) !important;
    cursor: pointer !important;
}
body .sscpv3-lightbox-panel {
    position: relative !important;
    z-index: 1 !important;
    max-width: min(700px, 94vw) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}
body .sscpv3-lightbox-panel img {
    max-width: 100% !important;
    max-height: 75vh !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
    display: block !important;
}
body .sscpv3-lightbox-close {
    position: absolute !important;
    top: -16px !important;
    right: -16px !important;
    width: 36px !important; height: 36px !important;
    background: #FF43AF !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    z-index: 2 !important;
    box-shadow: 0 4px 14px rgba(255,67,175,.5) !important;
    transition: background .15s !important;
}
body .sscpv3-lightbox-close:hover { background: #e0008f !important; }
body .sscpv3-lightbox-caption {
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.6) !important;
}

/* Make the image card cursor show it's clickable for the lightbox */
body .sscpv3-item-card img { cursor: zoom-in !important; }

/* ══════════════════════════════════════════════════
   PORTAL BODY LAYOUT
══════════════════════════════════════════════════ */

body .sscpv3-portal-body { display: flex !important; flex-direction: column !important; gap: 0 !important; }

/* ══════════════════════════════════════════════════
   ACCOUNT PAGE — TABS
══════════════════════════════════════════════════ */

body .sscpv3-tabs {
    display: flex !important;
    gap: 4px !important;
    border-bottom: 2px solid #e8c8f5 !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}
body .sscpv3-tab {
    padding: 10px 22px !important;
    border-radius: 10px 10px 0 0 !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important; font-weight: 800 !important;
    color: #7a5a8a !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all .15s !important;
    margin-bottom: -2px !important;
    border-bottom: 2px solid transparent !important;
}
body .sscpv3-tab:hover { color: #BA00FF !important; background: #f7e5ff !important; }
body .sscpv3-tab.is-active { color: #BA00FF !important; border-bottom-color: #BA00FF !important; background: transparent !important; }

body .sscpv3-tab-panel { display: none !important; }
body .sscpv3-tab-panel.is-active { display: block !important; }

/* two-col layout for address book tab */
body .sscpv3-two-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
@media (max-width: 760px) { body .sscpv3-two-col { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════
   ORDERS LIST (My Orders tab)
══════════════════════════════════════════════════ */

body .sscpv3-order-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    border: 1.5px solid #e8c8f5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    margin-bottom: 10px !important;
    transition: box-shadow .15s !important;
    flex-wrap: wrap !important;
}
body .sscpv3-order-item:hover { box-shadow: 0 3px 14px rgba(186,0,255,.10) !important; }
body .sscpv3-order-badge {
    background: #f7e5ff !important; color: #6b21a8 !important;
    font-size: 11px !important; font-weight: 800 !important;
    padding: 3px 10px !important; border-radius: 20px !important; flex-shrink: 0 !important;
}
body .sscpv3-order-info { flex: 1 !important; min-width: 0 !important; }
body .sscpv3-order-title { font-weight: 800 !important; font-size: 14px !important; color: #2d1a3d !important; }
body .sscpv3-order-sub   { font-size: 12px !important; font-weight: 600 !important; color: #7a5a8a !important; margin-top: 2px !important; }
body .sscpv3-order-total { font-weight: 900 !important; font-size: 16px !important; color: #BA00FF !important; flex-shrink: 0 !important; }
body .sscpv3-skeleton     { color: #b694d0 !important; font-style: italic !important; font-size: 14px !important; }

/* address book list */
body .sscpv3-addr-item {
    display: flex !important; align-items: flex-start !important; gap: 12px !important;
    padding: 12px 14px !important; border: 1.5px solid #e8c8f5 !important;
    border-radius: 10px !important; margin-bottom: 10px !important; background: #faf5ff !important;
}
body .sscpv3-addr-item.is-default { border-color: #BA00FF !important; background: #f7e5ff !important; }
body .sscpv3-addr-main  { flex: 1 !important; }
body .sscpv3-addr-nick  { font-weight: 900 !important; font-size: 14px !important; color: #2d1a3d !important; }
body .sscpv3-addr-lines { font-size: 13px !important; font-weight: 600 !important; color: #7a5a8a !important; margin-top: 3px !important; }
body .sscpv3-addr-notes { font-size: 12px !important; font-weight: 600 !important; color: #b694d0 !important; margin-top: 3px !important; font-style: italic !important; }
body .sscpv3-addr-actions { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }

/* ══════════════════════════════════════════════════
   LANDING / HOME PAGE
══════════════════════════════════════════════════ */

body .sscpv3-home-wrap {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; padding: 48px 20px 60px !important;
}
body .sscpv3-home-hero { text-align: center !important; max-width: 560px !important; margin-bottom: 40px !important; }
body .sscpv3-home-brand {
    font-size: 22px !important; font-weight: 900 !important;
    color: #BA00FF !important; margin-bottom: 12px !important;
}
body .sscpv3-home-logo  { max-height: 80px !important; width: auto !important; margin-bottom: 16px !important; }
body .sscpv3-home-title { font-size: 32px !important; font-weight: 900 !important; color: #2d1a3d !important; margin: 0 0 12px !important; }
body .sscpv3-home-lede  { font-size: 16px !important; font-weight: 600 !important; color: #7a5a8a !important; }
body .sscpv3-home-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; max-width: 680px !important; width: 100% !important; }
@media (max-width: 580px) { body .sscpv3-home-cards { grid-template-columns: 1fr !important; } }

body .sscpv3-home-card {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    text-align: center !important; padding: 36px 28px !important;
    background: #fff !important;
    border: 2px solid #e8c8f5 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(186,0,255,.08) !important;
    transition: all .2s !important;
    color: #2d1a3d !important;
}
body .sscpv3-home-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 36px rgba(186,0,255,.18) !important;
    border-color: #BA00FF !important; text-decoration: none !important;
}
body .sscpv3-home-card--alt { background: linear-gradient(135deg, #f7e5ff, #fff5fb) !important; }
body .sscpv3-home-card-icon {
    width: 64px !important; height: 64px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 28px !important; margin-bottom: 16px !important;
}
body .sscpv3-home-card-icon--login    { background: #f0d5ff !important; }
body .sscpv3-home-card-icon--register { background: #fce4f5 !important; }
body .sscpv3-home-card h2 { font-size: 22px !important; font-weight: 900 !important; color: #BA00FF !important; margin: 0 0 8px !important; }
body .sscpv3-home-card p  { font-size: 14px !important; font-weight: 600 !important; color: #7a5a8a !important; margin: 0 0 20px !important; }
body .sscpv3-home-card-cta {
    font-size: 13px !important; font-weight: 800 !important; color: #FF43AF !important;
    text-transform: uppercase !important; letter-spacing: .6px !important;
}

/* ══════════════════════════════════════════════════
   ADDRESS BOOK PICKER (modal/dropdown in portal)
══════════════════════════════════════════════════ */

body .sscpv3-book-list {
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    max-height: 260px !important; overflow-y: auto !important;
}
body .sscpv3-book-item {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 9px 12px !important; border: 1.5px solid #e8c8f5 !important;
    border-radius: 8px !important; cursor: pointer !important; background: #fff !important;
    transition: border-color .15s, background .15s !important;
    font-size: 13px !important; font-weight: 600 !important; color: #2d1a3d !important;
}
body .sscpv3-book-item:hover { border-color: #BA00FF !important; background: #f7e5ff !important; }
body .sscpv3-book-item-name { font-weight: 800 !important; }

/* ══════════════════════════════════════════════════
   MODAL (Special Request)
══════════════════════════════════════════════════ */

body .sscpv3-modal { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: none !important; align-items: center !important; justify-content: center !important; }
body .sscpv3-modal.is-open { display: flex !important; }
body .sscpv3-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(45,26,61,.5) !important; }
body .sscpv3-modal-panel {
    position: relative !important; z-index: 1 !important;
    background: #fff !important; border-radius: 20px !important;
    padding: 36px !important; width: min(540px, 94vw) !important;
    box-shadow: 0 20px 60px rgba(186,0,255,.22) !important;
    border: 2px solid #e8c8f5 !important;
    max-height: 90vh !important; overflow-y: auto !important;
}
body .sscpv3-modal-close {
    position: absolute !important; top: 16px !important; right: 18px !important;
    background: transparent !important; border: none !important; font-size: 22px !important;
    color: #7a5a8a !important; cursor: pointer !important; line-height: 1 !important;
}
body .sscpv3-modal-close:hover { color: #BA00FF !important; }

/* ══════════════════════════════════════════════════
   LOGIN FORM (WP core override)
══════════════════════════════════════════════════ */

body #sscpv3-login-wrap .login-username label,
body #sscpv3-login-wrap .login-password label {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important; font-size: 12px !important;
    color: #8800bb !important; text-transform: uppercase !important; letter-spacing: .5px !important;
}
body #sscpv3-login-wrap input[type="text"],
body #sscpv3-login-wrap input[type="password"] {
    width: 100% !important; padding: 12px 15px !important;
    border: 2px solid #e8c8f5 !important; border-radius: 10px !important;
    font-family: 'Nunito', sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
    color: #2d1a3d !important; background: #fff !important;
    box-shadow: none !important; outline: none !important;
    transition: border-color .2s !important;
}
body #sscpv3-login-wrap input[type="text"]:focus,
body #sscpv3-login-wrap input[type="password"]:focus { border-color: #BA00FF !important; box-shadow: 0 0 0 3px rgba(186,0,255,.13) !important; }
body #sscpv3-login-wrap .login-remember label { font-family: 'Nunito', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; }
body .sscpv3-login-logo { text-align: center !important; margin-bottom: 20px !important; }
body .sscpv3-login-logo img { max-height: 80px !important; width: auto !important; }

/* ══════════════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════════════ */

@keyframes sscpv3-shimmer { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
body .sscpv3-skeleton { animation: sscpv3-shimmer 1.4s ease-in-out infinite !important; }

/* ══════════════════════════════════════════════════
   HIDE WP PAGE TITLE on all our portal pages
   Elementor / theme renders an <h1> or .entry-title
   above the shortcode — suppress it so the portal
   header is the only heading on screen.
══════════════════════════════════════════════════ */

/* Targets the most common theme/Elementor title wrappers */
body.page-id-sscpv3 .entry-title,
body.page-id-sscpv3 .page-title,
body.page-id-sscpv3 h1.entry-title,
body.page-id-sscpv3 h2.entry-title {
    display: none !important;
}

/* Broader selector for any page that contains our portal shortcode output.
   Elementor wraps the page content in .elementor-widget-text-editor or
   .elementor-shortcode — the title sits just above in .entry-header */
body:has(.sscpv3-portal) .entry-title,
body:has(.sscpv3-portal) .page-title,
body:has(.sscpv3-portal) .entry-header,
body:has(.sscpv3-portal) .post-title,
body:has(.sscpv3-portal) .wp-block-post-title,
body:has(.sscpv3-wrap) .entry-title,
body:has(.sscpv3-wrap) .page-title,
body:has(.sscpv3-wrap) .entry-header,
body:has(.sscpv3-home-wrap) .entry-title,
body:has(.sscpv3-home-wrap) .entry-header {
    display: none !important;
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */

@media (max-width: 680px) {
    body .sscpv3-form   { padding: 24px 18px !important; }
    body .sscpv3-portal { padding: 16px 12px 40px !important; }
    body .sscpv3-portal-head { flex-direction: column !important; }
    body .sscpv3-portal-actions { width: 100% !important; }
    body .sscpv3-summary-total { font-size: 26px !important; }
    body .sscpv3-modal-panel { padding: 24px 18px !important; }
}
