/*
 * 3Dinga — modern UI v4 (2026-09-13) — folder: _fixes/LOOK3_20260913/
 * ROOT-CAUSE FIX for the hover magnifier:
 *   The popup [data-big-pic-hover-img] is position:fixed. When an ancestor
 *   has a CSS transform (our hover lift/scale), the browser makes that
 *   ancestor the containing block for fixed elements -> the popup gets
 *   trapped inside the card (clipped by overflow:hidden) and renders tiny.
 *   THE OLD SITE WORKED because it had no transform on cards.
 *   v4: NO transform anywhere on card ancestors. Depth comes from shadow.
 * Also: stronger basalam-inspired design polish.
 * Rollback: remove the modern.css <link> from begin.blade.php.
 * ------------------------------------------------------------- */

:root {
    --td-accent: #34b6ea;
    --td-accent-dark: #1785ad;
    --td-btn: #1587b5;   /* darker teal-blue for primary buttons (AA contrast on white) */
    --td-green: #5eb23a;
    --td-orange: #ff5737;
    --td-ink: #232a33;
    --td-muted: #7b8794;
    --td-line: #e6ebf0;
    --td-bg: #f5f6f7;
    --td-card-radius: 12px;
    --td-shadow-sm: 0 1px 3px rgba(25, 40, 55, .08);
    --td-shadow-hover: 0 10px 30px rgba(25, 40, 55, .18);
}

html, body {
    background: var(--td-bg);
    font-family: 'IRANSans', 'Vazirmatn', Tahoma, sans-serif;
    color: var(--td-ink);
}

