/* Prazeria — componentes */

/* === Botões === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 14px 24px;
    border-radius: var(--radius-button);
    font-weight: 500;
    font-size: var(--fs-base);
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
    background: var(--accent);
    color: var(--text);
}
.btn--primary:hover { background: var(--accent-strong); }

.btn--secondary {
    background: var(--text);
    color: var(--bg);
}
.btn--secondary:hover { background: var(--accent-2); }

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--text); background: rgba(244,239,234,0.04); }

.btn--link {
    background: transparent;
    color: var(--text);
    padding: 0;
    border-radius: 0;
}
.btn--link::after {
    content: "";
    display: block;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease);
}
.btn--link:hover::after { transform: scaleX(1); }

.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
}
.btn--icon:hover { background: var(--surface); }

.btn--lg { padding: 18px 32px; font-size: var(--fs-md); }
.btn--sm { padding: 10px 16px; font-size: var(--fs-sm); }

/* === Inputs === */
.input,
.textarea,
.select {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-input);
    font-size: var(--fs-base);
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.input:focus,
.textarea:focus,
.select:focus { outline: 2px solid var(--accent-2); outline-offset: 0; border-color: transparent; }
.input::placeholder { color: var(--muted); }
.textarea { resize: vertical; min-height: 120px; }

.label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

.field { margin-bottom: var(--sp-4); }
.field-error { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* === Badges === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-soft);
}
.badge--accent { background: var(--accent); color: var(--text); }
.badge--accent-2 { background: var(--accent-2); color: var(--bg); }
.badge--success { background: var(--success); color: var(--text); }
.badge--danger  { background: var(--danger);  color: var(--text); }

/* === Cards === */
.card {
    background: var(--surface);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* === Card de produto === */
.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-base) var(--ease);
}
.product-card:hover { transform: translateY(-3px); }
.product-card:hover .product-card__media { background: var(--surface-2); }
.product-card__media {
    aspect-ratio: 4 / 5;
    background: var(--surface);
    border-radius: var(--radius-image);
    overflow: hidden;
    position: relative;
    transition: background var(--t-base) var(--ease);
}
.product-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badges {
    position: absolute;
    top: var(--sp-3); left: var(--sp-3);
    display: flex; gap: 6px;
}
.product-card__brand {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
}
.product-card__name {
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
}
.product-card__price-row {
    display: flex; align-items: baseline; gap: var(--sp-2);
    margin-top: auto;
}
.product-card__price {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}
.product-card__price--was {
    font-size: var(--fs-sm);
    color: var(--muted);
    text-decoration: line-through;
}
.product-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.05em;
}

/* === Breadcrumbs === */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--muted);
}
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); color: var(--line-strong); }

/* === Paginação === */
.pagination {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: var(--sp-7) 0;
}
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-button);
    color: var(--text-soft);
    text-decoration: none;
    transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.pagination a:hover { border-color: var(--text); color: var(--text); }
.pagination .is-current { background: var(--text); color: var(--bg); border-color: var(--text); }

/* === Alerts (flash messages) === */
.alert {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-button);
    display: flex; gap: var(--sp-3); align-items: flex-start;
    margin-bottom: var(--sp-4);
    border: 1px solid var(--line-strong);
}
.alert--success { background: rgba(42,157,143,0.12); border-color: rgba(42,157,143,0.4); }
.alert--error   { background: rgba(230,57,70,0.12); border-color: rgba(230,57,70,0.4); }
.alert--warning { background: rgba(244,162,97,0.10); border-color: rgba(244,162,97,0.4); }
.alert--info    { background: rgba(233,196,106,0.08); border-color: rgba(233,196,106,0.4); }

/* === Modal === */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(14, 11, 15, 0.7);
    backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}
.modal-backdrop[open], .modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.modal {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    padding: var(--sp-6);
    max-width: 520px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

/* === Drawer (mobile menu, cart) === */
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(14,11,15,0.6);
    z-index: var(--z-drawer);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--bg);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform var(--t-base) var(--ease);
    z-index: calc(var(--z-drawer) + 1);
    overflow-y: auto;
    padding: var(--sp-5);
}
.drawer.is-open { transform: translateX(0); }
.drawer.is-open + .drawer-backdrop,
.drawer-backdrop.is-open {
    opacity: 1; pointer-events: auto;
}

/* === Icon utility === */
.icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }