/* Poshan Foods - shared design-system stylesheet */
/* Note: Tailwind's theme('colors.X') calls only resolve inside inline <style> tags
   processed by the Tailwind CDN JIT engine. Since this file is loaded via <link>,
   every theme() reference has been replaced with its literal hex value from js/config.js. */

body {
    background-color: #fbf9f1; /* colors.background */
    color: #1b1c17; /* colors.on-background / on-surface (same value) */
}

/* Glassy translucent nav bar background used across all pages */
.glass-nav {
    background-color: rgba(251, 249, 241, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Primary / secondary CTA buttons (homepage, brand-video, dashboard pages) */
.btn-primary {
    background: linear-gradient(180deg, #f57c00 0%, #964900 100%); /* primary-container -> primary */
    color: #ffffff; /* on-primary */
    transition: transform 0.2s ease;
}
.btn-primary:active {
    transform: scale(0.98);
}
.btn-secondary {
    border: 2px solid #964900; /* primary */
    color: #964900; /* primary */
    transition: transform 0.2s ease;
}
.btn-secondary:active {
    transform: scale(0.98);
}

/* Subtle film-grain noise overlay used on cards/sections (grain-overlay + texture-overlay variants) */
.grain-overlay,
.texture-overlay {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}

/* Ambient drop shadow used under cards (soft-shadow / ambient-shadow / shadow-ambient variants) */
.soft-shadow,
.ambient-shadow,
.shadow-ambient {
    box-shadow: 0px 10px 30px rgba(93, 64, 55, 0.05);
}

/* Full-bleed grain wash applied to the login/register page body */
.bg-grain {
    position: relative;
}
.bg-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 10;
}

/* Dashboard "premium card" container + inputs (account.html) */
.premium-card {
    background-color: #ffffff; /* surface-container-lowest */
    border: 1px solid #dec1af; /* outline-variant */
    box-shadow: 0px 10px 30px rgba(93, 64, 55, 0.05); /* boxShadow.soft */
    border-radius: 1.5rem; /* borderRadius.2xl */
    padding: 24px; /* spacing.gutter */
    position: relative;
}
.input-field {
    background-color: #eae8e0; /* surface-container-high */
    border: 1px solid transparent;
    border-radius: 0.75rem; /* borderRadius.xl */
}
.input-field:focus {
    border-color: #8b7263; /* outline */
    outline: none;
}
.input-field::placeholder {
    color: #8b7263; /* outline */
    opacity: 0.4;
}

/* Unused-but-preserved gradient utility from the products page */
.button-primary-gradient {
    background: linear-gradient(180deg, #f57c00 0%, #e65100 100%);
}

/* ---------------------------------------------------------------- */
/* Hero carousel (homepage) */
/* ---------------------------------------------------------------- */
.carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}
.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}
.carousel-dot {
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.carousel-dot.active {
    transform: scale(1.2);
}

/* ---------------------------------------------------------------- */
/* Horizontal product sliders (homepage collection strips)          */
/* ---------------------------------------------------------------- */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------------------------------- */
/* Dropdown selects (admin/vendor forms + storefront filters).      */
/* .form-select is the plain-<select> fallback appearance (used if  */
/* JS fails to load). form-select.js progressively enhances every   */
/* .form-select into a fully custom trigger + option list (below)   */
/* so BOTH the closed control and the open option list are rounded  */
/* and themed - a real native <select> popup can never be restyled. */
/* ---------------------------------------------------------------- */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fbf9f1; /* surface */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23574235' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
    border: 1px solid #dec1af; /* outline-variant */
    border-radius: 1rem; /* rounded-2xl */
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    color: #1b1c17; /* on-surface */
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-select:hover {
    border-color: #964900; /* primary */
}
.form-select:focus {
    outline: none;
    border-color: #964900;
    box-shadow: 0 0 0 3px rgba(150, 73, 0, 0.15);
}
.form-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Compact variant for inline/secondary selects (e.g. the unit-equivalence row) */
.form-select-sm {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    background-size: 0.85rem;
    background-position: right 0.65rem center;
}

/* Once enhanced, the real <select> is kept (for form submission) but
   visually hidden and pulled out of tab order in favour of the button below. */
.form-select-wrap {
    position: relative;
    display: inline-block;
}
.form-select-wrap select.form-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.form-select-trigger {
    width: 100%;
    text-align: left;
    background-color: #fbf9f1; /* surface */
    border: 1px solid #dec1af; /* outline-variant */
    border-radius: 1rem; /* rounded-2xl, matches .form-select */
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    font-family: inherit;
    font-size: inherit;
    color: #1b1c17; /* on-surface */
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-select-trigger::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid #574235; /* on-surface-variant */
    border-bottom: 2px solid #574235;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s ease;
    pointer-events: none;
}
.form-select-trigger.is-open::after {
    transform: translateY(-30%) rotate(225deg);
}
.form-select-trigger:hover {
    border-color: #964900; /* primary */
}
.form-select-trigger.is-open,
.form-select-trigger:focus-visible {
    outline: none;
    border-color: #964900;
    box-shadow: 0 0 0 3px rgba(150, 73, 0, 0.15);
}
.form-select-trigger.is-placeholder {
    color: #8b7263; /* outline */
}
.form-select-trigger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.form-select-trigger-sm {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.75rem; /* matches .form-select-sm */
}
.form-select-trigger-sm::after {
    right: 0.75rem;
    width: 0.45rem;
    height: 0.45rem;
}

/* The custom, rounded option list (this is the part a native <select>
   popup can never be styled to match - font, radius, spacing, colors). */
.form-select-list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    background-color: #ffffff; /* surface-container-lowest */
    border: 1px solid #dec1af; /* outline-variant */
    border-radius: 1.25rem; /* rounded-3xl, matches app cards */
    box-shadow: 0px 10px 30px rgba(93, 64, 55, 0.15);
    padding: 0.375rem;
    margin: 0;
    list-style: none;
}
.form-select-option {
    padding: 0.6rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    color: #1b1c17; /* on-surface */
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.1s ease;
}
.form-select-option.is-active {
    background-color: #f0eee6; /* surface-container */
}
.form-select-option.is-selected {
    background-color: #964900; /* primary */
    color: #ffffff;
}
.form-select-option.is-placeholder {
    color: #8b7263; /* outline */
}