/* ============ CARD IMAGE (fixed sizing, full model visible) ============ */
.proBox__pic {
    height: 190px;
    background: #f3f5f7;
    border-radius: var(--td-card-radius) var(--td-card-radius) 0 0;
    overflow: visible;   /* popup escapes even if a containing block appears */
    isolation: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.proBox__pic_img {
    width: auto !important;
    height: 190px !important;
    max-width: 100%;
    object-fit: contain;
    background: #f3f5f7;
    border-radius: var(--td-card-radius) var(--td-card-radius) 0 0;
}
/* NO transform/scale on the image either — any transform on an ancestor
   of the fixed popup breaks it. Keep hover effects to shadow/opacity. */

/* magnifier popup floats above everything (base css gives size limits) */
[data-big-pic-hover-img] { z-index: 99999 !important; }

/* ============ CARDS ============ */
.proBox { padding: 8px; }
.proBox__inner {
    border: 1px solid var(--td-line);
    border-radius: var(--td-card-radius);
    background: #fff;
    box-shadow: var(--td-shadow-sm);
    transition: box-shadow .22s ease, border-color .22s ease;
}
.proBox__inner::before { display: none !important; }
.proBox__inner:hover {
    box-shadow: var(--td-shadow-hover);
    border-color: #dfe6ec;
}
.proBox__middle { min-height: 100px; padding: 12px; }
.proBox__title_link { color: var(--td-ink); font-weight: 600; letter-spacing: -.2px; }
.proBox__title_link:hover { color: var(--td-accent); opacity: 1; }
.proBox__info_item { color: var(--td-muted); }
.proBox__fav { opacity: .5; transition: opacity .2s ease, color .2s ease; }
.proBox__inner:hover .proBox__fav { opacity: 1; }
.proBox__price_btn {
    border-radius: 999px !important;
    font-weight: 600;
    transition: filter .2s ease;
}
.proBox__inner:hover .proBox__price_btn { filter: brightness(1.08); }

/* ============ HOME HERO ============ */
/* ============ HOME HERO — restored photo + modern gradient ============
   v2/v4 accidentally flattened this to a light gradient (white box look).
   Original site: header_bg.jpg photo + dark inset + green->blue gradient.
   v5: keep the photo, put a richer teal/blue brand gradient over it,
   softer than the old one, with white text on top. */
.header_style1 .header_part3 {
    background: url(../_images/background/header_bg.jpg) no-repeat center center / cover;
    background-attachment: fixed;
    box-shadow: 0 0 800px 800px rgba(8, 24, 36, .35) inset;
}
.header_style1 .header_part3:before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 0;
    background: linear-gradient(135deg,
        rgba(10, 42, 64, .92) 0%,
        rgba(16, 74, 110, .82) 45%,
        rgba(29, 154, 209, .55) 100%);
}
.header_style1 .header_part3 .inner { position: relative; z-index: 1; }
.header_part3 .title_style1 .text { color: #fff !important; font-weight: 800; letter-spacing: -.5px; }
.header_part3 .counter { color: #dbe8f0 !important; }
.header_part3 .counter .mark { color: #7fd4ff; font-weight: 700; }
.header_part3 .search_style1 input,
.header_part3 input[type='text'] {
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 4px 18px rgba(5, 20, 30, .25) !important;
}
.header_part3 .ui.icon.input .prompt:focus,
.header_part3 input[type='text']:focus {
    border-color: #7fd4ff !important;
    box-shadow: 0 0 0 4px rgba(52,182,234,.28) !important;
}
/* search placeholder legible on dark bg */
.header_part3 input::placeholder { color: #b9c9d4 !important; }
.header_part3 .title_style3 .sub_text { color: #c3d3dd; }
.header_part3 .ui.icon.input .prompt,
.header_part3 input[type='text'] {
    border-radius: 999px !important;
    border: 1px solid var(--td-line) !important;
    box-shadow: var(--td-shadow-sm) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.header_part3 .ui.icon.input .prompt:focus,
.header_part3 input[type='text']:focus {
    border-color: var(--td-accent) !important;
    box-shadow: 0 0 0 4px rgba(52,182,234,.14) !important;
}

/* ============ SECTION TITLES ============ */
.title_style3 .text { color: var(--td-ink); font-weight: 700; }
.title_style3 .text .mark { color: var(--td-accent); }
.title_style3 .sub_text { color: var(--td-muted); }
.btn_archive a { border-radius: 999px; border: 1px solid var(--td-line); padding: 6px 18px; transition: all .2s ease; }
.btn_archive a:hover { border-color: var(--td-accent); color: var(--td-accent); }

a { transition: color .18s ease, border-color .18s ease; }
.header_top_nav__link { color: var(--td-muted) !important; }
.header_top_nav__link:hover { color: var(--td-accent) !important; }
footer, .footer { background: #fff; border-top: 1px solid var(--td-line); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ccd5dd; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--td-accent); outline-offset: 2px; }

@media (max-width: 768px) {
    .proBox__pic { height: 160px; }
    .proBox__pic_img { height: 160px !important; }
    .proBox__middle { min-height: 88px; }
}


/* ============ PRIMARY BUTTONS — darker accent (accessibility) ============ */
.proBox__price_btn,
.btn_archive a.btn_style1,
.header_part3 .btn_style1 {
    background: var(--td-btn);
}
.header_part3 .btn_style1:hover { filter: brightness(1.08); }

/* ============ BADGES — free/special pills (3dsky style) ============ */
.proBox__info_type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.6;
}
/* free model badge -> green pill */
.proBox--free .proBox__info_type {
    background: rgba(94, 178, 58, .12);
    color: var(--td-green);
}
/* special model badge -> orange pill */
.proBox--special .proBox__info_type {
    background: rgba(255, 87, 55, .12);
    color: var(--td-orange);
}


/* ============ BOTTOM ROW: fit download button neatly ============ */
.proBox__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #fff !important;
}
.proBox__bottom_side { display: flex; align-items: center; }
.proBox__price_btn {
    padding: 7px 16px !important;
    font-size: .9rem !important;
    line-height: 1.6 !important;
    white-space: nowrap;
}


/* ============ DOWNLOAD BUTTON: icon-only ============ */
.proBox__price_btn { font-size: 0 !important; }          /* hide label text */
.proBox__price_btn .i-download { font-size: 1.25rem; }   /* icon visible */
.proBox__price_btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 36px; padding: 0 !important; }