/**
 * ShipCode frontend styles.
 */

.shipcode-container {
    text-align: center;
    padding: 24px;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.shipcode-message {
    font-size: 16px;
    margin-bottom: 16px;
    color: #333;
}

/* Claim button */
.shipcode-claim-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #2271b1;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.shipcode-claim-btn:hover {
    background: #135e96;
}

.shipcode-claim-btn:disabled {
    background: #a0a0a0;
    cursor: not-allowed;
}

/* Code display */
.shipcode-code-display {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border: 2px dashed #2271b1;
    border-radius: 8px;
    margin-top: 8px;
}

.shipcode-code {
    font-family: monospace;
    font-size: 20px;
    font-weight: 700;
    color: #2271b1;
    letter-spacing: 1px;
}

/* Copy button */
.shipcode-copy-btn {
    padding: 6px 16px;
    font-size: 13px;
    color: #2271b1;
    background: #f0f0f1;
    border: 1px solid #2271b1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.shipcode-copy-btn:hover {
    background: #2271b1;
    color: #fff;
}

.shipcode-copy-btn.shipcode-copied {
    background: #00a32a;
    border-color: #00a32a;
    color: #fff;
}

/* Error message */
.shipcode-error {
    color: #d63638;
    font-size: 14px;
    margin-top: 12px;
}

/* Claimed state */
.shipcode-claimed {
    background: #f0f6fc;
    border-color: #2271b1;
}

/* Daily limit reached */
.shipcode-limit {
    background: #fef7e0;
    border-color: #dba617;
}

.shipcode-limit .shipcode-message {
    color: #8a6d12;
}

/* Prediction form */
.shipcode-prediction {
    background: #f8f9fa;
}

.shipcode-question {
    font-size: 17px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 16px;
}

.shipcode-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.shipcode-answer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: border-color 0.2s, background 0.2s;
}

.shipcode-answer-label:hover {
    border-color: #2271b1;
    background: #f0f6fc;
}

.shipcode-answer-label input[type="radio"] {
    margin: 0;
}

.shipcode-phone-group {
    margin-bottom: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.shipcode-phone-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #50575e;
}

.shipcode-phone-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.shipcode-phone-input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

.shipcode-validation-error {
    color: #d63638;
    font-size: 14px;
    margin-bottom: 12px;
}

/* Action link button */
.shipcode-action-link-wrap {
    margin-top: 14px;
}

.shipcode-action-btn {
    display: inline-block;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #00a32a;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.shipcode-action-btn:hover {
    background: #008a20;
    color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
    .shipcode-code-display {
        flex-direction: column;
        gap: 8px;
    }

    .shipcode-code {
        font-size: 16px;
    }

    .shipcode-answers,
    .shipcode-phone-group {
        max-width: 100%;
    }
}

