/* ============================================
   ALVI - Base Styles v2
   Premium E-Commerce Foundation
   Reset, Typography, Buttons, Forms, Cards,
   Tables, Badges, Pagination, Tabs, Utilities
   ============================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: var(--text-base);
    color: var(--gray-700);
    background: var(--gray-50);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
a { color: var(--gold-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    color: var(--gray-900);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

/* ── Layout ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.main-content { padding-top: var(--header-height); min-height: calc(100vh - 60px); }
.app-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { padding: var(--space-8) 0; }

.page-header { margin-bottom: var(--space-8); }
.page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, var(--text-3xl));
    margin-bottom: var(--space-1);
}
.page-header p { color: var(--gray-500); font-size: var(--text-sm); }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-slow) var(--ease);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.01em;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary {
    background: var(--gold);
    color: var(--dark);
    border-color: var(--gold);
}
.btn-primary:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    box-shadow: var(--shadow-gold);
}

.btn-dark {
    background: var(--dark);
    color: var(--gold-light);
    border-color: var(--dark-600);
}
.btn-dark:hover { background: var(--dark-700); color: var(--gold); }

.btn-outline {
    background: transparent; color: var(--gray-600);
    border-color: var(--gray-300);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-50); }

.btn-danger { background: var(--danger); color: var(--white); border-color: var(--danger); }
.btn-danger:hover { background: #DC2626; box-shadow: 0 4px 12px rgba(239,68,68,.25); }
.btn-success { background: var(--success); color: var(--white); border-color: var(--success); }
.btn-success:hover { background: #16A34A; box-shadow: 0 4px 12px rgba(34,197,94,.25); }
.btn-warning { background: var(--warning); color: var(--white); border-color: var(--warning); }
.btn-warning:hover { background: #D97706; box-shadow: 0 4px 12px rgba(245,158,11,.25); }
.btn-ghost { background: transparent; color: var(--gray-500); border-color: transparent; }
.btn-ghost:hover { color: var(--gray-700); background: var(--gray-100); }

.btn-sm { padding: 6px 14px; font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn-lg { padding: 14px 28px; font-size: var(--text-md); border-radius: var(--radius-xl); }
.btn-xl { padding: 18px 36px; font-size: var(--text-lg); border-radius: var(--radius-xl); font-weight: 700; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; }

/* ── Forms ── */
.form-group { margin-bottom: var(--space-5); }
.form-label {
    display: block;
    margin-bottom: var(--space-1-5);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-700);
    letter-spacing: 0.01em;
}
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font);
    color: var(--gray-800);
    background: var(--white);
    transition: all var(--transition);
    outline: none;
}
.form-input:hover { border-color: var(--gray-300); }
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.12); }
.form-input::placeholder { color: var(--gray-400); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.form-hint { font-size: var(--text-xs); color: var(--gray-400); margin-top: var(--space-1); }
textarea.form-input { min-height: 80px; resize: vertical; }
select.form-input { cursor: pointer; }

@media (max-width: 640px) {
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

/* ── Cards ── */
.card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.card:hover { box-shadow: var(--shadow-card-hover); }

/* ── Alerts ── */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm); font-weight: 500;
    margin-bottom: var(--space-4);
    border-left: 3px solid;
}
.alert-danger { background: var(--danger-bg); color: #B91C1C; border-color: var(--danger); }
.alert-success { background: var(--success-bg); color: #15803D; border-color: var(--success); }
.alert-warning { background: var(--warning-bg); color: #92400E; border-color: var(--warning); }
.alert-info { background: var(--info-bg); color: #1D4ED8; border-color: var(--info); }

/* ── Badges ── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1.5;
}
.badge-info { background: var(--info-bg); color: #1D4ED8; }
.badge-success { background: var(--success-bg); color: #15803D; }
.badge-warning { background: var(--warning-bg); color: #92400E; }
.badge-danger { background: var(--danger-bg); color: #B91C1C; }
.badge-primary { background: var(--gold-50); color: var(--gold-700); }
.badge-dark { background: var(--gray-800); color: var(--gold-light); }
.badge-secondary { background: var(--gray-100); color: var(--gray-500); }

/* Status badges */
.status-nova { background: var(--info-bg); color: var(--info); }
.status-prijata { background: var(--gold-50); color: var(--gold-700); }
.status-pripravuje_sa { background: var(--warning-bg); color: var(--warning); }
.status-pripravena, .status-hotova { background: var(--success-bg); color: var(--success); }
.status-vydana, .status-dorucena { background: #E0F2FE; color: #0369A1; }
.status-zrusena { background: var(--danger-bg); color: var(--danger); }

/* ── Tables ── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    background: var(--white);
}
table, .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th {
    background: var(--gray-900); color: var(--gray-300);
    font-weight: 600; font-size: var(--text-xs);
    text-align: left; padding: 12px 16px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
}
td { padding: 14px 16px; border-top: 1px solid var(--gray-100); color: var(--gray-700); }
tr:hover td { background: var(--gray-50); }
th:first-child { border-radius: var(--radius-lg) 0 0 0; }
th:last-child { border-radius: 0 var(--radius-lg) 0 0; }

/* ── Pagination ── */
.pagination { display: flex; justify-content: center; gap: var(--space-1-5); margin-top: var(--space-8); }
.pagination-btn {
    min-width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
    font-weight: 600; font-size: var(--text-sm);
    cursor: pointer; transition: all var(--transition);
    background: var(--white); color: var(--gray-600);
}
.pagination-btn:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-50); }
.pagination-btn.active { background: var(--dark); color: var(--gold); border-color: var(--dark); }
.pagination-btn:disabled { opacity: .4; cursor: not-allowed; }
.pagination-dots { display: flex; align-items: center; padding: 0 var(--space-1); color: var(--gray-400); font-size: var(--text-sm); }

/* ── Utilities ── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--gray-500); }
.text-gold { color: var(--gold); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.hidden { display: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
::selection { background: var(--gold-200); color: var(--dark); }

/* ── Tabs (generic) ── */
.tabs {
    display: flex; gap: var(--space-1);
    background: var(--gray-100); border-radius: var(--radius-xl);
    padding: 4px;
}
.tab {
    flex: 1; padding: 10px 16px; background: none;
    border: none; border-radius: var(--radius-lg);
    font-family: var(--font); font-size: var(--text-sm);
    font-weight: 600; cursor: pointer;
    color: var(--gray-500); transition: all var(--transition);
}
.tab:hover { color: var(--gray-700); }
.tab.active { background: var(--white); color: var(--dark); box-shadow: var(--shadow-sm); }

/* ── Delivery type badge ── */
.order-delivery-type {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-xs); font-weight: 600; color: var(--gray-600);
}

/* ── Profile Section ── */
.profile-page { animation: fadeIn .3s var(--ease); }
.profile-section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
}
.profile-section h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-5);
    color: var(--gray-900);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray-100);
}

/* ── Address list / card ── */
.address-list { display: flex; flex-direction: column; gap: var(--space-3); }
.address-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-xl);
    transition: all .25s var(--ease);
}
.address-card:hover { border-color: rgba(201,168,76,.3); box-shadow: var(--shadow-sm); }
.address-card.hlavna { border-color: var(--gold); background: var(--gold-50); }
.address-card-info { flex: 1; line-height: 1.6; color: var(--gray-700); font-size: var(--text-sm); }
.address-card-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }