/* ==========================================================================
   Search modal -- resources/views/front/partials/search-modal.blade.php + public/js/front/search.js
   Plain CSS, namespaced `sm` (loaded on every storefront page, including those without Tailwind);
   logical properties, so it mirrors for rtl / ltr. The storefront's look: Cairo, #532740, radius 16.
   ========================================================================== */

.sm-modal { font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; }

/* Top-aligned, 720 wide, so the results have room to grow downwards */
.sm-dialog { max-width: 720px; margin: 72px auto 24px; padding-inline: 16px; }
.sm-content {
    overflow: hidden; border: 0; border-radius: 16px; background: #FFFFFF;
    box-shadow: 0 24px 64px rgba(34, 34, 34, .22);
}

/* ---------- The search bar ---------- */
.sm-bar {
    position: relative; display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 16px 20px; border-bottom: 1px solid #F0EAEE;
}
.sm-bar__icon { flex-shrink: 0; font-size: 18px; color: #532740; }
.sm-bar__input {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0; border: 0; outline: none; background: transparent;
    font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.4; color: #080907;
}
.sm-bar__input::placeholder { color: #9E9B98; font-weight: 400; opacity: 1; }
.sm-bar__input::-webkit-search-cancel-button { display: none; }
.sm-bar__btn {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: #B3B3B3; font-size: 18px; cursor: pointer;
}
.sm-bar__btn:hover { color: #532740; }
.sm-bar__spinner {
    flex-shrink: 0; width: 18px; height: 18px; border: 2px solid #E6DCE2; border-top-color: #532740;
    border-radius: 50%; animation: sm-spin .7s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }
.sm-bar__close {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
    border: 1px solid #EEEEEE; border-radius: 8px; background: #FBFAFA; color: #616161;
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sm-bar__close:hover { border-color: #532740; color: #532740; }
.sm-bar__close i { display: none; font-size: 14px; }
.sm-bar :focus-visible { outline: 2px solid #532740; outline-offset: 2px; }
/* The field is the whole bar: no ring of its own, the bar is underlined in the brand colour instead */
.sm-bar .sm-bar__input:focus,
.sm-bar .sm-bar__input:focus-visible { outline: none; box-shadow: none; }
.sm-bar:focus-within { box-shadow: inset 0 -2px 0 #532740; }

/* ---------- Results panel ---------- */
.sm-panel { max-height: min(64vh, 560px); overflow-y: auto; padding: 8px 12px 12px; overscroll-behavior: contain; }

.sm-note { margin: 0; padding: 28px 12px; text-align: center; font-size: 15px; font-weight: 500; color: #737373; }
.sm-note--error { color: #B3261E; }

.sm-corrected {
    display: flex; align-items: center; gap: 8px; margin: 8px 8px 4px; padding: 8px 12px;
    border-radius: 8px; background: #F6F0F3; color: #532740; font-size: 14px; font-weight: 600;
}

.sm-section { padding: 8px 4px 4px; }
.sm-section + .sm-section { border-top: 1px solid #F5F1F3; margin-top: 4px; }
.sm-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sm-section__title {
    display: block; margin: 4px 8px 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #919191;
}
.sm-link { padding: 0; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #532740; cursor: pointer; }
.sm-link:hover { text-decoration: underline; }

/* Categories and recent searches: chips */
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px 8px; }
.sm-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
    border: 1px solid #EEE6EB; border-radius: 999px; background: #FBFAFA;
    font-size: 14px; font-weight: 600; color: #222222; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sm-chip i { font-size: 12px; color: #919191; }
.sm-chip:hover, .sm-chip.is-active { border-color: #532740; background: #F6F0F3; color: #532740; }
.sm-chip:hover i, .sm-chip.is-active i { color: #532740; }

/* Products: image, name + category, price */
.sm-list { display: flex; flex-direction: column; gap: 2px; }
.sm-item {
    display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 10px;
    color: #222222; text-decoration: none; transition: background-color .12s ease;
}
.sm-item:hover, .sm-item.is-active { background: #F6F0F3; color: #222222; }
.sm-item__media {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; overflow: hidden; border-radius: 8px; background: #F5F4F6; color: #C9C2C6;
}
.sm-item__media img { width: 100%; height: 100%; object-fit: cover; }
.sm-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sm-item__name {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 15px; font-weight: 600; line-height: 1.4; color: #222222;
}
.sm-item__name mark { padding: 0; background: transparent; color: #532740; font-weight: 800; }
.sm-item__meta { font-size: 13px; font-weight: 500; color: #919191; }
.sm-item__price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.sm-item__now { font-size: 15px; font-weight: 700; color: #532740; white-space: nowrap; }
.sm-item__now small { font-size: 12px; font-weight: 600; }
.sm-item__old { font-size: 12px; font-weight: 500; color: #999999; }
.sm-item__badge {
    padding: 2px 6px; border-radius: 4px; background: #532740; color: #FFFFFF;
    font-size: 11px; font-weight: 700; line-height: 1.3;
}

/* "View all results (N)" */
.sm-all {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 4px 0; height: 48px;
    border-radius: 10px; background: #532740; color: #FFFFFF;
    font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color .15s ease;
}
.sm-all:hover, .sm-all.is-active { background: #43203A; color: #FFFFFF; }
.sm-all.is-active { outline: 2px solid #532740; outline-offset: 2px; }

/* Nothing found */
.sm-empty { padding: 32px 16px; text-align: center; }
.sm-empty i {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 12px;
    border-radius: 50%; background: #F6F0F3; color: #532740; font-size: 20px;
}
.sm-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #222222; }
.sm-empty__text { margin: 0; font-size: 14px; color: #737373; }

/* Footer: keyboard hints (pointer devices only) */
.sm-foot { padding: 10px 20px; border-top: 1px solid #F0EAEE; background: #FBFAFA; font-size: 12px; color: #9E9B98; }

/* ---------- Phones: full width, from the top ---------- */
@media (max-width: 575.98px) {
    .sm-dialog { margin: 0; padding: 0; max-width: none; }
    .sm-content { min-height: 100vh; border-radius: 0; }
    .sm-panel { max-height: none; }
    .sm-bar { padding: 12px 14px; }
    .sm-bar__input { font-size: 16px; } /* 16px: iOS does not zoom into the field */
    .sm-bar__esc { display: none; }
    .sm-bar__close { border: 0; background: transparent; }
    .sm-bar__close i { display: inline; }
    .sm-foot { display: none; }
    .sm-item__media { width: 48px; height: 48px; }
}
@media (hover: none) { .sm-foot { display: none; } }