/* Review mode (rating + name + comment inline) */
.shipcode-rating{display:flex;align-items:center;gap:2px;margin:10px 0}
.shipcode-rating-label{margin-right:8px;font-weight:600}
.shipcode-star{background:none;border:none;cursor:pointer;font-size:28px;line-height:1;color:#d0d0d0;padding:0 2px;transition:color .12s}
.shipcode-star:hover,.shipcode-star--on{color:#ffb400}
.shipcode-review-group{margin:8px 0}
.shipcode-review-name,.shipcode-review-comment{width:100%;padding:9px 10px;box-sizing:border-box;border:1px solid #ccc;border-radius:6px;font-size:14px}
.shipcode-review-comment{resize:vertical}

/* ============================================================
   Floating gift-box icon + popup (shipcode_float)
   ============================================================ */
.shipcode-float{--scf-red:#d62839;--scf-red-dk:#b01a28;--scf-gold:#ffc436;}

/* Launcher — fixed middle-right */
.shipcode-fab{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:99998;
    cursor:pointer;border:none;background:transparent;padding:0;
    filter:drop-shadow(0 6px 14px rgba(214,40,57,.35));
    animation:shipcode-fab-float 3s ease-in-out infinite}
.shipcode-fab img{width:82px;height:82px;display:block}
.shipcode-fab:hover{transform:translateY(-50%) scale(1.06)}
.shipcode-fab-badge{position:absolute;top:-6px;left:-8px;background:var(--scf-red);color:#fff;
    font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.2);animation:shipcode-fab-pulse 1.6s ease-in-out infinite}
@keyframes shipcode-fab-float{0%,100%{margin-top:0}50%{margin-top:-8px}}
@keyframes shipcode-fab-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Overlay + modal */
.shipcode-fab-overlay{position:fixed;inset:0;background:rgba(15,20,30,.55);z-index:99999;
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .25s}
.shipcode-fab-overlay.shipcode-fab-open{opacity:1;pointer-events:auto}
.shipcode-fab-modal{width:100%;max-width:360px;background:#fff;border-radius:18px;overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.35);transform:translateY(16px) scale(.97);transition:transform .25s;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:#1f2430}
.shipcode-fab-overlay.shipcode-fab-open .shipcode-fab-modal{transform:none}
.shipcode-fab-head{background:linear-gradient(135deg,var(--scf-red),#e5602a);color:#fff;
    padding:22px 22px 46px;text-align:center;position:relative}
.shipcode-fab-head img{width:64px;height:64px}
.shipcode-fab-head h3{margin:6px 0 2px;font-size:19px;color:#fff}
.shipcode-fab-head p{margin:0;font-size:13px;opacity:.92;color:#fff}
.shipcode-fab-close{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.2);border:none;
    color:#fff;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1}
.shipcode-fab-body{padding:22px;margin-top:-26px}
.shipcode-fab-card{background:#fff;border:1px solid #eef0f4;border-radius:14px;padding:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.06)}
.shipcode-fab-worth{text-align:center;font-size:13px;color:#6b7280;margin:0 0 14px}
.shipcode-fab-worth b{color:var(--scf-red);font-size:15px}
.shipcode-fab-label{font-size:13px;font-weight:600;display:block;margin-bottom:6px}
.shipcode-fab-name{width:100%;padding:12px 14px;box-sizing:border-box;border:1.5px solid #d7dbe2;
    border-radius:10px;font-size:15px;outline:none;transition:border-color .2s}
.shipcode-fab-name:focus{border-color:var(--scf-red)}
.shipcode-fab-err{color:var(--scf-red);font-size:13px;margin-top:8px;display:none}
.shipcode-fab-submit{width:100%;margin-top:14px;padding:13px;border:none;border-radius:10px;font-size:15px;
    font-weight:700;color:#fff;background:var(--scf-red);cursor:pointer;transition:filter .2s}
.shipcode-fab-submit:hover{filter:brightness(.94)}
.shipcode-fab-submit:disabled{opacity:.7;cursor:default}
/* Result */
.shipcode-fab-result{text-align:center}
.shipcode-fab-tick{width:52px;height:52px;border-radius:50%;background:#e8f8ef;color:#16a34a;
    display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 8px}
.shipcode-fab-hi{font-size:14px;color:#6b7280;margin:0 0 4px}
.shipcode-fab-hi b{color:#1f2430}
.shipcode-fab-worth2{font-size:13px;color:#6b7280;margin:0 0 14px}
.shipcode-fab-worth2 b{color:var(--scf-red)}
.shipcode-fab-codebox{display:flex;align-items:center;justify-content:space-between;gap:8px;
    border:2px dashed var(--scf-gold);background:#fffdf5;border-radius:12px;padding:12px 14px}
.shipcode-fab-codebox .shipcode-code{font-size:22px;font-weight:800;letter-spacing:1px;color:var(--scf-red-dk)}
.shipcode-fab-codebox .shipcode-copy-btn{background:var(--scf-gold);color:#5a3d00;border:none;border-radius:8px;
    padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer}
.shipcode-fab-cta{display:block;margin-top:14px;padding:13px;border-radius:10px;background:#16a34a;color:#fff;
    text-decoration:none;font-weight:700;font-size:15px}
.shipcode-fab-foot{font-size:11px;color:#9aa1ac;text-align:center;padding:4px 0 16px}

@media (max-width:480px){
    .shipcode-fab img{width:66px;height:66px}
    .shipcode-fab{right:12px}
}