/* Fonts loaded via wp_enqueue_style in PHP for better performance */

:root {
    --jsg-pink:    #e8a0b4;
    --jsg-rose:    #d4607a;
    --jsg-blush:   #fdf0f4;
    --jsg-cream:   #fff9f5;
    --jsg-gold:    #c9963a;
    --jsg-dark:    #2d1f26;
    --jsg-text:    #5a3d48;
    --jsg-border:  #f0d5de;
    --jsg-radius:  18px;
    --jsg-shadow:  0 8px 40px rgba(212,96,122,0.12);
}

.jsg-wrapper {
    font-family: 'Nunito', sans-serif;
    color: var(--jsg-text);
    max-width: 780px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* HERO */
.jsg-hero {
    text-align: center;
    padding: 48px 20px 36px;
    background: linear-gradient(135deg, #fdf0f4 0%, #fff9f5 60%, #fde8ef 100%);
    border-radius: var(--jsg-radius);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.jsg-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(232,160,180,0.25) 0%, transparent 70%);
    border-radius: 50%;
}
.jsg-hero-badge {
    display: inline-block;
    background: var(--jsg-rose);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.jsg-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 6vw, 48px);
    color: var(--jsg-dark);
    margin: 0 0 12px;
    line-height: 1.2;
}
.jsg-prize {
    color: var(--jsg-rose);
    font-style: italic;
}
.jsg-hero-subtitle {
    font-size: 16px;
    color: var(--jsg-text);
    line-height: 1.6;
    margin: 0 0 20px;
    opacity: 0.85;
}
.jsg-confetti-row {
    font-size: 20px;
    letter-spacing: 6px;
    opacity: 0.6;
}

/* STEPS */
.jsg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.jsg-step {
    text-align: center;
    max-width: 160px;
}
.jsg-step-num {
    width: 44px; height: 44px;
    background: var(--jsg-rose);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
}
.jsg-step p { font-size: 13px; margin: 0; opacity: 0.8; line-height: 1.4; }
.jsg-step-arrow { font-size: 22px; color: var(--jsg-pink); margin-top: -18px; }

/* CARDS */
.jsg-card {
    background: #fff;
    border: 1px solid var(--jsg-border);
    border-radius: var(--jsg-radius);
    padding: 36px 32px;
    margin-bottom: 24px;
    box-shadow: var(--jsg-shadow);
    position: relative;
    transition: all 0.3s ease;
}
.jsg-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--jsg-dark);
    margin: 0 0 6px;
}
.jsg-card-subtitle {
    font-size: 14px;
    color: var(--jsg-text);
    opacity: 0.7;
    margin: 0 0 28px;
}

