/* Trademark Step Form v4.1.0 */
:root {
    --tsf-navy:    #1a2e5a;
    --tsf-gold:    #c8a951;
    --tsf-gold-lt: #f0d98a;
    --tsf-white:   #fff;
    --tsf-border:  #dde3f0;
    --tsf-radius:  12px;
    --tsf-shadow:  0 4px 24px rgba(26,46,90,.10);
}
.tsf-wrapper { max-width:680px; margin:0 auto; font-family:'Inter',Arial,sans-serif; color:#1a2e5a; }
.tsf-h { display:none !important; }

/* ── Progress bar ────────────────────────────────────────────────── */
.tsf-progress { display:flex; align-items:center; justify-content:center; padding:28px 16px 22px; gap:0; }
.tsf-ps { display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.tsf-sc { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; background:#e8edf5; color:#94a3b8; border:2px solid #dde3f0; transition:all .3s; }
.tsf-sl { font-size:11px; color:#94a3b8; font-weight:500; transition:color .3s; white-space:nowrap; }
.tsf-ps.tsf-active .tsf-sc { background:var(--tsf-gold); color:var(--tsf-navy); border-color:var(--tsf-gold); box-shadow:0 0 0 4px rgba(200,169,81,.18); }
.tsf-ps.tsf-active .tsf-sl { color:var(--tsf-navy); font-weight:700; }
.tsf-ps.tsf-done .tsf-sc { background:var(--tsf-navy); color:#fff; border-color:var(--tsf-navy); }
.tsf-ps.tsf-done .tsf-sl { color:var(--tsf-navy); }
/* FIX BUG 1: renamed from .tsf-pl to .tsf-pline — no collision with PayPal label */
.tsf-pline { flex:1; height:2px; background:#e8edf5; min-width:18px; transition:background .3s; }
.tsf-pline.tsf-pline-done { background:var(--tsf-navy); }

/* ── Step card ───────────────────────────────────────────────────── */
.tsf-step { background:var(--tsf-white); border-radius:var(--tsf-radius); box-shadow:var(--tsf-shadow); padding:36px 40px 32px; border:1px solid var(--tsf-border); }
@media(max-width:580px) { .tsf-step { padding:24px 18px 22px; } }
.tsf-title { font-size:22px; font-weight:800; color:var(--tsf-navy); margin:0 0 6px; }
.tsf-sub { font-size:14px; color:#64748b; margin:0 0 28px; line-height:1.6; }

/* ── Form fields ─────────────────────────────────────────────────── */
.tsf-f { margin-bottom:18px; }
.tsf-fl, .tsf-f label { display:block; font-size:13px; font-weight:600; color:var(--tsf-navy); margin-bottom:7px; }
.tsf-r { color:#ef4444; margin-left:2px; }
.tsf-opt { color:#94a3b8; font-weight:400; font-size:12px; }
.tsf-f input[type=text],
.tsf-f input[type=email],
.tsf-f input[type=url],
.tsf-f input[type=number],
.tsf-f input[type=tel],
.tsf-f select,
.tsf-f textarea {
    width:100%; box-sizing:border-box; padding:11px 14px;
    border:1.5px solid var(--tsf-border); border-radius:8px;
    font-size:14px; color:var(--tsf-navy); background:#fff;
    outline:none; transition:border .2s,box-shadow .2s; font-family:inherit;
}
.tsf-f input:focus, .tsf-f select:focus, .tsf-f textarea:focus {
    border-color:var(--tsf-gold); box-shadow:0 0 0 3px rgba(200,169,81,.15);
}
.tsf-f textarea { resize:vertical; min-height:100px; }
.tsf-hint-s { display:block; font-size:12px; color:#94a3b8; margin-top:4px; }
.tsf-e { display:block; font-size:12px; color:#ef4444; margin-top:4px; min-height:16px; }



/* ── Phone — US only static prefix ──────────────────────────────── */
.tsf-phone-row { display:flex; gap:0; }
.tsf-dial-static {
    display:flex; align-items:center; padding:11px 14px;
    border:1.5px solid var(--tsf-border); border-right:none;
    border-radius:8px 0 0 8px; background:#f8fafc;
    font-size:14px; font-weight:600; color:var(--tsf-navy);
    white-space:nowrap; user-select:none;
}
.tsf-phone-num {
    flex:1; padding:11px 14px; border:1.5px solid var(--tsf-border);
    border-radius:0 8px 8px 0; font-size:14px; color:var(--tsf-navy);
    background:#fff; outline:none; font-family:inherit;
    transition:border .2s,box-shadow .2s;
}
.tsf-phone-num:focus { border-color:var(--tsf-gold); box-shadow:0 0 0 3px rgba(200,169,81,.15); }
/* Country static badge (Step 3) */
.tsf-country-static {
    padding:11px 14px; border:1.5px solid var(--tsf-border);
    border-radius:8px; background:#f8fafc; font-size:14px;
    color:var(--tsf-navy); font-weight:600; display:inline-block;
}

/* ── Mark type radio cards ───────────────────────────────────────── */
.tsf-rg { display:flex; gap:14px; flex-wrap:wrap; }
.tsf-rc { position:relative; cursor:pointer; border:2px solid var(--tsf-border); border-radius:10px; overflow:hidden; flex:1 1 140px; transition:border .2s,box-shadow .2s; }
.tsf-rc input { position:absolute; opacity:0; width:0; height:0; }
.tsf-ri { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px 14px; transition:background .2s; }
.tsf-ri img { border-radius:6px; opacity:.7; transition:opacity .2s; object-fit:cover; }
.tsf-ri span { font-size:14px; font-weight:700; color:#64748b; transition:color .2s; }
.tsf-rck { position:absolute; top:8px; right:8px; width:22px; height:22px; background:var(--tsf-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--tsf-navy); font-weight:900; opacity:0; transition:opacity .2s; }
.tsf-rc:has(input:checked) { border-color:var(--tsf-gold); box-shadow:0 0 0 3px rgba(200,169,81,.18); }
.tsf-rc:has(input:checked) .tsf-ri { background:#fffbf0; }
.tsf-rc:has(input:checked) .tsf-ri img { opacity:1; }
.tsf-rc:has(input:checked) .tsf-ri span { color:var(--tsf-navy); }
.tsf-rc:has(input:checked) .tsf-rck { opacity:1; }
.tsf-rc:hover { border-color:var(--tsf-gold-lt); }

/* ── Ownership / using-mark toggles ─────────────────────────────── */
.tsf-ot { display:flex; gap:12px; flex-wrap:wrap; }
.tsf-oo { flex:1 1 140px; cursor:pointer; border:2px solid var(--tsf-border); border-radius:10px; padding:14px 18px; display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:#64748b; transition:all .2s; position:relative; }
.tsf-oo input { position:absolute; opacity:0; width:0; height:0; }
.tsf-oo:has(input:checked) { border-color:var(--tsf-gold); background:#fffbf0; color:var(--tsf-navy); box-shadow:0 0 0 3px rgba(200,169,81,.15); }
.tsf-oo:hover { border-color:var(--tsf-gold-lt); }

/* ── Field sub-card ──────────────────────────────────────────────── */
.tsf-fc { background:#f8fafc; border-radius:10px; padding:20px 22px 8px; margin-top:12px; border:1.5px solid var(--tsf-border); }
.tsf-sh { font-size:12px; font-weight:700; color:var(--tsf-navy); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--tsf-border); }
.tsf-g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px) { .tsf-g2 { grid-template-columns:1fr; } }

/* ── Upload area ─────────────────────────────────────────────────── */
.tsf-ua { border:2px dashed var(--tsf-border); border-radius:10px; cursor:pointer; position:relative; overflow:hidden; transition:border .2s,background .2s; }
.tsf-ua:hover { border-color:var(--tsf-gold); background:#fffdf5; }
.tsf-ua.tsf-dragover { border-color:var(--tsf-gold); background:#fffbf0; }
.tsf-fi { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.tsf-ui { display:flex; flex-direction:column; align-items:center; padding:28px 20px; gap:6px; }
.tsf-uic { font-size:30px; }
.tsf-uit { font-size:14px; font-weight:600; color:#475569; }
.tsf-uih { font-size:12px; color:#94a3b8; }
.tsf-up { padding:14px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.tsf-pimg { max-width:120px; max-height:100px; border-radius:6px; object-fit:contain; }
.tsf-pname { font-size:12px; color:#64748b; word-break:break-all; text-align:center; }
.tsf-ppdf { font-size:14px; font-weight:600; color:var(--tsf-navy); padding:8px; }
.tsf-pclear { background:none; border:1px solid #fca5a5; border-radius:6px; color:#ef4444; font-size:12px; padding:4px 10px; cursor:pointer; }
.tsf-pclear:hover { background:#fef2f2; }

/* ── Usage note box ──────────────────────────────────────────────── */
.tsf-unote { background:#fefce8; border:1px solid #fde68a; border-radius:8px; padding:10px 14px; font-size:13px; color:#92400e; margin-bottom:16px; }

/* ── Social URL rows ─────────────────────────────────────────────── */
.tsf-sr { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.tsf-si { flex:1; padding:10px 13px; border:1.5px solid var(--tsf-border); border-radius:8px; font-size:14px; outline:none; }
.tsf-si:focus { border-color:var(--tsf-gold); }
.tsf-srm { background:none; border:1px solid #fca5a5; color:#ef4444; border-radius:6px; padding:4px 10px; cursor:pointer; font-size:13px; }
.tsf-srm:hover { background:#fef2f2; }
.tsf-sadd { background:none; border:1.5px dashed var(--tsf-border); border-radius:8px; color:#64748b; font-size:13px; padding:8px 16px; cursor:pointer; margin-top:4px; width:100%; box-sizing:border-box; }
.tsf-sadd:hover { border-color:var(--tsf-gold); color:var(--tsf-navy); }

/* ── Price card ──────────────────────────────────────────────────── */
.tsf-pc { background:linear-gradient(135deg,#f8fafc 0%,#eef2f9 100%); border-radius:12px; padding:20px 24px; border:1.5px solid var(--tsf-border); margin:18px 0; }
.tsf-pr { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--tsf-border); font-size:14px; color:#475569; }
.tsf-pr:last-child { border-bottom:none; }
.tsf-pt { padding-top:12px; font-size:16px; font-weight:700; color:var(--tsf-navy); }
.tsf-pt strong { font-size:22px; color:var(--tsf-gold); }

/* ── Federal notice ──────────────────────────────────────────────── */
.tsf-fn { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:10px 14px; font-size:13px; color:#1e40af; display:flex; gap:8px; align-items:flex-start; margin-bottom:16px; }

/* ── Consent checkbox ────────────────────────────────────────────── */
.tsf-cf { margin:20px 0; }
.tsf-cl { display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:13px; color:#475569; line-height:1.6; }
.tsf-cl input { margin-top:3px; width:16px; height:16px; accent-color:var(--tsf-gold); flex-shrink:0; }
.tsf-cl a { color:var(--tsf-gold); font-weight:600; }

/* FIX BUG 10: PayPal label uses .tsf-paylbl — no collision with .tsf-pline progress divs */
.tsf-pw { margin-top:18px; }
.tsf-paylbl { font-size:13px; color:#64748b; text-align:center; margin-bottom:10px; }

/* ── Navigation buttons ──────────────────────────────────────────── */
.tsf-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; }
.tsf-btn { padding:13px 30px; border-radius:50px; font-size:15px; font-weight:700; cursor:pointer; border:none; transition:all .2s; white-space:nowrap; }
.tsf-btn-p { background:linear-gradient(135deg,var(--tsf-gold) 0%,#e6c05a 100%); color:var(--tsf-navy); box-shadow:0 4px 16px rgba(200,169,81,.35); }
.tsf-btn-p:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(200,169,81,.45); }
.tsf-btn-b { background:#f1f5f9; color:#64748b; font-weight:600; }
.tsf-btn-b:hover { background:#e2e8f0; color:var(--tsf-navy); }

/* ── Success screen ──────────────────────────────────────────────── */
#tsf-success { text-align:center; }
.tsf-ok { width:72px; height:72px; background:linear-gradient(135deg,var(--tsf-gold),#e6c05a); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--tsf-navy); font-weight:900; margin:0 auto 20px; box-shadow:0 6px 24px rgba(200,169,81,.4); }
#tsf-success .tsf-sub { margin-bottom:28px; }