/* RTuningoto — Global UI consistency layer
   Loaded after Font Awesome & Poppins via footer or individual pages */

/* ── Smooth interactions: remove aggressive press, add subtle hover ── */
*, *::before, *::after { box-sizing:border-box; }

/* Kill browser tap highlight */
a, button, input[type="button"], input[type="submit"], [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* No hard click jump/scale on any interactive element */
a:active, button:active,
input[type="button"]:active,
input[type="submit"]:active {
    opacity:.9;
    transform:none !important;
}

/* Smooth base transition for common interactive elements */
a            { transition: color .22s ease, opacity .22s ease; }
button       { transition: background .22s ease, opacity .22s ease, box-shadow .22s ease; cursor:pointer; }
input, select, textarea { transition: border-color .22s ease, box-shadow .22s ease; }

/* Remove Firefox button inner focus ring flicker */
button::-moz-focus-inner { border:0; padding:0; }

/* Focus ring — accessible but not ugly */
:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Typography baseline ── */
body {
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:15px;
    line-height:1.6;
    color:#333;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6 { line-height:1.3; font-weight:700; color:#1a1a1a; }
p { color:#555; }

/* ── Buttons — consistent across the site ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:inherit; font-weight:600; font-size:.9rem;
    padding:10px 22px; border-radius:10px; border:none;
    cursor:pointer; text-decoration:none; white-space:nowrap;
    transition: background .25s ease, color .25s ease,
                box-shadow .25s ease, transform .25s ease;
    user-select:none;
}
.btn:hover  { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.btn:active { transform:translateY(0);   box-shadow:none; opacity:.9; }

.btn-primary   { background:#f97316; color:#fff; }
.btn-primary:hover { background:#e86b05; }

.btn-secondary { background:#f0f0f0; color:#555; }
.btn-secondary:hover { background:#e3e3e3; }

.btn-success   { background:#22c55e; color:#fff; }
.btn-success:hover { background:#16a34a; }

.btn-danger    { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }

.btn-sm { padding:6px 14px; font-size:.82rem; border-radius:8px; }
.btn-lg { padding:13px 30px; font-size:1rem; border-radius:12px; }

/* Round pill variant */
.btn-pill { border-radius:50px; }

/* ── Form controls ── */
.form-control {
    width:100%; padding:10px 14px;
    border:1.5px solid #e5e7eb;
    border-radius:10px;
    font-family:inherit; font-size:.9rem; color:#333;
    background:#fff;
    transition:border-color .22s ease, box-shadow .22s ease;
    appearance:none; -webkit-appearance:none;
}
.form-control:focus {
    outline:none;
    border-color:#f97316;
    box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.form-control::placeholder { color:#bbb; }
textarea.form-control { resize:vertical; min-height:80px; }

/* ── Cards ── */
.card {
    background:#fff; border-radius:16px;
    box-shadow:0 2px 12px rgba(0,0,0,.07);
    transition:transform .25s ease, box-shadow .25s ease;
    overflow:hidden;
}
.card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.12); }

/* ── Alerts ── */
.alert {
    display:flex; align-items:flex-start; gap:10px;
    padding:13px 16px; border-radius:10px; margin-bottom:16px;
    font-size:.875rem; line-height:1.5;
}
.alert-success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.alert-danger  { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.alert-warning { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }
.alert-info    { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.alert i { margin-top:2px; flex-shrink:0; }

/* ── Badge ── */
.badge {
    display:inline-flex; align-items:center;
    padding:3px 10px; border-radius:20px;
    font-size:.72rem; font-weight:700; line-height:1;
}
.badge-orange { background:#fff3e0; color:#f97316; }
.badge-green  { background:#f0fdf4; color:#16a34a; }
.badge-red    { background:#fef2f2; color:#b91c1c; }
.badge-gray   { background:#f3f4f6; color:#6b7280; }

/* ── Status badges (used in admin + frontend) ── */
.status-badge {
    display:inline-block; padding:3px 10px; border-radius:20px;
    font-size:.73rem; font-weight:600;
}
.status-pending   { background:#fff7ed; color:#c2410c; }
.status-paid      { background:#f0fdf4; color:#15803d; }
.status-shipped   { background:#eff6ff; color:#1d4ed8; }
.status-delivered { background:#f0fdf4; color:#15803d; }
.status-cancelled { background:#fef2f2; color:#b91c1c; }

/* ── Pagination ── */
.pagination { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.page-btn {
    padding:7px 13px; border-radius:8px;
    background:#fff; color:#555; text-decoration:none;
    font-size:.84rem; font-weight:500;
    border:1.5px solid #e5e7eb;
    transition:background .22s ease, color .22s ease, border-color .22s ease;
    line-height:1;
}
.page-btn:hover         { background:#fff3e0; border-color:#f97316; color:#f97316; }
.page-btn.active        { background:#f97316; color:#fff; border-color:#f97316; }
.page-btn:active        { opacity:.85; transform:none; }

/* ── Image thumbnails ── */
.img-thumb {
    width:48px; height:48px; object-fit:cover;
    border-radius:8px; border:1.5px solid #eee; display:block;
}

/* ── Discount badge ── */
.discount-badge {
    display:inline-flex; align-items:center;
    background:#ef4444; color:#fff;
    font-size:.68rem; font-weight:700;
    padding:2px 7px; border-radius:20px;
}

/* ── Utility ── */
.text-orange { color:#f97316; }
.text-muted  { color:#888; }
.text-center { text-align:center; }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.mt-3 { margin-top:24px; }
.mb-1 { margin-bottom:8px; }
.mb-2 { margin-bottom:16px; }
.mb-3 { margin-bottom:24px; }
.hidden { display:none !important; }

/* ── Responsive helpers ── */
@media (max-width:640px) {
    .hide-sm { display:none !important; }
    .btn { padding:9px 16px; font-size:.85rem; }
}