/* SOCIAL ICONS ROW — 3 in one row */
.jsg-social-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
.jsg-social-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px 12px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    flex: 1;
    max-width: 110px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.jsg-social-icon-btn img {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
    display: block;
}
.jsg-icon-label { font-size: 12px; font-weight: 700; }
.jsg-social-icon-btn.jsg-instagram { background: linear-gradient(135deg, #f9f0f4, #fde8ef); color: #c13584; border-color: #f0c0d0; }
.jsg-social-icon-btn.jsg-facebook  { background: linear-gradient(135deg, #f0f4fd, #e8effe); color: #1877f2; border-color: #c5d5f5; }
.jsg-social-icon-btn.jsg-tiktok    { background: linear-gradient(135deg, #f5f5f5, #ececec); color: #010101; border-color: #ddd; }
.jsg-social-icon-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.jsg-social-icon-btn:active { transform: scale(0.95); }
.jsg-social-icon-btn.followed { border-color: #22c55e !important; background: #f0fff5 !important; }
.jsg-check {
    position: absolute;
    top: -8px; left: -8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    background: #ddd;
    color: transparent;
    transition: all 0.3s ease;
    font-weight: 900;
}
.jsg-social-icon-btn.followed .jsg-check {
    background: #22c55e;
    color: #fff;
}

/* PROGRESS BAR */
.jsg-follow-progress { text-align: center; }
.jsg-progress-bar {
    height: 8px;
    background: #f0d5de;
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 8px;
}
.jsg-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--jsg-pink), var(--jsg-rose));
    border-radius: 50px;
    transition: width 0.4s ease;
}
.jsg-progress-text { font-size: 13px; color: var(--jsg-rose); font-weight: 600; margin: 0; }

/* LOCKED STATE */
.jsg-locked { opacity: 0.6; pointer-events: none; }
.jsg-locked.jsg-unlocked { opacity: 1; pointer-events: all; }
.jsg-lock-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,249,245,0.5);
    border-radius: var(--jsg-radius);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 5;
    gap: 8px;
}
.jsg-lock-icon { font-size: 40px; }
.jsg-lock-overlay p { font-size: 14px; font-weight: 600; color: var(--jsg-rose); margin: 0; }

/* FORM */
.jsg-form { display: flex; flex-direction: column; gap: 0; }
.jsg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.jsg-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.jsg-full-width { margin-bottom: 16px; }
.jsg-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--jsg-dark);
    letter-spacing: 0.3px;
}
.jsg-req { color: var(--jsg-rose); }
.jsg-form-group input {
    border: 1.5px solid var(--jsg-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--jsg-dark);
    outline: none;
    transition: border-color 0.2s;
    background: var(--jsg-cream);
}
.jsg-form-group input:focus { border-color: var(--jsg-rose); background: #fff; }

/* UPLOAD AREA */
.jsg-upload-area {
    border: 2px dashed var(--jsg-border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--jsg-blush);
}
.jsg-upload-area:hover { border-color: var(--jsg-rose); background: #fff0f5; }
.jsg-upload-icon { font-size: 36px; margin-bottom: 8px; }
.jsg-upload-placeholder p { margin: 0 0 4px; font-weight: 600; font-size: 15px; color: var(--jsg-dark); }
.jsg-upload-placeholder span { font-size: 12px; color: var(--jsg-text); opacity: 0.6; }
.jsg-photo-preview {
    max-width: 100%;
    max-height: 280px;
    border-radius: 10px;
    object-fit: cover;
}

/* CHECKBOX */
.jsg-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.5;
}
.jsg-checkbox-label input { margin-top: 2px; accent-color: var(--jsg-rose); width: 16px; height: 16px; flex-shrink: 0; }

/* SUBMIT BUTTON */
.jsg-submit-btn {
    margin-top: 8px;
    background: linear-gradient(135deg, var(--jsg-rose), #b84d6a);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 24px rgba(212,96,122,0.35);
}
.jsg-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(212,96,122,0.45); }
.jsg-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* MESSAGES */
#jsg-form-messages .jsg-msg-error,
#jsg-form-messages .jsg-msg-success {
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}
#jsg-form-messages .jsg-msg-error   { background: #fff0f0; color: #c0392b; border: 1px solid #f5b5b5; }
#jsg-form-messages .jsg-msg-success { background: #f0fff5; color: #1a8a45; border: 1px solid #a5e3c0; }

/* SUCCESS CARD */
.jsg-success-card {
    text-align: center;
    background: linear-gradient(135deg, #fdf0f4, #fff9f5);
    border: 2px solid var(--jsg-border);
    border-radius: var(--jsg-radius);
    padding: 48px 32px;
    box-shadow: var(--jsg-shadow);
}
.jsg-success-icon { font-size: 64px; margin-bottom: 16px; }
.jsg-success-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--jsg-dark);
    margin: 0 0 12px;
}
.jsg-success-card p { font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.jsg-success-sub { font-size: 13px; opacity: 0.65; }

/* =====================
   MOBILE FIRST — base styles are for phones
   ===================== */

/* Wrapper: tight padding on phones */
.jsg-wrapper {
    padding: 12px 12px 48px !important;
}

/* Hero: smaller on phone */
.jsg-hero {
    padding: 32px 16px 24px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
}
.jsg-hero-title {
    font-size: 28px !important;
    word-break: break-word;
}
.jsg-hero-subtitle {
    font-size: 14px !important;
}
.jsg-confetti-row {
    font-size: 16px !important;
    letter-spacing: 3px !important;
}

/* Steps: stack vertically on phone */
.jsg-steps {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 4px;
    margin-bottom: 16px !important;
}
.jsg-step {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 10px 0;
    border-bottom: 1px solid var(--jsg-border);
    width: 100%;
}
.jsg-step:last-child { border-bottom: none; }
.jsg-step-num {
    width: 36px !important; height: 36px !important;
    font-size: 16px !important;
    flex-shrink: 0;
    margin: 0 !important;
}
.jsg-step p { font-size: 13px !important; }
.jsg-step-arrow { display: none !important; }

/* Cards: no side padding overflow */
.jsg-card {
    padding: 22px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
}
.jsg-card-title { font-size: 18px !important; }
.jsg-card-subtitle { font-size: 13px !important; margin-bottom: 20px !important; }

/* Social icon row: stays as row on all sizes, shrink on tiny phones */
.jsg-social-row { gap: 10px !important; }
.jsg-social-icon-btn {
    padding: 14px 8px 10px !important;
    border-radius: 12px !important;
    max-width: 95px !important;
}
.jsg-social-icon-btn img { width: 40px !important; height: 40px !important; }
.jsg-icon-label { font-size: 11px !important; }
.jsg-social-icon-btn:hover { transform: none !important; }
.jsg-social-icon-btn:active { transform: scale(0.94) !important; }

/* Form: always single column on phone */
.jsg-form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
}
.jsg-form-group {
    margin-bottom: 14px !important;
}
.jsg-full-width {
    margin-bottom: 14px !important;
}
.jsg-form-group label {
    font-size: 13px !important;
    margin-bottom: 4px;
}
.jsg-form-group input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 13px 14px !important;
    border-radius: 10px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Upload area: compact on phone */
