/* ==================================================================
 * 3Dinga front CSS  —  BUILD: CARDFINAL-20260913-v10
 * VERIFY ON SERVER: open  https://3dinga.com/assets/front/_css/modern.css
 * and look for the line "BUILD: CARDFINAL-20260913-v10" in the first lines.
 * Not there  =  the upload did not land (or you are seeing a cached copy).
 * ------------------------------------------------------------------
 * BASE: the modern.css that was live on 2026-09-13 (v6.0 in begin.blade).
 * ================================================================== */
/*
 * 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;
}


/* ============ CARD BOTTOM ROW: borderless, unified ============ */
.proBox__bottom,
.proBox__bottom_side,
.proBox__bottom_side.proBox__price,
.proBox__bottom_side.proBox__statistics {
    border: none !important;
    border-top: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: #fff !important;
}
/* remove any separator pseudo-elements the base theme draws */
.proBox__bottom:before,
.proBox__bottom:after,
.proBox__bottom_side:before,
.proBox__bottom_side:after { display: none !important; }

/* whole-card hover: gentle unified lift-shadow (fitted, not harsh) */
.proBox__inner {
    transition: box-shadow .3s ease, border-color .3s ease;
}
.proBox__inner:hover {
    box-shadow: 0 8px 22px rgba(25,40,55,.10), 0 2px 6px rgba(25,40,55,.06);
    border-color: #dfe7ed;
}

