/* ================================================================
   ArabOverclockers Hardware Compare v2 — compare.css
   Theme: Flat · AO Red (#e91210) + White
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
    --aoc-red:         #e91210;
    --aoc-red-dark:    #b80e0d;
    --aoc-red-faint:   rgba(233,18,16,.06);
    --aoc-red-glow:    rgba(233,18,16,.12);

    --aoc-white:       #ffffff;
    --aoc-off-white:   #f7f7f7;
    --aoc-light-gray:  #efefef;
    --aoc-border:      #e0e0e0;
    --aoc-border-dark: #c8c8c8;

    --aoc-text:        #111111;
    --aoc-text-mid:    #444444;
    --aoc-text-muted:  #888888;

    --aoc-best-green:  #0b8a3e;
    --aoc-best-bg:     rgba(11,138,62,.06);

    /* Flat — no shadows */
    --aoc-shadow-sm:   none;
    --aoc-shadow-md:   none;
    --aoc-shadow-lg:   none;

    --aoc-radius:      4px;
    --aoc-radius-sm:   3px;

    --aoc-font:        'Cairo', 'Segoe UI', sans-serif;
    --aoc-mono:        'IBM Plex Mono', monospace;
}

/* ── Reset / Base ─────────────────────────────────────── */
.aoc-app *, .aoc-app *::before, .aoc-app *::after { box-sizing: border-box; }
.aoc-app {
    font-family: var(--aoc-font);
    color: var(--aoc-text);
    direction: rtl;
    background: var(--aoc-off-white);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--aoc-border);
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════ */
.aoc-topbar {
    background: var(--aoc-red);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    gap: 20px;
}
.aoc-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 900;
    font-size: 1.05rem;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.aoc-topbar-icon { font-size: 1.2rem; }

/* Search in topbar */
.aoc-topbar-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}
.aoc-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    pointer-events: none;
}
#aoc-search-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 2px;
    color: #fff;
    padding: 7px 34px 7px 12px;
    font-family: var(--aoc-font);
    font-size: .88rem;
    outline: none;
    transition: background .15s, border-color .15s;
}
#aoc-search-input::placeholder { color: rgba(255,255,255,.6); }
#aoc-search-input:focus {
    background: #ffffff;
    border-color: rgba(255,255,255,.55);
}
.aoc-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    background: var(--aoc-white);
    border: 1px solid var(--aoc-border);
    border-radius: 0;
    z-index: 9999;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: none;
}
.aoc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--aoc-light-gray);
    transition: background .12s;
}
.aoc-dropdown-item:last-child { border-bottom: none; }
.aoc-dropdown-item:hover { background: var(--aoc-red-faint); }
.aoc-dropdown-item.aoc-selected { opacity: .45; pointer-events: none; }
.aoc-dropdown-thumb {
    width: 40px; height: 40px;
    border-radius: 2px;
    object-fit: contain;
    background: var(--aoc-light-gray);
    flex-shrink: 0;
}
.aoc-dropdown-info strong { display: block; font-size: .88rem; color: var(--aoc-text); }
.aoc-dropdown-info small  { font-size: .76rem; color: var(--aoc-text-muted); }
.aoc-dropdown-check { margin-right: auto; color: var(--aoc-red); font-size: 1rem; font-weight: 700; }
.aoc-dropdown-loading,
.aoc-dropdown-empty { padding: 14px; text-align: center; color: var(--aoc-text-muted); font-size: .88rem; }