.jsg-upload-area {
    padding: 24px 16px !important;
    border-radius: 10px !important;
}
.jsg-upload-icon { font-size: 28px !important; }
.jsg-upload-placeholder p { font-size: 14px !important; }
.jsg-upload-placeholder span { font-size: 11px !important; }
.jsg-photo-preview { max-height: 220px !important; }

/* Checkbox: bigger tap area */
.jsg-checkbox-label {
    font-size: 13px !important;
    padding: 4px 0;
}
.jsg-checkbox-label input {
    width: 20px !important; height: 20px !important;
    margin-top: 0 !important;
}

/* Submit button: full width on phone */
.jsg-submit-btn {
    width: 100% !important;
    padding: 18px 24px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
    -webkit-tap-highlight-color: transparent;
}
.jsg-submit-btn:hover { transform: none !important; }
.jsg-submit-btn:active { transform: scale(0.98) !important; }

/* Lock overlay text size */
.jsg-lock-icon { font-size: 32px !important; }
.jsg-lock-overlay p { font-size: 13px !important; }

/* Success card */
.jsg-success-card {
    padding: 36px 20px !important;
    border-radius: 14px !important;
}
.jsg-success-icon { font-size: 48px !important; }
.jsg-success-card h2 { font-size: 22px !important; }
.jsg-success-card p { font-size: 14px !important; }

/* Progress bar text */
.jsg-progress-text { font-size: 12px !important; }

/* TABLET (600px+): restore two columns for form */
@media (min-width: 600px) {
    .jsg-wrapper { padding: 20px 20px 60px !important; }
    .jsg-hero { padding: 40px 28px 32px !important; }
    .jsg-hero-title { font-size: clamp(30px, 5vw, 44px) !important; }
    .jsg-card { padding: 32px 28px !important; }
    .jsg-form-row { grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-bottom: 16px !important; }
    .jsg-form-group { margin-bottom: 0 !important; }
    .jsg-steps { flex-direction: row !important; align-items: center !important; }
    .jsg-step { flex-direction: column !important; border-bottom: none !important; width: auto !important; }
    .jsg-step-num { margin: 0 auto 8px !important; }
    .jsg-step p { text-align: center !important; }
    .jsg-step-arrow { display: block !important; }
    .jsg-submit-btn { width: auto !important; }
    .jsg-form-group input { font-size: 14px !important; }
}

/* DESKTOP (780px+) */
@media (min-width: 780px) {
    .jsg-wrapper { padding: 24px 16px 60px !important; }
    .jsg-card { padding: 36px 32px !important; }
    .jsg-hero-title { font-size: 48px !important; }
    .jsg-social-icon-btn:hover { transform: translateY(-3px) !important; }
    .jsg-submit-btn:hover { transform: translateY(-2px) !important; }
}

/* ══════════════════════════════════════
   CLOSED GIVEAWAY STATE
══════════════════════════════════════ */
.jsg-closed-wrap { max-width: 560px; margin: 0 auto; padding: 16px; }

