/* ======================================================================
   SMMKit – Frontend
   ====================================================================== */

/* Disable double-tap zoom globally — baseline for mobile web apps */
html { touch-action: manipulation; }

/* NUCLEAR iOS zoom prevention: 16px on ALL inputs to prevent auto-zoom on focus.
   Uses !important + high specificity to beat any theme override. */
@supports (-webkit-touch-callout: none) {
    body input[type="text"],
    body input[type="url"],
    body input[type="email"],
    body input[type="tel"],
    body input[type="number"],
    body input[type="password"],
    body input[type="search"],
    body select,
    body textarea {
        font-size: 16px !important;
    }
}

:root {
    --smf-black: #0a0a0a;
    --smf-900: #171717;
    --smf-700: #404040;
    --smf-500: #737373;
    --smf-400: #a3a3a3;
    --smf-300: #d4d4d4;
    --smf-200: #e5e5e5;
    --smf-100: #f5f5f5;
    --smf-50: #fafafa;
    --smf-white: #ffffff;
    --smf-green: #16a34a;
    --smf-green-bg: #f0fdf4;
    --smf-red: #dc2626;
    --smf-red-bg: #fef2f2;
    --smf-blue: #2563eb;
    --smf-blue-bg: #eff6ff;
    --smf-radius: 10px;
    --smf-radius-sm: 8px;
    --smf-transition: 180ms cubic-bezier(.4,0,.2,1);
}

/* Hide WC native quantity when SMMPro fields are present */
.smmpro-fields ~ .quantity,
.smmpro-fields + .quantity,
form.cart:has(.smmpro-fields) > .quantity { display: none !important; }

/* === Fields === */
.smmpro-fields { margin: 20px 0; }
.smmpro-field { margin-bottom: 16px; }
.smmpro-field label { display: block; font-size: 13px; font-weight: 600; color: var(--smf-900); margin-bottom: 6px; }
.smmpro-field label abbr { color: var(--smf-red); text-decoration: none; }

.smmpro-field input[type="text"],
.smmpro-field input[type="url"],
.smmpro-field input[type="number"],
.smmpro-field textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--smf-200); border-radius: var(--smf-radius-sm);
    font-size: 16px; color: var(--smf-900); background: var(--smf-white); box-sizing: border-box;
    transition: border-color var(--smf-transition), box-shadow var(--smf-transition); -webkit-appearance: none;
}
.smmpro-field input:focus, .smmpro-field textarea:focus { outline: none; border-color: var(--smf-400); box-shadow: 0 0 0 3px var(--smf-100); }
.smmpro-field input::placeholder, .smmpro-field textarea::placeholder { color: var(--smf-400); }
.smmpro-field input.smmpro-valid { border-color: var(--smf-green); }
.smmpro-field input.smmpro-invalid { border-color: var(--smf-red); }
.smmpro-field input[type="number"] { max-width: 180px; }
.smmpro-field-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--smf-400); }

.smmpro-validation-msg { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; min-height: 16px; }
.smmpro-validation-msg.success { color: var(--smf-green); }
.smmpro-validation-msg.error { color: var(--smf-red); }
.smmpro-validation-msg.loading { color: var(--smf-500); }

/* Scan button */
.smmpro-scan-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px;
    padding: 12px 20px; background: var(--smf-black); color: #fff; border: none; border-radius: var(--smf-radius-sm);
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--smf-transition);
}
.smmpro-scan-btn:hover { background: var(--smf-700); }
.smmpro-scan-btn.smmpro-scanning { opacity: .6; pointer-events: none; }

/* Preview card */
.smmpro-preview-card { display: flex; gap: 12px; padding: 12px; background: var(--smf-50); border: 1px solid var(--smf-200); border-radius: var(--smf-radius-sm); }
.smmpro-preview-thumb { width: 80px; height: 80px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--smf-200); }
.smmpro-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.smmpro-preview-info { flex: 1; }
.smmpro-preview-owner { font-weight: 600; font-size: 13px; }
.smmpro-preview-stats { font-size: 12px; color: var(--smf-500); display: flex; gap: 10px; margin-top: 4px; }

