@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views/**/*.blade.php';
@source '../js/**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --color-brand: #5840ff;
    --color-navy: #1b2559;
    --color-accent: #ffd044;
    --color-muted: #8b93a7;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
}

button,
[type='button'],
[type='submit'] {
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid #1b2559;
    outline-offset: 2px;
}

.hero-slide-photo {
    object-position: 32% 58%;
}

.hero-copy {
    color: #1b2559;
    text-shadow:
        0 0 10px rgba(230, 226, 253, 0.95),
        0 1px 0 rgba(255, 255, 255, 0.9);
}

.category-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .hero-slide-photo {
        object-position: center center;
    }
}

.menu-overlay {
    opacity: 0;
    transition: opacity 280ms ease;
}

.menu-panel {
    transform: translate3d(-100%, 0, 0);
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-drawer='menu'][data-open] .menu-overlay {
    opacity: 1;
}

[data-drawer='menu'][data-open] .menu-panel {
    transform: translate3d(0, 0, 0);
}

[data-drawer='menu'][data-open] .menu-row {
    animation: menu-row-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-drawer='menu'][data-open] li:nth-child(1) .menu-row { animation-delay: 20ms; }
[data-drawer='menu'][data-open] li:nth-child(2) .menu-row { animation-delay: 40ms; }
[data-drawer='menu'][data-open] li:nth-child(3) .menu-row { animation-delay: 60ms; }
[data-drawer='menu'][data-open] li:nth-child(4) .menu-row { animation-delay: 80ms; }
[data-drawer='menu'][data-open] li:nth-child(5) .menu-row { animation-delay: 100ms; }
[data-drawer='menu'][data-open] li:nth-child(6) .menu-row { animation-delay: 120ms; }
[data-drawer='menu'][data-open] li:nth-child(7) .menu-row { animation-delay: 140ms; }
[data-drawer='menu'][data-open] li:nth-child(8) .menu-row { animation-delay: 160ms; }

.menu-row {
    transition: background-color 180ms ease;
}

.menu-row:hover,
.menu-row:focus-visible {
    background: #f7f5ff;
}

.menu-row[aria-current='true'] {
    background: #f3eeff;
}

.menu-chevron {
    transition: transform 180ms ease;
}

.menu-row:hover .menu-chevron,
.menu-row:focus-visible .menu-chevron {
    transform: translateX(3px);
}

.store-social {
    display: grid;
    height: 2.5rem;
    width: 2.5rem;
    place-items: center;
    border-radius: 999px;
    transition: transform 180ms ease;
}

.store-social:hover,
.store-social:focus-visible {
    transform: scale(1.06);
}

.store-whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: grid;
    height: 3.5rem;
    width: 3.5rem;
    place-items: center;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 18px rgba(18, 140, 70, 0.28);
    transition: transform 180ms ease;
}

.store-whatsapp:hover,
.store-whatsapp:focus-visible {
    transform: translateY(-2px);
}

@media (max-width: 1023px) {
    .store-whatsapp {
        bottom: calc(4.65rem + env(safe-area-inset-bottom));
    }
}