.jsg-ended-card {
    background: linear-gradient(160deg, #fff9f0 0%, #fff3f8 100%);
    border: 2px solid #f0c060;
    border-radius: 24px;
    padding: 40px 32px 32px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(233,30,140,0.10);
}
.jsg-ended-sparks { font-size: 28px; margin-bottom: 8px; letter-spacing: 6px; }
.jsg-ended-lock   { font-size: 40px; margin-bottom: 10px; }
.jsg-ended-title  { font-size: 1.6rem; font-weight: 800; color: #2d1f26; margin: 0 0 20px; }

.jsg-ended-winner-box {
    background: linear-gradient(135deg, #fff8e0, #fff0cc);
    border: 2px solid #f0c040;
    border-radius: 16px;
    padding: 20px 24px;
    margin: 0 auto 20px;
    max-width: 340px;
}
.jsg-ended-crown   { font-size: 36px; margin-bottom: 8px; }
.jsg-ended-congrats {
    font-size: 1.3rem; font-weight: 800; color: #2d1f26; margin: 0 0 6px;
}
.jsg-ended-congrats strong { color: #e91e8c; }
.jsg-ended-prize   { font-size: 1rem; color: #5a3d48; margin: 0; }
.jsg-ended-prize strong { color: #c9963a; }

.jsg-ended-thanks  { font-size: .9rem; color: #7a5a68; margin: 0; line-height: 1.6; }

/* ── Follow CTA card ── */
.jsg-follow-cta-card {
    background: #fff;
    border: 1.5px solid #f0d5de;
    border-radius: 20px;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(233,30,140,0.07);
}
.jsg-follow-cta-icon  { font-size: 32px; margin-bottom: 10px; }
.jsg-follow-cta-title {
    font-size: 1.15rem; font-weight: 800; color: #2d1f26;
    margin: 0 0 8px;
}
.jsg-follow-cta-sub {
    font-size: .88rem; color: #7a5a68; margin: 0 0 22px; line-height: 1.6;
}
.jsg-follow-cta-row { justify-content: center; margin-bottom: 18px !important; }
.jsg-follow-cta-note {
    font-size: .82rem; font-weight: 700; color: #e91e8c;
    background: #fce4f3; border-radius: 50px;
    display: inline-block; padding: 6px 18px; margin: 0;
}

@media (max-width: 480px) {
    .jsg-ended-card { padding: 28px 18px 24px; }
    .jsg-ended-title { font-size: 1.3rem; }
    .jsg-ended-congrats { font-size: 1.1rem; }
    .jsg-follow-cta-card { padding: 22px 16px 18px; }
}

/* Winner photo */
.jsg-ended-photo-wrap {
    position: relative;
    width: 130px; height: 130px;
    margin: 0 auto 14px;
}
.jsg-ended-photo {
    width: 130px; height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f0c040;
    box-shadow: 0 6px 24px rgba(233,30,140,0.18);
    display: block;
}
.jsg-ended-photo-crown {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 1;
}
@media (max-width: 480px) {
    .jsg-ended-photo-wrap { width: 110px; height: 110px; }
    .jsg-ended-photo      { width: 110px; height: 110px; }
}

/* Event photo */
.jsg-event-photo-wrap { margin: 18px auto 0; text-align: center; }
.jsg-event-label { font-size: .8rem; font-weight: 700; color: #7a5a68; margin: 0 0 8px; }
.jsg-event-photo {
    width: 100%; max-width: 320px; border-radius: 16px;
    object-fit: cover; border: 3px solid #f0c040;
    box-shadow: 0 6px 24px rgba(233,30,140,0.13);
    display: block; margin: 0 auto;
}

/* TikTok card */
.jsg-tiktok-card {
    background: #fff; border: 1.5px solid #e8e8e8;
    border-radius: 20px; padding: 22px 20px 20px;
    margin-bottom: 20px; text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.jsg-tiktok-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.jsg-tiktok-icon  { font-size: 24px; }
.jsg-tiktok-title { font-size: 1rem; font-weight: 800; color: #010101; margin: 0; }
.jsg-tiktok-embed { display: flex; justify-content: center; }
.jsg-tiktok-btn {
    display: inline-block; background: #010101; color: #fff;
    padding: 12px 28px; border-radius: 50px; font-weight: 700;
    font-size: .95rem; text-decoration: none; transition: opacity .15s;
}
.jsg-tiktok-btn:hover { opacity: .85; }