/* Comment counter */
.smmpro-comment-counter { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--smf-500); }
.smmpro-counter-current { font-weight: 700; font-size: 15px; min-width: 20px; text-align: center; }
.smmpro-counter-hint { color: var(--smf-400); font-size: 11px; margin-left: 4px; }
.smmpro-comments-field[data-comments-mode="custom_comments"] textarea { font-family: monospace; font-size: 13px; line-height: 1.8; min-height: 120px; }

/* === MODAL (mobile-first) ===
   Uses 100svh (small viewport) on mobile so iOS Safari's dynamic toolbar
   cannot eat the confirm button. Respects notch/home indicator via
   env(safe-area-inset-*). On tablets/desktop (>=640px) it's a centered card.
*/
.smmpro-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    height: 100dvh;
    height: 100svh;
    -webkit-text-size-adjust: 100%;
}
.smmpro-modal.smmpro-modal-open { display: flex; align-items: flex-end; }
.smmpro-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    touch-action: none; /* Block ALL gestures on backdrop */
}

.smmpro-modal-container {
    position: relative;
    background: var(--smf-white);
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    animation: smmpro-slide-up 300ms cubic-bezier(.22,1,.36,1);
    touch-action: pan-y; /* Allow vertical scroll, prevent zoom */
}
@keyframes smmpro-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 640px) {
    .smmpro-modal.smmpro-modal-open { align-items: center; justify-content: center; padding: 20px; }
    .smmpro-modal-container {
        max-width: 480px;
        max-height: calc(100dvh - 40px);
        border-radius: 20px;
        box-shadow: 0 8px 40px rgba(0,0,0,.18);
        animation: smmpro-fade-scale 200ms ease;
    }
    @keyframes smmpro-fade-scale { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

.smmpro-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--smf-200);
    flex-shrink: 0;
    /* Keep clear of the notch on iPhone landscape. */
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
.smmpro-modal-title { font-size: 16px; font-weight: 700; color: var(--smf-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smmpro-modal-close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: none; background: var(--smf-100); border-radius: 50%; font-size: 20px; color: var(--smf-500); cursor: pointer;
    flex-shrink: 0; margin-left: 12px;
}
.smmpro-modal-close:hover { background: var(--smf-200); }

.smmpro-modal-body {
    flex: 1 1 auto;
    min-height: 0;           /* critical: allows flex child to actually scroll */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    /* Breathe against the notch on landscape iPhone. */
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    /* Avoid the last item being flush against the footer on tall content. */
    padding-bottom: 20px;
    overscroll-behavior: contain;
}

.smmpro-modal-footer {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--smf-200);
    flex-shrink: 0;
    background: var(--smf-50);
    /* Home indicator safe area on iPhone + notch breathing on landscape. */
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
#smmpro-modal-footer-info {
    font-size: 13px; font-weight: 600; color: var(--smf-500);
    min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.smmpro-modal-confirm {
    padding: 10px 24px; background: var(--smf-black); color: #fff; border: none;
    border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
    flex-shrink: 0; white-space: nowrap;
}
.smmpro-modal-confirm:hover { background: var(--smf-700); }

/* Ultra-narrow phones (iPhone SE first gen, old Androids). */
@media (max-width: 380px) {
    .smmpro-modal-header { padding: 14px 16px; }
    .smmpro-modal-body { padding: 14px 16px 18px; }
    .smmpro-modal-footer { padding: 12px 16px; gap: 8px; }
    .smmpro-modal-confirm { padding: 10px 16px; font-size: 13px; }
    #smmpro-modal-footer-info { font-size: 12px; }
    .smmpro-modal-grid { gap: 4px; }
}

/* Profile inside modal */
.smmpro-modal-profile {
    display: flex; gap: 12px; align-items: center; margin-bottom: 14px;
}
.smmpro-modal-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.smmpro-modal-qty-info { font-size: 13px; color: var(--smf-500); margin-bottom: 14px; padding: 10px 14px; background: var(--smf-50); border-radius: var(--smf-radius-sm); }

/* Post grid inside modal — adaptive columns based on container width.
   Desktop/tablet: 3 cols. Small phones (<380px): 2 cols.
   Uses auto-fill with min 100px so it naturally adapts. */
.smmpro-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
@media (max-width: 380px) {
    .smmpro-modal-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
}
@media (min-width: 640px) {
    .smmpro-modal-grid { gap: 8px; }
}

/* Distributor panel inside the modal — breathes on both sides. */
#smmpro-modal-dist { margin-top: 16px; margin-bottom: 16px; }

/* Load more button — shown at the bottom of the modal for paginated platforms.
   Wrapper holds the vertical rhythm so neither the grid above nor the
   distributor (which sits between them) crowds the button. */
#smmpro-modal-load-more-wrap {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--smf-100, #f4f4f5);
}
.smmpro-modal-load-more {
    background: var(--smf-50, #fafafa);
    border: 1px solid var(--smf-200, #e5e5e5);
    color: var(--smf-900, #171717);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.smmpro-modal-load-more:hover { background: var(--smf-100, #f4f4f5); border-color: var(--smf-300, #d4d4d8); }
.smmpro-modal-load-more:disabled { opacity: .6; cursor: wait; }

/* -----------------------------------------------------------------
   Scan-profile loading state
   Skeleton shimmer shown immediately when the user clicks "Scan profile",
   replaced by real content as soon as the API responds. Keeps the layout
   stable so the transition is not jarring.
   ----------------------------------------------------------------- */
.smmpro-skeleton {
    background: linear-gradient(90deg, #f1f1f1 0%, #e4e4e4 50%, #f1f1f1 100%);
    background-size: 200% 100%;
    animation: smmpro-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
@keyframes smmpro-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.smmpro-skeleton-profile { align-items: center; gap: 12px; }
.smmpro-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px; }
.smmpro-skeleton-line { height: 12px; border-radius: 4px; }
.smmpro-skeleton-thumb { cursor: default !important; border: 2px solid transparent !important; }
.smmpro-skeleton-thumb:active { transform: none !important; }
.smmpro-skeleton-thumb-inner { width: 100%; padding-top: 100%; /* square */ }

/* Inline spinner (kept for other uses). */
.smmpro-modal-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--smf-900, #171717);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    animation: smmpro-spin .8s linear infinite;
}
@keyframes smmpro-spin { to { transform: rotate(360deg); } }

/* Scan progress bar */
.smmpro-progress-wrap { width: 100%; }
.smmpro-progress-bar {
    width: 100%; height: 6px; border-radius: 3px;
    background: var(--smf-200, #e5e5e5); overflow: hidden;
}
.smmpro-progress-fill {
    height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, #8b5cf6, #6d28d9);
    transition: width .3s ease-out;
}
.smmpro-progress-text {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px; font-size: 11px; color: var(--smf-500, #737373);
}
#smmpro-progress-pct { font-weight: 700; color: var(--smf-900, #171717); font-variant-numeric: tabular-nums; }

.smmpro-modal-thumb {
    position: relative; border: 2px solid var(--smf-200); border-radius: 8px; overflow: hidden;
    cursor: pointer; transition: border-color var(--smf-transition), transform var(--smf-transition);
}
.smmpro-modal-thumb:active { transform: scale(.97); }
.smmpro-modal-thumb.smmpro-modal-selected { border-color: var(--smf-black); }

.smmpro-modal-thumb-img { aspect-ratio: 1; background: var(--smf-100); position: relative; overflow: hidden; }
.smmpro-modal-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smmpro-modal-play {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,.6); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center;
}

.smmpro-modal-thumb-check {
    position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--smf-300); background: rgba(255,255,255,.8); transition: all var(--smf-transition);
}
.smmpro-modal-selected .smmpro-modal-thumb-check {
    background: var(--smf-black); border-color: var(--smf-black);
}
.smmpro-modal-selected .smmpro-modal-thumb-check::after {
    content: '✓'; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}

.smmpro-modal-thumb-stats { display: flex; gap: 6px; padding: 4px 6px; font-size: 10px; color: var(--smf-500); background: var(--smf-50); }

/* Modal toast */
.smmpro-modal-toast {
    background: var(--smf-red-bg, #fef2f2);
    color: var(--smf-red, #dc2626);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 250ms ease;
}
.smmpro-modal-toast.smmpro-modal-toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* Distributor inside modal */
.smmpro-dist-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--smf-100);
}
.smmpro-dist-row:last-of-type { border-bottom: none; }
.smmpro-dist-row-img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.smmpro-dist-range {
    flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
    background: var(--smf-200); border-radius: 3px; outline: none;
}
.smmpro-dist-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--smf-black); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.smmpro-dist-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--smf-black); cursor: pointer; border: 2px solid #fff; }
.smmpro-dist-num { width: 60px; padding: 4px 6px; text-align: center; font-size: 13px; font-weight: 600; border: 1px solid var(--smf-200); border-radius: 6px; }

.smmpro-dist-total { text-align: center; padding: 10px 0; font-size: 14px; font-weight: 700; }
.smmpro-dist-ok { color: var(--smf-green); }
.smmpro-dist-under { color: var(--smf-blue); }
.smmpro-dist-over { color: var(--smf-red); }

/* === Custom Comments button + modal === */
.smmpro-comments-open-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 12px 20px; background: var(--smf-white, #fff); color: var(--smf-900, #171717);
    border: 1px dashed var(--smf-300, #d4d4d4); border-radius: var(--smf-radius-sm, 8px);
    font-size: 14px; font-weight: 500; cursor: pointer; transition: all 150ms;
}
.smmpro-comments-open-btn:hover { border-color: var(--smf-black, #0a0a0a); border-style: solid; }

.smmpro-comments-editor {
    width: 100%;
    /* Never taller than the visible viewport minus the modal chrome. */
    min-height: min(200px, 35dvh);
    max-height: 50dvh;
    padding: 14px;
    border: 1px solid var(--smf-200, #e5e5e5);
    border-radius: 10px;
    font-family: monospace;
    font-size: 16px;        /* prevent iOS auto-zoom on focus */
    line-height: 1.8;
    color: var(--smf-900, #171717);
    resize: vertical;
    box-sizing: border-box;
}
.smmpro-comments-editor:focus { outline: none; border-color: var(--smf-black, #0a0a0a); box-shadow: 0 0 0 3px var(--smf-100, #f5f5f5); }

.smmpro-comments-modal-hint {
    padding: 10px 14px; background: var(--smf-50, #fafafa); border-radius: 8px;
    font-size: 13px; color: var(--smf-500, #737373); margin-bottom: 12px; text-align: center;
}
.smmpro-comments-modal-hint strong { color: var(--smf-900, #171717); }

.smmpro-comments-modal-counter {
    margin-top: 8px; font-size: 13px; color: var(--smf-500, #737373); text-align: center;
}
#smmpro-cm-count { font-weight: 700; font-size: 16px; }
#smmpro-cm-limit { font-weight: 600; color: var(--smf-900, #171717); }

/* === Selection summary (product page, after modal) === */
#smmpro-selection-summary { margin: 16px 0; }

.smmpro-summary {
    border: 1px solid var(--smf-200, #e5e5e5);
    border-radius: 12px;
    overflow: hidden;
    background: var(--smf-white, #fff);
}

.smmpro-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--smf-green-bg, #f0fdf4);
    border-bottom: 1px solid var(--smf-200, #e5e5e5);
}

.smmpro-summary-check {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--smf-green, #16a34a);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.smmpro-summary-header strong { font-size: 14px; color: var(--smf-900, #171717); }
.smmpro-summary-subtitle { font-size: 12px; color: var(--smf-500, #737373); margin-top: 1px; }

.smmpro-summary-edit {
    margin-left: auto;
    padding: 5px 14px;
    background: var(--smf-white, #fff);
    border: 1px solid var(--smf-200, #e5e5e5);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--smf-700, #404040);
    cursor: pointer;
    transition: all 150ms;
}
.smmpro-summary-edit:hover { border-color: var(--smf-black, #0a0a0a); color: var(--smf-900, #171717); }

.smmpro-summary-posts { padding: 10px 16px; }

.smmpro-summary-post {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--smf-100, #f5f5f5);
}
.smmpro-summary-post:last-child { border-bottom: none; }

.smmpro-summary-post-img {
    width: 36px; height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--smf-100, #f5f5f5);
}
.smmpro-summary-post-placeholder { background: var(--smf-200, #e5e5e5); }

.smmpro-summary-post-info { flex: 1; display: flex; justify-content: space-between; align-items: center; min-width: 0; }
.smmpro-summary-post-url { font-size: 12px; color: var(--smf-400, #a3a3a3); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smmpro-summary-post-qty { font-size: 14px; color: var(--smf-900, #171717); flex-shrink: 0; margin-left: 8px; }

.smmpro-summary-cta {
    padding: 10px 16px;
    background: var(--smf-50, #fafafa);
    border-top: 1px solid var(--smf-200, #e5e5e5);
    font-size: 12px;
    color: var(--smf-500, #737373);
    text-align: center;
}

/* Toast */
.smmpro-success-toast {
    position: fixed; bottom: 24px; right: 24px; background: var(--smf-black); color: #fff;
    padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 99999;
    opacity: 0; transform: translateY(12px); transition: all 300ms ease; pointer-events: none;
}
.smmpro-success-toast.smmpro-toast-show { opacity: 1; transform: translateY(0); }

/* Skeleton */
@keyframes smmpro-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.smmpro-skel { background: linear-gradient(90deg, var(--smf-200) 25%, var(--smf-100) 50%, var(--smf-200) 75%); background-size: 400px 100%; animation: smmpro-shimmer 1.5s infinite; border-radius: 4px; }

/* === Tracking page — lookup form === */
.smmpro-tracking { max-width: 540px; margin: 40px auto; padding: 0 16px; }

/* Hero */
.smmpro-track-hero {
    text-align: center;
    margin-bottom: 32px;
}
.smmpro-track-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--smf-900);
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: rotate(-6deg);
    transition: transform 300ms cubic-bezier(.4,0,.2,1);
}
.smmpro-track-hero-icon:hover { transform: rotate(0deg) scale(1.05); }
.smmpro-track-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--smf-900);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.smmpro-track-hero-subtitle {
    color: var(--smf-500);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 440px;
}

/* Card */
.smmpro-track-card {
    background: var(--smf-white, #fff);
    border: 1px solid var(--smf-200);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.04);
}
.smmpro-track-card .smmpro-field { margin-bottom: 18px; }
.smmpro-track-card .smmpro-field:last-of-type { margin-bottom: 20px; }
.smmpro-track-card label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--smf-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* Input with icon */
.smmpro-track-input-wrap {
    position: relative;
}
.smmpro-track-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--smf-400);
    font-size: 16px;
    font-weight: 700;
    pointer-events: none;
}
.smmpro-track-card input[type="text"],
.smmpro-track-card input[type="email"] {
    width: 100%;
    padding: 14px 16px 14px 40px;
    font-size: 15px;
    border: 1px solid var(--smf-200);
    border-radius: 12px;
    background: var(--smf-50);
    color: var(--smf-900);
    transition: all 200ms;
    box-sizing: border-box;
}
.smmpro-track-card input:focus {
    outline: none;
    border-color: var(--smf-900);
    background: #fff;
    box-shadow: 0 0 0 4px var(--smf-100);
}

/* Button */
.smmpro-track-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--smf-900);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.smmpro-track-btn:hover {
    background: var(--smf-700);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.smmpro-track-btn:active { transform: translateY(0); }
.smmpro-track-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* Error */
.smmpro-track-error {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--smf-red-bg);
    color: var(--smf-red);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: 1px solid rgba(220,38,38,.15);
}

/* Features */
.smmpro-track-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.smmpro-track-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--smf-500);
}
.smmpro-track-feature-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--smf-green);
}

@media (max-width: 520px) {
    .smmpro-tracking { margin: 24px auto; }
    .smmpro-track-hero-title { font-size: 26px; }
    .smmpro-track-hero-icon { width: 60px; height: 60px; border-radius: 16px; }
    .smmpro-track-card { padding: 22px; border-radius: 14px; }
    .smmpro-track-features { gap: 14px; font-size: 11px; }
}

.smmpro-track-order-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; margin-bottom: 16px; border-bottom: 1px solid var(--smf-200); }
.smmpro-track-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--smf-400); font-weight: 600; }
.smmpro-track-value { font-size: 20px; font-weight: 700; color: var(--smf-900); }

.smmpro-track-badge { display: inline-block; padding: 3px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.smmpro-track-badge-active { background: var(--smf-blue-bg); color: var(--smf-blue); }
.smmpro-track-badge-complete { background: var(--smf-green-bg); color: var(--smf-green); }
.smmpro-track-badge-partial { background: #fffbeb; color: #d97706; }
.smmpro-track-badge-error { background: var(--smf-red-bg); color: var(--smf-red); }

.smmpro-track-item { background: var(--smf-50); border: 1px solid var(--smf-200); border-radius: var(--smf-radius); padding: 16px; margin-bottom: 12px; transition: all 300ms; }
.smmpro-track-item.smmpro-track-updated { border-color: var(--smf-green); box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.smmpro-track-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.smmpro-track-item-service { font-size: 14px; font-weight: 600; }
.smmpro-track-item-link { font-size: 12px; color: var(--smf-400); font-family: monospace; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.smmpro-track-progress { height: 8px; background: var(--smf-200); border-radius: 4px; overflow: hidden; }
.smmpro-track-progress-bar { height: 100%; border-radius: 4px; transition: width 600ms cubic-bezier(.4,0,.2,1); }
.smmpro-track-bar-active { background: var(--smf-blue); }
.smmpro-track-bar-complete { background: var(--smf-green); }
.smmpro-track-bar-partial { background: #d97706; }
.smmpro-track-bar-error { background: var(--smf-red); }
.smmpro-track-progress-info { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; }
.smmpro-track-progress-info span:first-child { font-weight: 700; }
.smmpro-track-delivered { color: var(--smf-500); }

.smmpro-track-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.smmpro-track-item-date { font-size: 11px; color: var(--smf-400); }
.smmpro-track-refresh { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; background: #fff; border: 1px solid var(--smf-200); border-radius: 6px; font-size: 12px; cursor: pointer; }
.smmpro-track-refresh:hover { border-color: var(--smf-300); }
.smmpro-track-live-dot { color: var(--smf-green); font-size: 8px; margin-left: 6px; animation: smmpro-pulse 1s infinite; }
@keyframes smmpro-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.smmpro-spin { display: inline-block; animation: smmpro-rotate .7s linear infinite; }
@keyframes smmpro-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.smmpro-track-back { display: block; width: 100%; padding: 10px; margin-top: 16px; background: none; border: 1px solid var(--smf-200); border-radius: var(--smf-radius-sm); color: var(--smf-500); font-size: 13px; cursor: pointer; text-align: center; }

/* ======================================================================
   MOBILE-NATIVE EXPERIENCE
   All inputs 16px (prevents iOS auto-zoom), 44px min touch targets,
   smooth momentum scrolling, safe-area awareness, active/hover states.
   ====================================================================== */

/* --- Global: prevent iOS zoom on focus --- */
.smmpro-field input[type="text"],
.smmpro-field input[type="url"],
.smmpro-field input[type="number"],
.smmpro-field input[type="email"],
.smmpro-field textarea,
.smmpro-comments-editor,
.smmpro-track-card input[type="text"],
.smmpro-track-card input[type="email"],
.smmpro-dist-num {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* --- Touch targets: minimum 44×44 CSS px on all interactive elements --- */
.smmpro-scan-btn,
.smmpro-modal-confirm,
.smmpro-modal-close,
.smmpro-track-btn,
.smmpro-track-back,
.smmpro-track-refresh,
.smmpro-summary-edit,
.smmpro-comments-open-btn,
.smmpro-modal-load-more {
    min-height: 44px;
    min-width: 44px;
}

/* Larger close button for fat fingers */
.smmpro-modal-close {
    width: 36px;
    height: 36px;
    font-size: 22px;
}

/* --- Range slider: larger thumb for mobile --- */
.smmpro-dist-range {
    height: 8px;
    touch-action: pan-x;
}
.smmpro-dist-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
}
.smmpro-dist-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
}
.smmpro-dist-range::-webkit-slider-runnable-track {
    height: 8px;
}

/* --- Active/press states for tactile feedback --- */
.smmpro-scan-btn:active,
.smmpro-modal-confirm:active,
.smmpro-track-btn:active,
.smmpro-comments-open-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}
.smmpro-modal-close:active {
    transform: scale(0.9);
    background: var(--smf-300);
}
.smmpro-summary-edit:active {
    transform: scale(0.95);
}
.smmpro-track-refresh:active {
    transform: scale(0.95);
    background: var(--smf-100);
}
.smmpro-modal-load-more:active {
    transform: scale(0.97);
}

/* --- Post grid thumbs: easier to tap, active state --- */
.smmpro-modal-thumb {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.smmpro-modal-thumb:active {
    transform: scale(0.95);
}

/* --- Momentum scroll in modal body --- */
.smmpro-modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

/* --- Prevent body scroll when modal is open --- */
body.smmpro-modal-lock {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    left: 0;
    /* top is set dynamically by JS to -scrollY */
}

/* --- ALL inputs inside modals must be >= 16px to prevent iOS auto-zoom --- */
.smmpro-modal input,
.smmpro-modal select,
.smmpro-modal textarea,
.smmpro-modal .smmpro-dist-num {
    font-size: max(16px, 1em) !important;
}

/* --- Smooth transitions on all interactive elements --- */
.smmpro-scan-btn,
.smmpro-modal-confirm,
.smmpro-modal-close,
.smmpro-track-btn,
.smmpro-track-refresh,
.smmpro-summary-edit,
.smmpro-comments-open-btn,
.smmpro-modal-load-more,
.smmpro-track-back {
    transition: all var(--smf-transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Distributor row: taller for touch --- */
.smmpro-dist-row {
    min-height: 52px;
    padding: 10px 0;
}
.smmpro-dist-num {
    width: 64px;
    min-height: 40px;
    padding: 8px 6px;
    border-radius: 8px;
}
.smmpro-dist-row-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

/* --- Tracking: wider touch areas --- */
.smmpro-track-refresh {
    padding: 8px 16px;
    min-height: 36px;
    border-radius: 8px;
}
.smmpro-track-back {
    padding: 14px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
}

/* --- Toast: positioned for thumb reach on mobile --- */
@media (max-width: 640px) {
    .smmpro-success-toast {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: 16px;
        left: 16px;
        text-align: center;
        border-radius: 14px;
    }
}

/* --- Selection summary: better spacing on mobile --- */
@media (max-width: 640px) {
    .smmpro-summary-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }
    .smmpro-summary-edit {
        width: 100%;
        text-align: center;
        padding: 10px;
        margin-left: 0;
    }
    .smmpro-summary-post {
        padding: 8px 0;
    }
    .smmpro-summary-post-img {
        width: 40px;
        height: 40px;
    }
}

/* --- Preview card: stack on very small screens --- */
@media (max-width: 380px) {
    .smmpro-preview-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .smmpro-preview-thumb {
        width: 64px;
        height: 64px;
        border-radius: 50%;
    }
    .smmpro-preview-stats {
        justify-content: center;
    }
}

/* --- Tracking page: mobile polish --- */
@media (max-width: 520px) {
    .smmpro-track-order-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .smmpro-track-item {
        padding: 14px;
        border-radius: 12px;
    }
    .smmpro-track-item-header {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .smmpro-track-item-footer {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .smmpro-track-refresh {
        width: 100%;
        justify-content: center;
    }
    .smmpro-track-value {
        font-size: 18px;
    }
}

/* --- Modal profile: centered avatar on small screens --- */
@media (max-width: 380px) {
    .smmpro-modal-profile {
        flex-direction: column;
        text-align: center;
    }
    .smmpro-modal-avatar {
        margin: 0 auto;
    }
}

/* --- Inputs: selection color for better UX --- */
.smmpro-field input::selection,
.smmpro-field textarea::selection {
    background: var(--smf-200);
    color: var(--smf-900);
}

/* --- Disabled state consistent everywhere --- */
.smmpro-scan-btn:disabled,
.smmpro-modal-confirm:disabled,
.smmpro-track-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* --- Dark mode support (respects WooCommerce themes) --- */
@media (prefers-color-scheme: dark) {
    :root {
        --smf-black: #fafafa;
        --smf-900: #f5f5f5;
        --smf-700: #d4d4d4;
        --smf-500: #a3a3a3;
        --smf-400: #737373;
        --smf-300: #404040;
        --smf-200: #2a2a2a;
        --smf-100: #1f1f1f;
        --smf-50: #171717;
        --smf-white: #0a0a0a;
    }
}