/* ══════════════════════════════════════════════════════
   CATEGORY TABS
══════════════════════════════════════════════════════ */
.aoc-cat-tabs {
    display: flex;
    background: var(--aoc-white);
    border-bottom: 1px solid var(--aoc-border);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 14px;
}
.aoc-cat-tabs::-webkit-scrollbar { display: none; }
.aoc-cat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    background: none;
    font-family: var(--aoc-font);
    font-size: .86rem;
    font-weight: 600;
    color: var(--aoc-text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.aoc-cat-tab:hover { color: var(--aoc-text); }
.aoc-cat-tab.active { color: var(--aoc-red); border-bottom-color: var(--aoc-red); }
.aoc-tab-icon { font-size: .95rem; }
.aoc-tab-count {
    background: var(--aoc-light-gray);
    color: var(--aoc-text-muted);
    border-radius: 2px;
    padding: 1px 6px;
    font-size: .72rem;
    font-weight: 700;
}
.aoc-cat-tab.active .aoc-tab-count { background: var(--aoc-red-glow); color: var(--aoc-red); }

/* ══════════════════════════════════════════════════════
   SELECTION TRAY
══════════════════════════════════════════════════════ */
.aoc-tray {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--aoc-white);
    padding: 12px 18px;
    border-bottom: 1px solid var(--aoc-border);
    flex-wrap: wrap;
}
.aoc-tray-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--aoc-text-muted);
    white-space: nowrap;
}
.aoc-tray-slots { display: flex; gap: 8px; flex: 1; }
.aoc-tray-slot {
    flex: 1;
    min-width: 80px;
    max-width: 130px;
    height: 64px;
    border-radius: 0;
    border: 1px dashed var(--aoc-border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    background: var(--aoc-off-white);
    transition: border-color .12s, background .12s;
}
.aoc-tray-slot:hover { border-color: var(--aoc-red); background: var(--aoc-red-faint); }
.aoc-slot-plus { font-size: 1.4rem; color: var(--aoc-border-dark); line-height: 1; }
.aoc-tray-slot:hover .aoc-slot-plus { color: var(--aoc-red); }
.aoc-tray-slot.aoc-slot-filled {
    border-style: solid;
    border-color: var(--aoc-red);
    background: var(--aoc-white);
    flex-direction: column;
    gap: 3px;
    padding: 6px;
}
.aoc-tray-slot.aoc-slot-filled img { width: 34px; height: 34px; object-fit: contain; }
.aoc-tray-slot-title {
    font-size: .65rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: var(--aoc-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.aoc-slot-remove {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--aoc-red);
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: .6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.aoc-tray-btns { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Buttons ── */
.aoc-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--aoc-red);
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 9px 18px;
    font-family: var(--aoc-font);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.aoc-cta-btn:hover:not(:disabled) { background: var(--aoc-red-dark); }
.aoc-cta-btn:disabled { opacity: .38; cursor: not-allowed; }
.aoc-cta-arrow { font-size: .9rem; }

.aoc-ghost-btn {
    background: none;
    border: 1px solid var(--aoc-border);
    color: var(--aoc-text-muted);
    border-radius: 2px;
    padding: 9px 14px;
    font-family: var(--aoc-font);
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.aoc-ghost-btn:hover { border-color: var(--aoc-red); color: var(--aoc-red); }

/* ══════════════════════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════════════════════ */
.aoc-grid-wrap { padding: 16px; }
.aoc-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.aoc-grid-count { font-size: .82rem; color: var(--aoc-text-muted); font-weight: 600; }
#aoc-sort-select {
    background: var(--aoc-white);
    border: 1px solid var(--aoc-border);
    border-radius: 2px;
    padding: 5px 10px;
    font-family: var(--aoc-font);
    font-size: .82rem;
    color: var(--aoc-text);
    cursor: pointer;
}
.aoc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    background: var(--aoc-border);
}
@media (max-width: 600px) { .aoc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Product Card — Flat ── */
.aoc-card {
    background: var(--aoc-white);
    border: none;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: background .12s;
}
.aoc-card:hover { background: #fafafa; }
.aoc-card.aoc-card-selected { background: var(--aoc-red-faint); }
.aoc-card-selected-badge {
    position: absolute;
    top: 0; right: 0;
    background: var(--aoc-red);
    color: #fff;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 900;
}
.aoc-card-img {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aoc-light-gray);
    padding: 10px;
}
.aoc-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .25s;
}
.aoc-card:hover .aoc-card-img img { transform: scale(1.05); }
.aoc-card-img-placeholder { font-size: 2.2rem; color: var(--aoc-border-dark); }
.aoc-card-body { padding: 9px 10px 10px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.aoc-card-brand { font-size: .68rem; font-weight: 700; color: var(--aoc-red); text-transform: uppercase; letter-spacing: .04em; }
.aoc-card-name {
    font-size: .82rem; font-weight: 700; color: var(--aoc-text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aoc-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 5px; }
.aoc-card-price { font-size: .8rem; font-weight: 700; color: var(--aoc-text-mid); font-family: var(--aoc-mono); }
.aoc-card-rating { font-size: .72rem; color: #e8a000; }
.aoc-card-add-btn {
    width: 100%;
    border: none;
    border-top: 1px solid var(--aoc-border);
    background: var(--aoc-off-white);
    color: var(--aoc-text-muted);
    font-family: var(--aoc-font);
    font-size: .78rem;
    font-weight: 700;
    padding: 7px;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.aoc-card-add-btn:hover { background: var(--aoc-red); color: #fff; }
.aoc-card.aoc-card-selected .aoc-card-add-btn { background: var(--aoc-red); color: #fff; }

/* Loading */
.aoc-grid-loading {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px;
    color: var(--aoc-text-muted);
    background: var(--aoc-white);
}
.aoc-spinner {
    width: 36px; height: 36px;
    border: 2px solid var(--aoc-border);
    border-top-color: var(--aoc-red);
    border-radius: 50%;
    animation: aoc-spin .7s linear infinite;
}
@keyframes aoc-spin { to { transform: rotate(360deg); } }

/* Empty */
.aoc-grid-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 48px 24px;
    color: var(--aoc-text-muted);
    background: var(--aoc-white);
}
.aoc-grid-empty-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }

/* Pagination */
.aoc-grid-pagination {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 16px;
    padding: 8px 0;
}
.aoc-page-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--aoc-border);
    background: var(--aoc-white);
    border-radius: 0;
    font-family: var(--aoc-font);
    font-size: .82rem;
    cursor: pointer;
    color: var(--aoc-text-mid);
    transition: background .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aoc-page-btn:hover { background: var(--aoc-red-faint); color: var(--aoc-red); border-color: var(--aoc-red); }
.aoc-page-btn.active { background: var(--aoc-red); color: #fff; border-color: var(--aoc-red); }

/* ══════════════════════════════════════════════════════
   COMPARISON RESULT
══════════════════════════════════════════════════════ */
.aoc-compare-result {
    border-top: 2px solid var(--aoc-red);
    background: var(--aoc-white);
}
.aoc-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aoc-border);
}
.aoc-result-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--aoc-text);
}
.aoc-result-header h2::before { content: '⚡ '; color: var(--aoc-red); }
.aoc-close-btn {
    background: var(--aoc-light-gray);
    border: none;
    border-radius: 2px;
    width: 28px; height: 28px;
    font-size: .9rem;
    cursor: pointer;
    color: var(--aoc-text-muted);
    transition: background .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aoc-close-btn:hover { background: var(--aoc-red); color: #fff; }

/* Table */
.aoc-table-wrap { padding: 0 16px 20px; }
.aoc-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--aoc-border);
    border-radius: 0;
}
.aoc-table-scroll::-webkit-scrollbar { height: 4px; }
.aoc-table-scroll::-webkit-scrollbar-track { background: var(--aoc-light-gray); }
.aoc-table-scroll::-webkit-scrollbar-thumb { background: var(--aoc-red); }

.aoc-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
    min-width: 500px;
    background: var(--aoc-white);
}
.aoc-compare-table th,
.aoc-compare-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--aoc-border);
    text-align: center;
    vertical-align: middle;
}
.aoc-spec-col {
    text-align: right !important;
    width: 148px;
    min-width: 130px;
    background: var(--aoc-off-white) !important;
    font-weight: 700;
    color: var(--aoc-text-mid);
    font-size: .8rem;
    border-right: 2px solid var(--aoc-red) !important;
}

