/*
  The home page's own stylesheet: the `@push('style')` block of the source
  project's home.blade.php, extracted verbatim.

  Two changes, both mechanical:
  - every `{{ $settings->theme_color }}` interpolation becomes
    var(--theme-color), which layouts/default.vue sets on <v-app> from the same
    admin setting;
  - the notice rules live with components/store/NoticeBar.vue instead, next to
    the markup they style.

  ORDER MATTERS. In the source, @stack('style') renders *before* the tailwind
  and custom-styles links, so tailwind's utilities win against the single-class
  rules below - which is why `.grid` here is only a fallback and the real column
  counts come from `grid-cols-3 md:grid-cols-6`. This file is therefore linked
  in nuxt.config.js immediately after layout.css and before tailwindcss.css.
*/

.latest-orders-container {
    text-align: center;
    margin: 5px 0;
}
.latest-orders-container h3 {
    position: relative;
    display: inline-block;
    padding: 0 5px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1f2937;
    margin: 0;
}
.latest-orders-container h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 3px;
    background: var(--theme-color, #8D44F3);
    transform: translateY(-50%);
}
.latest-orders-container h3::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 3px;
    background: var(--theme-color, #8D44F3);
    transform: translateY(-50%);
}
.featured-header-container {
    text-align: center;
    margin: 5px 0;
}
.featured-title-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}
.featured-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-icon 2s ease-in-out infinite;
}
.featured-icon-svg {
    width: 18px;
    height: 18px;
    color: white;
    stroke-width: 2.5;
}
.featured-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}
.featured-title-text {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}
.featured-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg, #e53e3e, #c53030);
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    -webkit-text-fill-color: white;
    animation: pulse-badge 1.5s ease-in-out infinite;
}
.featured-ribbon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
    animation: pulse-ribbon 2s ease-in-out infinite;
}
@media (min-width: 768px) {
    .featured-ribbon {
        font-size: 10px;
        padding: 4px 14px;
        top: 12px;
        right: 12px;
    }
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes pulse-ribbon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/*
  There was a bare `.grid` rule here - `display:grid` plus
  `grid-template-columns: repeat(3, minmax(0,1fr))` and a 0.5rem gap, six columns
  from 768px - left over from the template's own home-page markup. Nothing uses
  it any more: every grid on the site names its own class (.product-grid,
  .shop-grid, .ct-grid, .ftr-grid …) or its own `grid-cols-*` utility.

  It had to go because `grid` is also a Tailwind utility, and the dozen places
  that write `grid place-items-center` to centre one icon in a box were getting a
  three-column template with gaps: the icon landed in the first ~9px-wide column
  of a 44px tile instead of the middle of it. That is what the Latest Orders
  header icon, both leaderboard hero tiles, the podium's wreath and tick, and the
  leaderboard table's rank pip and avatars were all doing. Tailwind's own
  `.grid { display: grid }` is all those boxes ever wanted.

  If a CMS page's HTML ever relied on this rule, give that markup `grid-cols-3`.
*/

.container {
    width: 100%;
    max-width: 100%;
}
@media (min-width: 640px) {
    .container { max-width: 100%; }
}
@media (min-width: 768px) {
    .container {
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================
   PRODUCT CARDS WITH DYNAMIC THEME COLOR
   ============================================ */
.product-card {
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 0 var(--theme-color, #8D44F3);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.product-card:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    border-color: var(--theme-color, #8D44F3);
    z-index: 2;
}
.product-card .aspect-square {
    background: white;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.product-card .aspect-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 6px 6px 0 0;
    position: relative;
    z-index: 1;
}
.product-card:hover .aspect-square img {
    transform: translateY(8px);
}

.product-title-wrapper {
    padding: 8px 4px !important;
    min-height: 36px !important;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 0 0 6px 6px;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .product-title-wrapper {
        padding: 10px 4px !important;
        min-height: 40px !important;
    }
}
@media (max-width: 640px) {
    .product-title-wrapper {
        padding: 6px 2px !important;
        min-height: 30px !important;
    }
}
.product-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 11px !important;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 24px;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
    word-break: normal !important;
    word-wrap: normal !important;
}
.product-card:hover .product-title {
    color: var(--theme-color, #8D44F3);
}
@media (min-width: 768px) {
    .product-title {
        font-size: 13px !important;
        min-height: 28px;
    }
}
@media (max-width: 640px) {
    .product-title {
        font-size: 9px !important;
        min-height: 20px;
    }
}

.carousel__track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.carousel__slide {
    flex: 0 0 100%;
    max-width: 100%;
    transition: opacity 0.3s ease-in-out;
}
.carousel__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
}
.carousel__item img:hover {
    transform: scale(0.98);
}

/* ============================================
   LATEST ORDERS - EXACT MATCHING DESIGN
   ============================================ */
.latest-orders-wrapper {
    background: white;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

#recent_order {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recent_order_item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.recent_order_item:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
    transform: translateX(4px);
}
.recent_order_item img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.recent_order_item .flex-1 {
    flex: 1;
    min-width: 0;
}

.recent_order_item .font-primary {
    font-family: var(--primary-font-family, 'Lato', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.recent_order_item .text-sm {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* Status Badge Styles - EXACT MATCH */
.order-status-badge {
    flex-shrink: 0;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: white;
}

.order-status-badge.status-completed { background: #22c55e; }
.order-status-badge.status-processing { background: #eab308; }
.order-status-badge.status-auto-processing { background: #3b82f6; }
.order-status-badge.status-cancelled { background: #ef4444; }
.order-status-badge.status-default { background: #94a3b8; }
/* Responsive Design */
@media (max-width: 640px) {
    .latest-orders-wrapper {
        padding: 12px 10px;
        border-radius: 12px;
    }
    .recent_order_item {
        padding: 10px 12px;
        border-radius: 10px;
    }
    .recent_order_item img {
        width: 36px;
        height: 36px;
    }
    .recent_order_item .font-primary { font-size: 12px; }
    .recent_order_item .text-sm { font-size: 11px; }
    .order-status-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
    .latest-orders-wrapper h3 { font-size: 18px !important; }
}

@media (min-width: 768px) {
    .recent_order_item { padding: 14px 20px; }
    .recent_order_item img {
        width: 48px;
        height: 48px;
    }
}

/* Old status badge styles (kept for compatibility) */
.status-badge-completed { background-color: #22c55e !important; color: white !important; }
.status-badge-processing { background-color: #eab308 !important; color: white !important; }
.status-badge-auto { background-color: #3b82f6 !important; color: white !important; }
.status-badge-cancelled { background-color: #ef4444 !important; color: white !important; }
.status-badge-default { background-color: #6b7280 !important; color: white !important; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/*
  The source's block ends with a mobile override forcing every `.flex-wrap` to
  nowrap and hiding `.text-gray-300` inside one. That was pushed on the home page
  only; here the file is a site-wide link, and turning off wrapping everywhere
  would overflow the account and checkout rows, so it is left out.
*/