/* ============ price text color per product type ============ */
.proBox__price_val { color: #232a33; font-weight: 700; }


/* ==================================================================
 * CARDFINAL 2026-09-13 — fixes for this round (last rules win)
 * ================================================================== */

/* ---------- 1) Bottom row: real flexible row, nothing escapes ---------- */
.proBox__bottom {
    height: auto !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 10px !important;
    border: none !important;
    border-radius: 0 0 10px 10px;
    background: #fff !important;
    overflow: hidden !important;      /* nothing sticks out of the card */
    box-sizing: border-box;
}
.proBox__bottom_side {
    display: flex !important;
    align-items: center;
    min-width: 0;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.proBox__bottom_side::before,
.proBox__bottom_side::after,
.proBox__bottom::before,
.proBox__bottom::after { display: none !important; }

/* the old coloured price cell (blue/grey block) — gone */
.proBox__bottom_side.proBox__price,
.proBox__inner:hover .proBox__price,
.proBox--free .proBox__inner:hover .proBox__price,
.proBox--special .proBox__inner:hover .proBox__price {
    background: transparent !important;
    border: none !important;
    color: var(--td-ink) !important;
}

/* ---------- 2) Price button — fits its own text ---------- */
.proBox__price_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto !important;
    height: 32px !important;
    min-width: 36px;
    max-width: 100%;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: .85rem !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--td-btn, #1587b5);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16,35,47,.16) !important;
    transform: none !important;
}
.proBox__price_btn:hover { filter: brightness(1.06); transform: none !important; }

/* text inside the paid button, small and fitted */
.proBox__price_val {
    font-size: .95rem !important;
    font-weight: 700;
    color: #fff !important;
    line-height: 1 !important;
}
.proBox__price_unit {
    font-size: .72rem !important;
    color: rgba(255,255,255,.92) !important;
    line-height: 1 !important;
}

/* free + special: icon-only square, no text at all */
.proBox--free .proBox__price_btn,
.proBox--special .proBox__price_btn {
    width: 36px !important;
    padding: 0 !important;
    gap: 0;
}
.proBox--free .proBox__price_btn { background: var(--td-green, #93D24F) !important; }
.proBox--special .proBox__price_btn { background: var(--td-orange, #ff5737) !important; }
.proBox--free .proBox__price_val,
.proBox--free .proBox__price_unit,
.proBox--special .proBox__price_val,
.proBox--special .proBox__price_unit { display: none !important; }

/* the base theme's PNG download glyph: white, centred, no absolute offset */
.proBox__price_btn--download_icon::before {
    position: static !important;
    right: auto !important; top: auto !important; margin: 0 !important;
    width: 18px !important; height: 18px !important;
    opacity: 1 !important;
    background: url(../_images/icon/download.png) no-repeat center center / contain !important;
    filter: brightness(0) invert(1);
}

/* ---------- 3) Card hover: soft, no jump, no transform ---------- */
.proBox__inner { transition: box-shadow .28s ease, border-color .28s ease; }
.proBox__inner:hover {
    transform: none !important;
    box-shadow: 0 8px 22px rgba(16,35,47,.10), 0 2px 6px rgba(16,35,47,.06);
    border-color: #dfe7ed !important;
}

/* ---------- 4) Specs + stats: centered, name/value pulled together ------ */
.detail_part1 .detail_right_side .object_spec .item,
.detail_part1 .detail_right_side .object_static .item {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline;
    gap: 8px;
    border-bottom: 1px dashed #eef2f5 !important;
    padding: 9px 4px !important;
    text-align: center;
}
.detail_part1 .detail_right_side .object_spec .item:last-child,
.detail_part1 .detail_right_side .object_static .item:last-child { border-bottom: none !important; }
.detail_part1 .detail_right_side .object_spec .name,
.detail_part1 .detail_right_side .object_static .name {
    min-width: 0 !important; width: auto !important;
    padding: 0 !important; margin: 0 !important;
    color: #6b7785 !important; font-size: 1.1rem !important;
    text-align: center; display: inline-block !important;
}
.detail_part1 .detail_right_side .object_spec .name::before { display: none !important; }
.detail_part1 .detail_right_side .object_spec .name::after { content: ':' !important; margin-inline-start: 2px; }
.detail_part1 .detail_right_side .object_spec .val,
.detail_part1 .detail_right_side .object_static .val {
    margin: 0 !important; padding: 0 !important;
    color: var(--td-ink) !important; font-size: 1.1rem !important; font-weight: 600;
    text-align: center; display: inline-block !important;
    white-space: normal; overflow-wrap: anywhere; max-width: 62%;
}
.detail_part1 .detail_right_side .object_static .icon { display: none !important; }
.detail_part1 .detail_right_side .object_spec .item:hover .name,
.detail_part1 .detail_right_side .object_spec .item:hover .val { color: var(--td-accent) !important; }
.object_spec::before, .object_static::before { display: none !important; }

/* the two "sticky note" images that clashed with the box title */
.box_style6::before, .box_style6::after { display: none !important; }
.box_style6 { border-top: 3px solid var(--td-accent) !important; }

/* ---------- 5) Listing page H1 (SEO) ---------- */
.page_h1_seo {
    font-size: 1.2rem; font-weight: 600; color: #4a5866;
    margin: 0 0 12px; padding-inline: 14px; line-height: 1.9;
}

/* ---------- Balance top-up CTA (HEADER_BALANCE_CTA_20260922) ---------- */

/* The Balance Increase entry point in the header. Every rule below is scoped to the two
   new modifier classes (or the new drawer class), so no existing header item, dropdown,
   menu or page element is affected. Colours come from the variables defined at the top of
   this file, so the CTA follows the same visual language as the rest of the theme. */

.header_style2 .header_top_nav__item--balance_cta { padding: 0 .25rem; }

.header_style2 .header_top_nav__link--balance_cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 30px;
    padding: 0 .85rem;
    line-height: 30px;
    border: 1px solid rgba(52, 182, 234, .40);
    border-radius: 999px;
    background: rgba(52, 182, 234, .10);
    color: var(--td-accent) !important;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.header_style2 .header_top_nav__link--balance_cta .td-ico { flex: 0 0 auto; }

.header_style2 .header_top_nav__link--balance_cta:hover,
.header_style2 .header_top_nav__link--balance_cta:focus-visible {
    background: var(--td-accent) !important;
    border-color: var(--td-accent);
    color: #fff !important;
}

/* the same action as a compact pill in the sticky row on phones (< 768px), where the
   top nav strip is hidden by the theme (d-none d-md-block). It is a normal Bootstrap
   column in the same row, so it cannot overlap the category title or the drawer. */

.header_balance_cta_mobile { padding: 0 .35rem; }

.header_balance_cta_mobile__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 28px;
    padding: 0 .7rem;
    border: 1px solid rgba(52, 182, 234, .45);
    border-radius: 999px;
    background: rgba(52, 182, 234, .12);
    color: var(--td-accent) !important;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.header_balance_cta_mobile__link .td-ico { flex: 0 0 auto; width: 14px; height: 14px; }

.header_balance_cta_mobile__link:hover,
.header_balance_cta_mobile__link:focus-visible {
    background: var(--td-accent) !important;
    border-color: var(--td-accent);
    color: #fff !important;
}

@media (max-width: 360px) {
    .header_balance_cta_mobile__link { font-size: .9rem; padding: 0 .55rem; }
}

/* the short note above the online top-up form on the Balance Increase page */
.balance_min_hint {
    margin: .1rem 0 .9rem;
    color: var(--td-muted);
    font-size: .95rem;
}

/* =========================================================================
 * SELLER_SP2_SUBMISSION_UX_20260922 - seller model submission (scoped, appended)
 * Append-only. Nothing above this line is modified: CARDFINAL, the magnifier
 * fix and the Header Balance CTA rules all stay exactly as they are.
 * ====================================================================== */
.seller-submission-progress-li{list-style:none;margin:0 0 10px;padding:0}
.seller-submission-progress{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.seller-submission-progress__step{flex:1 1 130px;min-width:110px;border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.6;text-align:center;color:#555;background:#fafafa}
.seller-submission-progress__num{display:inline-block;margin-inline-end:4px;font-weight:700}
.seller-submission-progress__step.is-active{border-color:#2e7d32;color:#1b5e20;background:#f1f8f2;font-weight:700}
.seller-submission-progress__step.is-done{color:#2e7d32;border-color:#cfe3d2}
.seller-submission-label{display:block;margin:0 0 6px;font-size:14px;font-weight:700;color:#333}
.seller-submission-req{color:#c62828}
.seller-submission-helper{font-size:13px;line-height:1.9;color:#666}
.seller-submission-card{margin-bottom:14px}
.seller-submission-card__head{margin-bottom:8px}
.seller-submission-card__title{font-size:16px;font-weight:700;color:#222}
.seller-submission-card__desc{font-size:13px;color:#666;line-height:1.9}
.seller-submission-card--link .seller-submission-link{width:100%;max-width:100%;box-sizing:border-box}
.seller-submission-uploader{max-width:100%;overflow:hidden}
.seller-submission-uploader .qq-uploader,.seller-submission-uploader .qq-upload-drop-area{max-width:100%;width:100%;box-sizing:border-box}
.seller-submission-uploader .qq-upload-list li{overflow-wrap:anywhere;word-break:break-word}
.seller-submission-note{border-radius:8px;padding:10px 12px;margin:10px 0;font-size:13px;line-height:1.9;border:1px solid rgba(0,0,0,.1);background:#f7f7f7}
.seller-submission-note__title{font-weight:700;margin-bottom:4px}
.seller-submission-note--draft{border-color:#ffe082;background:#fffde7}
.seller-submission-note--both{border-color:#90caf9;background:#f3f8ff}
.seller-submission-reason__title{font-weight:700;margin-bottom:4px;color:#c62828}
.seller-submission-reason__body{overflow-wrap:anywhere;word-break:break-word}
.seller-submission-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;line-height:2}
.seller-submission-badge--fix{background:#fdecea;color:#b71c1c}
@media (max-width:768px){
  .seller-submission-progress__step{flex:1 1 100%;min-width:0;text-align:start}
  .seller-submission-card__title{font-size:15px}
}
@media (max-width:570px){
  .seller-submission-progress{gap:6px}
  .seller-submission-progress__step{font-size:12.5px;padding:7px 9px}
  .seller-submission-label{font-size:13.5px}
}
@media (max-width:414px){
  .seller-submission-progress__step{font-size:12px}
  .seller-submission-helper{font-size:12.5px}
  .seller-submission-card--link .seller-submission-link{font-size:13px}
}
.seller-submission-cta{display:inline-block;margin-top:6px;padding:6px 12px;border-radius:6px;border:1px solid #2e7d32;color:#1b5e20;background:#f1f8f2;font-size:13px;line-height:2;text-decoration:none}
.seller-submission-cta:hover,.seller-submission-cta:focus{background:#e3f1e5;color:#124116;text-decoration:none}
.seller-submission-note--success{border-color:#a5d6a7;background:#f1f8f2}
.seller-submission-summary{border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:10px 12px;background:#fafafa}
.seller-submission-summary__row{font-size:13px;line-height:1.9;overflow-wrap:anywhere}
.seller-submission-summary__key{font-weight:700;color:#333}
.seller-submission-summary__val{color:#555}
@media (max-width:414px){
  .seller-submission-cta{display:block;text-align:center}
  .seller-submission-summary__row{font-size:12.5px}
}