@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/EBGaramond-Variable.ttf") format("truetype");
}

@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/EBGaramond-Italic-Variable.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/Inter-Variable.ttf") format("truetype");
}

h1:focus {
    outline: none;
}

:root {
    color-scheme: dark;
    --pn-nero-profundo: #0d0c0b;
    --pn-oro-nero: #c6a15b;
    --pn-oro-profundo: #8a6729;
    --pn-avorio: #f5f0e8;
    --pn-crema-calda: #e6d4bd;
    --pn-pomodoro: #a94432;
    --pn-basilico: #3f5d42;
    --pn-piedra: #90897f;
    --pn-nero: var(--pn-nero-profundo);
    --pn-gold: var(--pn-oro-nero);
    --pn-gold-deep: var(--pn-oro-profundo);
    --pn-ivory: var(--pn-avorio);
    --pn-cream: var(--pn-crema-calda);
    --pn-stone: var(--pn-piedra);
    --pn-font-display: "EB Garamond", Georgia, serif;
    --pn-font-ui: "Inter", "Segoe UI", Arial, sans-serif;
    --pn-number-font: var(--pn-font-ui);
    --pn-radius-sm: 0.75rem;
    --pn-radius-md: 1rem;
    --pn-radius-lg: 1.5rem;
    --pn-shadow-elevated: 0 1.25rem 3rem rgba(13, 12, 11, 0.34);
    --bs-body-font-family: var(--pn-font-ui);
    --bs-body-bg: var(--pn-nero);
    --bs-body-color: var(--pn-ivory);
    --bs-primary: var(--pn-gold);
    --bs-primary-rgb: 198, 161, 91;
    --bs-danger: var(--pn-pomodoro);
    --bs-danger-rgb: 169, 68, 50;
    --bs-success: var(--pn-basilico);
    --bs-success-rgb: 63, 93, 66;
}

html {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    max-width: 100%;
    background: var(--pn-nero);
    color: var(--pn-ivory);
    font-family: var(--pn-font-ui);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100svh;
}

html:has(.pn-mobile-shell),
body:has(.pn-mobile-shell) {
    scrollbar-width: none;
}

html:has(.pn-mobile-shell)::-webkit-scrollbar,
body:has(.pn-mobile-shell)::-webkit-scrollbar {
    height: 0;
    width: 0;
}

html.checkout-open,
body.checkout-open,
html.modal-scroll-lock,
body.modal-scroll-lock,
html:has(.pn-order-modal-backdrop),
body:has(.pn-order-modal-backdrop) {
    height: 100%;
    overscroll-behavior: none;
    overflow: hidden;
}

html.modal-scroll-lock,
body.modal-scroll-lock {
    scrollbar-width: none;
}

html.modal-scroll-lock::-webkit-scrollbar,
body.modal-scroll-lock::-webkit-scrollbar {
    height: 0;
    width: 0;
}

body.checkout-open {
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    width: 100%;
}

body.checkout-open #app,
body.checkout-open .pn-mobile-shell,
body.checkout-open .pn-mobile-canvas,
body.checkout-open .pn-page {
    max-height: 100dvh;
    overflow: hidden !important;
}

#app {
    min-width: 0;
    overflow-x: hidden;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.pn-display,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--pn-font-display);
}

.pn-admin-page :is(a, button, input, select, textarea, summary):focus-visible,
.pn-orders-page :is(a, button, input, select, textarea, summary):focus-visible,
.pn-visitors-page :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--pn-gold) !important;
    outline-offset: 2px;
}

:where(
    .pn-header-cart__badge,
    .pn-hero__time,
    .pn-card__price,
    .pn-card__price *,
    .pn-card__time,
    .pn-card__time *,
    .pn-inline-number,
    .pn-qty__value,
    .pn-beverage-item__price,
    .pn-beverage-item__price *,
    .pn-footer__hours-time,
    .pn-footer__contact-number,
    .pn-floating-cart__total,
    .pn-cart-summary__count,
    .pn-cart-summary__amount-main,
    .pn-cart-item__meta,
    .pn-cart-item__meta *,
    .pn-checkout-confirm__meta,
    .pn-checkout-confirm__meta *,
    .pn-payment-option__meta,
    .pn-delivery-estimate__time,
    .pn-checkout-total,
    .pn-checkout-total *,
    .pn-checkout-summary-line--total,
    .pn-order-number,
    .pn-confirm-item__qty,
    .pn-confirm-item__price,
    .pn-tracking-order-card__number,
    .pn-tracking-order-card__date,
    .pn-tracking-order-card__summary,
    .pn-tracking-order-card__summary *,
    .pn-tracking-pill__eta,
    .pn-tracking-pill__multi-count,
    .pn-tracking-info__number,
    .pn-tracking-summary-item__qty,
    .pn-tracking-summary-item__price,
    .pn-tracking-summary__total,
    .pn-tracking-summary__total *,
    .pn-tracking-product-edit__qty,
    .pn-tracking-product-edit__qty *,
    .pn-admin-stats strong,
    .pn-admin-order__number,
    .pn-admin-order__date,
    .pn-admin-order__meta,
    .pn-admin-order__meta *,
    .pn-admin-order__total,
    .pn-admin-order__total *,
    .pn-visitors-stats strong,
    .pn-visitors-table td,
    .pn-visitors-table small,
    .pn-visitors-table__mono,
    .pn-visitors-table__count,
    .pn-intake-note,
    .pn-intake-note *,
    .pn-auth-field input[inputmode="numeric"],
    input[type="tel"],
    input[inputmode="numeric"],
    input[inputmode="decimal"]
) {
    font-family: var(--pn-number-font) !important;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.01em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--pn-basilico);
}