@keyframes menu-row-in {
    from {
        opacity: 0;
        transform: translate3d(-8px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.cart-overlay {
    opacity: 0;
    transition: opacity 300ms ease;
}

.cart-panel {
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-drawer='cart'][data-open] .cart-overlay {
    opacity: 1;
}

[data-drawer='cart'][data-open] .cart-panel {
    transform: translate3d(0, 0, 0);
}

.cart-list {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-list::-webkit-scrollbar {
    display: none;
}

.cart-qty button {
    transition: transform 120ms ease;
}

.cart-qty button:active {
    transform: scale(0.92);
}

.cart-row-out {
    animation: cart-row-out 180ms ease forwards;
    pointer-events: none;
}

.cart-count-pop {
    animation: cart-count-pop 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.company-website {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.order-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: rgba(255, 255, 255, 0.34);
}

html[dir="rtl"] .order-progress-bar {
    inset: 0 0 0 auto;
}

[data-checkout-submit].is-placing {
    pointer-events: none;
    cursor: progress;
}

.cart-checkout {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.cart-checkout:hover,
.cart-checkout:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(88, 64, 255, 0.22);
}

.cart-continue svg {
    transition: transform 180ms ease;
}

.cart-continue:hover svg,
.cart-continue:focus-visible svg {
    transform: translateX(-3px);
}

[data-promo-panel] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-promo-panel][data-open] {
    grid-template-rows: 1fr;
}

.cart-promo-chevron {
    transition: transform 180ms ease;
}

[data-promo-toggle][aria-expanded='true'] .cart-promo-chevron {
    transform: rotate(180deg);
}

@keyframes cart-row-out {
    to {
        opacity: 0;
        transform: translate3d(12px, 0, 0);
    }
}

@keyframes cart-count-pop {
    50% {
        transform: scale(1.28);
    }
}

.info-card {
    border-radius: 1rem;
    border: 1px solid #e6e2f6;
    background: #fff;
    padding: 0.9rem 1rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.info-section {
    scroll-margin-top: 6rem;
}

.toc-link {
    display: block;
    border-radius: 0.6rem;
    padding: 0.3rem 0.45rem;
    font-size: 12px;
    font-weight: 600;
    color: #3d4663;
}

.toc-link[aria-current='true'] {
    background: #fff;
    color: #5840ff;
}

@media (hover: hover) and (pointer: fine) {
    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(27, 37, 89, 0.06);
    }
}

.see-more[hidden] {
    display: none !important;
}

.see-more {
    display: inline-flex;
    min-width: 11.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid #5840ff;
    background: #fff;
    padding: 0.55rem 1.25rem;
    font-size: 13px;
    font-weight: 600;
    color: #5840ff;
}

.see-more:hover,
.see-more:focus-visible {
    background: #f4f0ff;
}

.see-more-icon {
    transition: transform 180ms ease;
}

.see-more:hover .see-more-icon,
.see-more:focus-visible .see-more-icon {
    transform: translateY(2px);
}

.product-reveal {
    animation: product-reveal 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.promo-banner-cream {
    background: linear-gradient(135deg, #fff8ec, #ffe7b0);
}

.promo-banner-sky {
    background: linear-gradient(135deg, #f4f9ff, #d7ebff);
}

.promo-banner-lilac {
    background: linear-gradient(135deg, #f7f4ff, #e3daff);
}

.promo-banner-art {
    background: transparent !important;
    transition: transform 220ms ease;
}

.promo-banner-cta {
    transition: transform 180ms ease;
}

.promo-banner-cta:hover,
.promo-banner-cta:focus-visible {
    transform: translateX(2px);
}

[data-faq-panel] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

[data-faq-panel][data-open] {
    max-height: 14rem;
    opacity: 1;
}

.faq-chevron {
    transition: transform 200ms ease;
}

[data-faq-toggle][aria-expanded='true'] .faq-chevron {
    transform: rotate(180deg);
}

.store-footer {
    background: linear-gradient(180deg, #f7f4ff 0%, #f3efff 100%);
}

.footer-social {
    border: 1px solid #e4dff5;
    background: #fff;
    color: #5840ff;
}

.footer-link {
    transition: color 160ms ease;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: #5840ff;
}

.whish-pay-logo {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 0.45rem;
    object-fit: cover;
}

.footer-pay {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.9rem;
    border: 1px solid #e4dff5;
    background: #fff;
    padding: 0.55rem 0.75rem;
}

@media (max-width: 1023px) {
    .store-footer {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }
}

@media (hover: hover) and (pointer: fine) {
    .promo-banner:hover .promo-banner-art {
        transform: translateX(-4px);
    }
}

@keyframes product-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-overlay,
    .menu-panel,
    .menu-chevron,
    .cart-overlay,
    .cart-panel,
    .cart-qty button,
    .cart-checkout,
    .cart-continue svg,
    .cart-promo-chevron,
    [data-promo-panel],
    .store-social,
    .store-whatsapp,
    .see-more-icon,
    .promo-banner-art,
    .promo-banner-cta,
    [data-faq-panel],
    .faq-chevron,
    .footer-link {
        transition: none;
    }

    [data-drawer='menu'][data-open] .menu-row,
    .cart-row-out,
    .cart-count-pop,
    [data-wishlist-page] [data-wishlist-grid],
    .wish-heart-pop,
    .wish-card-out,
    [data-card-media] > [role='img'],
    .product-reveal {
        animation: none;
        transition: none;
    }
}

.benefits-marquee {
    overflow: hidden;
    touch-action: pan-y;
}

.benefits-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.benefits-marquee-set {
    display: flex;
    flex: none;
}

#shop-categories,
#featured {
    scroll-margin-top: 7.75rem;
}

.pb-nav {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
    .pb-nav {
        padding-bottom: 2.75rem;
    }
}

[data-placeholder-label]:empty {
    display: none;
}

[data-filter-chip] {
    background: #f3f4f8;
    color: #1b2559;
}

[data-filter-chip][aria-pressed='true'] {
    background: #5840ff;
    color: #fff;
}

[data-hero-dot] {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 999px;
    background: #d9d4ee;
}

[data-hero-dot][aria-current='true'] {
    width: 1.05rem;
    background: #5840ff;
}

[data-wishlist-page] [data-wishlist-grid] {
    animation: wish-page-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-wishlist-page] [data-product-card] {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

[data-card-media] > [role='img'] {
    transition: transform 220ms ease;
}

.wish-heart-pop {
    animation: wish-heart-pop 220ms ease;
}

.wish-card-out {
    animation: wish-card-out 220ms ease forwards;
    pointer-events: none;
}

.store-toast {
    position: fixed;
    left: 50%;
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
    z-index: 45;
    max-width: calc(100% - 2rem);
    transform: translateX(-50%);
    border-radius: 999px;
    background: #1b2559;
    padding: 0.55rem 0.9rem;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

[data-clear-dialog]::backdrop {
    background: rgba(27, 37, 89, 0.45);
}

@media (hover: hover) and (pointer: fine) {
    [data-wishlist-page] [data-product-card]:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(27, 37, 89, 0.08);
    }

    [data-wishlist-page] [data-product-card]:hover [data-card-media] > [role='img'] {
        transform: scale(1.04);
    }
}

@media (min-width: 1024px) {
    .store-toast {
        bottom: 1.5rem;
    }
}

@keyframes wish-page-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wish-heart-pop {
    50% {
        transform: scale(1.18);
    }
}

@keyframes wish-card-out {
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

[data-wishlist-toggle][aria-pressed='true'] {
    color: #ff3b30;
}

[data-wishlist-toggle][aria-pressed='true'] svg {
    fill: currentColor;
    stroke: currentColor;
}

[data-wishlist-toggle][aria-pressed='false'] {
    color: #a0a8b8;
}

[data-bottom-link] {
    color: #8b93a7;
}

[data-bottom-link][aria-current='page'] {
    color: #5840ff;
}

.search-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    left: 0;
    z-index: 40;
    max-height: min(60vh, 22rem);
    overflow: auto;
    border-radius: 1rem;
    border: 1px solid #eef1f6;
    background: #fff;
    padding: 0.35rem;
    text-align: left;
    box-shadow: 0 12px 32px rgba(27, 37, 89, 0.12);
}

.search-panel-label {
    padding: 0.45rem 0.7rem 0.15rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b93a7;
}

.search-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    border-radius: 0.75rem;
    padding: 0.45rem 0.55rem;
    text-align: left;
}

.search-option[aria-selected='true'],
.search-option:hover {
    background: #f4f0ff;
}

.search-option-mark {
    display: grid;
    height: 2.25rem;
    width: 2.25rem;
    flex: none;
    place-items: center;
    border-radius: 0.7rem;
    background: #f4f0ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #5840ff;
}

.search-empty {
    padding: 0.8rem 0.7rem;
    font-size: 13px;
    color: #667085;
}

.search-option-copy {
    min-width: 0;
}

.search-option-title,
.search-option-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-option-title {
    font-size: 13px;
    font-weight: 600;
    color: #1b2559;
}

.search-option-meta {
    font-size: 11px;
    color: #667085;
}

.search-option mark {
    background: transparent;
    font-weight: 700;
    color: #5840ff;
}

[data-search-input]:focus-visible {
    outline: none;
}

[data-search-form]:focus-within {
    box-shadow: 0 0 0 2px #1b2559;
}

.brand-logo {
    display: block;
    height: 1.4rem;
    width: auto;
    aspect-ratio: 946 / 163;
    object-fit: fill;
    object-view-box: inset(27.4% 4% 29.5% 3.7%);
}

@media (min-width: 380px) {
    .brand-logo {
        height: 1.85rem;
    }
}

@media (min-width: 1024px) {
    .brand-logo {
        height: 2.6rem;
    }
}

html[dir="rtl"] body {
    font-family: "Instrument Sans", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

.admin-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.admin-side {
    display: none;
}

.admin-nav-toggle:checked ~ .admin-side {
    display: block;
}

@media (min-width: 1024px) {
    .admin-app {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        min-height: 100vh;
    }

    .admin-side {
        display: block;
    }
}

.admin-main {
    min-width: 0;
}