/* Header row */
.aoc-thead-row th { background: var(--aoc-text); padding: 0; }
.aoc-th-inner { padding: 16px 12px; }
.aoc-th-img-wrap {
    width: 72px; height: 72px;
    margin: 0 auto 8px;
    background: var(--aoc-white);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.aoc-th-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aoc-th-no-img { font-size: 1.8rem; }
.aoc-th-brand { font-size: .68rem; color: var(--aoc-red); font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.aoc-th-name { font-weight: 700; color: var(--aoc-white); font-size: .86rem; line-height: 1.3; }
.aoc-th-name a { color: inherit; text-decoration: none; }
.aoc-th-name a:hover { color: #ffbcbc; }

/* Price row */
.aoc-tr-price td { background: #fffef5; }
.aoc-price-tag {
    display: block;
    font-family: var(--aoc-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--aoc-text);
    margin-bottom: 6px;
}
.aoc-buy-btn {
    display: inline-block;
    background: var(--aoc-red);
    color: #fff;
    border-radius: 2px;
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s;
}
.aoc-buy-btn:hover { background: var(--aoc-red-dark); color: #fff; }

/* Rating */
.aoc-rating-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.aoc-stars { font-size: .95rem; letter-spacing: 1px; }
.aoc-star { color: var(--aoc-border); }
.aoc-star.on { color: #e8a000; }
.aoc-rating-val { font-size: .78rem; color: var(--aoc-text-muted); font-family: var(--aoc-mono); }

/* Section divider */
.aoc-section-divider td {
    background: var(--aoc-text) !important;
    padding: 7px 14px;
    text-align: right !important;
}
.aoc-section-divider span {
    color: var(--aoc-white);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Spec rows */
.aoc-spec-row:nth-child(even) td { background: var(--aoc-off-white); }
.aoc-spec-row:hover td { background: var(--aoc-red-faint) !important; }
.aoc-custom-row .aoc-spec-label { font-style: italic; }
.aoc-custom-tag { color: var(--aoc-red); }

/* Best value */
.aoc-td-best { background: var(--aoc-best-bg) !important; }
.aoc-td-best .aoc-price-tag,
.aoc-td-best { color: var(--aoc-best-green) !important; }
.aoc-badge-best {
    display: inline-block;
    background: var(--aoc-best-green);
    color: #fff;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: .68rem;
    font-weight: 700;
    margin-top: 3px;
}
.aoc-best-dot { color: var(--aoc-best-green); font-size: .55rem; margin-right: 3px; }

.aoc-na { color: var(--aoc-border-dark); }

/* ══════════════════════════════════════════════════════
   FLOATING BAR (global add-to-compare)
══════════════════════════════════════════════════════ */
#aoc-floating-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--aoc-white);
    border-top: 2px solid var(--aoc-red);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    z-index: 999999;
    flex-wrap: wrap;
    direction: rtl;
}
.aoc-fbar-label { font-size: .8rem; font-weight: 700; color: var(--aoc-text-muted); white-space: nowrap; }
.aoc-fbar-items { display: flex; gap: 8px; flex: 1; }
.aoc-fbar-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--aoc-off-white);
    border: 1px solid var(--aoc-border);
    border-radius: 2px;
    padding: 5px 9px;
    font-size: .8rem;
    color: var(--aoc-text);
}
.aoc-fbar-item img { width: 28px; height: 28px; object-fit: contain; background: #fff; }
.aoc-fbar-remove {
    background: none;
    border: none;
    color: var(--aoc-text-muted);
    cursor: pointer;
    font-size: .82rem;
    padding: 0 2px;
    transition: color .12s;
}
.aoc-fbar-remove:hover { color: var(--aoc-red); }

/* Global add-to-compare button */
.aoc-add-compare {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    background: transparent;
    border: 1px solid var(--aoc-red);
    color: var(--aoc-red);
    border-radius: 2px;
    font-family: var(--aoc-font);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.aoc-add-compare:hover,
.aoc-add-compare.aoc-active { background: var(--aoc-red); color: #fff; }

/* ── Animations — subtle fade only ── */
@keyframes aoc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.aoc-card { animation: aoc-fade-in .18s ease both; }
.aoc-card:nth-child(1)  { animation-delay: .02s; }
.aoc-card:nth-child(2)  { animation-delay: .04s; }
.aoc-card:nth-child(3)  { animation-delay: .06s; }
.aoc-card:nth-child(4)  { animation-delay: .08s; }
.aoc-card:nth-child(5)  { animation-delay: .10s; }
.aoc-card:nth-child(6)  { animation-delay: .12s; }
.aoc-card:nth-child(n+7){ animation-delay: .14s; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .aoc-topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
    .aoc-topbar-search { max-width: 100%; flex: 1 1 100%; order: 3; }
    .aoc-tray { padding: 10px 12px; }
    .aoc-tray-label { display: none; }
    .aoc-grid-wrap { padding: 12px; }
    .aoc-compare-table { font-size: .78rem; }
    .aoc-th-img-wrap { width: 56px; height: 56px; }
    .aoc-spec-col { min-width: 105px; }
    .aoc-table-wrap { padding: 0 12px 14px; }
}