.invalid {
    outline: 1px solid var(--pn-pomodoro);
}

.validation-message {
    color: var(--pn-pomodoro);
}

.blazor-error-boundary {
    background: url("/Images/Site/Brand/PastaNero_Favicon_P.png") no-repeat 1rem center/1.8rem, var(--pn-pomodoro);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--pn-ivory);
}

    .blazor-error-boundary::after {
        content: "Algo salió mal. Recarga la página para continuar."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--pn-stone);
}

.pn-account-shell {
    --bs-border-color: rgba(144, 137, 127, 0.42);
    --bs-secondary-color: var(--pn-stone);
    color: var(--pn-ivory);
    font-family: var(--pn-font-ui);
}

.pn-account-shell.container {
    max-width: 62rem;
}

.pn-account-shell :is(h1, h2, h3, h4, h5, h6) {
    color: var(--pn-ivory);
    font-family: var(--pn-font-display);
}

.pn-account-shell a,
.pn-account-shell .btn-link {
    color: var(--pn-gold);
}

.pn-account-shell a:hover,
.pn-account-shell a:focus-visible,
.pn-account-shell .btn-link:hover,
.pn-account-shell .btn-link:focus-visible {
    color: var(--pn-cream);
}

.pn-account-shell :is(.form-control, .form-select) {
    background-color: rgba(13, 12, 11, 0.82);
    border-color: rgba(144, 137, 127, 0.58);
    color: var(--pn-ivory);
}

.pn-account-shell :is(.form-control, .form-select)::placeholder {
    color: var(--pn-stone);
    opacity: 1;
}

.pn-account-shell :is(.form-control, .form-select):focus {
    background-color: var(--pn-nero);
    border-color: var(--pn-gold);
    box-shadow: 0 0 0 0.2rem rgba(198, 161, 91, 0.2);
    color: var(--pn-ivory);
}

.pn-account-shell .form-check-input {
    background-color: var(--pn-nero);
    border-color: var(--pn-stone);
}

.pn-account-shell .form-check-input:checked {
    background-color: var(--pn-gold);
    border-color: var(--pn-gold);
}

.pn-account-shell .btn-primary,
.pn-account-shell .nav-pills .nav-link.active {
    background: var(--pn-gold);
    border-color: var(--pn-gold);
    color: var(--pn-nero);
}

.pn-account-shell .btn-primary:hover,
.pn-account-shell .btn-primary:focus-visible,
.pn-account-shell .nav-pills .nav-link.active:hover,
.pn-account-shell .nav-pills .nav-link.active:focus-visible {
    background: var(--pn-cream);
    border-color: var(--pn-cream);
    color: var(--pn-nero);
}

.pn-account-shell .btn-danger {
    background: var(--pn-pomodoro);
    border-color: var(--pn-pomodoro);
    color: var(--pn-ivory);
}

.pn-account-shell :is(.text-danger, .validation-message) {
    color: var(--pn-pomodoro) !important;
}

.pn-account-shell .alert-danger {
    background: rgba(169, 68, 50, 0.2);
    border-color: var(--pn-pomodoro);
    color: var(--pn-ivory);
}

.pn-account-shell .alert-success {
    background: rgba(63, 93, 66, 0.3);
    border-color: var(--pn-basilico);
    color: var(--pn-ivory);
}

.pn-account-shell .alert-warning {
    background: rgba(138, 103, 41, 0.28);
    border-color: var(--pn-gold-deep);
    color: var(--pn-ivory);
}

.pn-account-shell .alert-info {
    background: rgba(144, 137, 127, 0.18);
    border-color: var(--pn-stone);
    color: var(--pn-cream);
}

.pn-account-shell .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(144, 137, 127, 0.32);
    --bs-table-color: var(--pn-ivory);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}