/* =============================================================================
   24visas-modern.css — premium design-token overlay for 24visas.com
   Server-rendered Laravel/Blade + Shoptheme100 (RTL, Persian). Loaded LAST.
   NOTE: theme sets html{font-size:62.5%} (1rem=10px) — ALL sizing here is in px.
   Additive only: tokens, type, spacing, elevation, components, states, motion, a11y.
   Revert: remove the <link> in theme/partial/head.blade.php + delete this file.
   v6 — premium polish, brand-preserving.
   ========================================================================== */

:root{
  /* brand + neutrals */
  --v-yellow:#ffcc00; --v-yellow-600:#f0be00; --v-yellow-ink:#8a6a00;
  --v-ink:#141a24; --v-ink-2:#3f4756; --v-ink-3:#6b7382;
  --v-surface:#ffffff; --v-surface-2:#f7f8fa; --v-line:#eaecf0; --v-line-2:#e0e3e9;
  --v-focus:#1b6ef3;
  /* elevation */
  --e1:0 1px 2px rgba(16,20,28,.06), 0 1px 3px rgba(16,20,28,.05);
  --e2:0 6px 16px rgba(16,20,28,.08);
  --e3:0 16px 40px rgba(16,20,28,.12);
  /* radius (8px family) */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  /* spacing (8px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* motion */
  --t:170ms cubic-bezier(.4,0,.2,1);
}

/* ---- Base ---------------------------------------------------------------- */
body{ color:var(--v-ink); line-height:1.9; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
::selection{ background:rgba(255,204,0,.35); color:var(--v-ink); }
img{ max-width:100%; height:auto; }

/* Keep theme heading SIZES (px, set by theme) — only refine leading + tracking. */
h1,h2,h3,h4,h5,h6{ line-height:1.4; letter-spacing:-.005em; color:var(--v-ink); }
h1,h2{ letter-spacing:-.015em; }

/* Brand yellow is an accent, never low-contrast body text */
[style*="color:#ffcc00"],[style*="color: #ffcc00"],
[style*="color:#FFCC00"],[style*="color: #FFCC00"]{ color:var(--v-yellow-ink) !important; }
.btn-yellow,.bg-fix{ color:var(--v-ink) !important; }

a{ transition:color var(--t), opacity var(--t); }
a:hover{ opacity:.9; }

/* ---- Accessibility: visible focus + reduced motion ---------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:3px solid var(--v-focus); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---- Typography: article / long-form ------------------------------------ */
.post_content{ font-size:17px !important; line-height:2; color:var(--v-ink); }
.post_content p,.post_content li{ font-size:17px !important; }
.post_content p{ margin:0 0 var(--s4); }
.post_content h2,.post_content h3{ margin:var(--s6) 0 var(--s3); }
.post_content ul,.post_content ol{ margin:0 0 var(--s4); padding-inline-start:22px; }
.post_content li{ margin:6px 0; }
.post_content a{ color:var(--v-yellow-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post_content img{ border-radius:var(--r); box-shadow:var(--e1); margin:var(--s4) 0; }
.post_content blockquote{
  margin:var(--s5) 0; padding:var(--s3) var(--s5); border-inline-start:4px solid var(--v-yellow);
  background:var(--v-surface-2); border-radius:var(--r-sm); color:var(--v-ink-2);
}
.post_content hr{ border:0; border-top:1px solid var(--v-line); margin:var(--s6) 0; }

/* ---- Buttons & CTAs (scoped to real CTAs, not every <button>) ------------ */
.btn-yellow,input[type=submit],input[type=button],.default-form button,.default-form [type=submit]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border-radius:var(--r-pill);
  font-weight:700; letter-spacing:.005em; cursor:pointer; border:none;
  background:var(--v-yellow); color:var(--v-ink); box-shadow:var(--e1);
  transition:transform var(--t), box-shadow var(--t), background-color var(--t);
}
.btn-yellow:hover,input[type=submit]:hover,input[type=button]:hover,
.default-form button:hover,.default-form [type=submit]:hover{
  transform:translateY(-1px); box-shadow:var(--e2); background:var(--v-yellow-600);
}
.btn-yellow:active,input[type=submit]:active{ transform:translateY(0); box-shadow:var(--e1); }
/* "read more" style links: refined text link, not a heavy button */
a.default_link{ text-decoration:none; color:var(--v-ink); font-weight:600; transition:color var(--t); }
a.default_link:hover{ color:var(--v-yellow-ink); }

/* Visa-search control: clean, right-sized button (was an oversized circle) */
a:has(img[src*="Framesearch"]){
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:56px; min-width:56px; max-width:190px; margin:0 auto; padding:0 20px;
  border-radius:var(--r); background:var(--v-yellow); box-shadow:var(--e2);
  transition:transform var(--t), box-shadow var(--t);
}
a:has(img[src*="Framesearch"]):hover{ transform:translateY(-1px); box-shadow:var(--e3); }
a:has(img[src*="Framesearch"]) img{ height:26px !important; width:auto !important; min-height:0 !important; }

/* ---- Forms & inputs ------------------------------------------------------ */
input:not([type=checkbox]):not([type=radio]),select,textarea,
.default-form input,.default-form select,.default-form textarea{
  min-height:48px; width:100%; font-size:16px !important; padding:10px 14px;
  border:1px solid var(--v-line-2); border-radius:var(--r-sm); background:var(--v-surface);
  color:var(--v-ink); transition:border-color var(--t), box-shadow var(--t);
}
textarea{ min-height:130px; padding:12px 14px; }
input:focus,select:focus,textarea:focus{
  border-color:var(--v-yellow) !important; box-shadow:0 0 0 3px rgba(255,204,0,.30) !important; outline:none;
}
::placeholder{ color:var(--v-ink-3); opacity:1; }
label{ font-weight:600; color:var(--v-ink-2); }

/* ---- Cards --------------------------------------------------------------- */
.default-blog-news{
  border:1px solid var(--v-line) !important; border-radius:var(--r-lg); background:var(--v-surface);
  box-shadow:var(--e1); overflow:hidden; transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.default-blog-news:hover{ transform:translateY(-4px); box-shadow:var(--e3); border-color:var(--v-line-2) !important; }
.default-blog-news .img-holder img,.blog-section img.rounded-2xl{ border-radius:12px; object-fit:cover; }

/* ---- Badges / meta chips (category, date on cards) ---------------------- */
.default-blog-news .basis-1\/4,.default-blog-news .post_cat a{ color:var(--v-ink-2); }
.post_cat a,.tag{ letter-spacing:0; }

/* ---- Tables (visa price / info tables) ----------------------------------- */
.post_content table,.contact_us table,table.table,section table{
  width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--v-line);
  border-radius:var(--r); overflow:hidden; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
section table th,section table td,.post_content table th,.post_content table td{
  padding:12px 16px; border-bottom:1px solid var(--v-line); text-align:start;
}
section table thead th,.post_content table thead th{ background:var(--v-surface-2); font-weight:700; color:var(--v-ink); }
section table tr:last-child td{ border-bottom:none; }

/* ---- FAQ / accordion breathing room ------------------------------------- */
.questions .accordion,.faq-item,[class*="accordion"]{ border-radius:var(--r-sm); }

/* ---- Elevation / declutter: soften stray heavy borders ------------------ */
.section-title{ margin-bottom:var(--s5); }

/* ---- Motion: interactive only (safe; never hides content) ---------------- */
/* Card/button/link transitions are defined inline above. No opacity:0 states,
   so nothing can get stuck invisible if JS/animation is interrupted. */

/* ---- Trust badges tidy --------------------------------------------------- */
img[src*="enamad"],img[src*="trustseal"]{ background:#fff; border-radius:8px; }

/* ---- Mobile refinements -------------------------------------------------- */
@media (max-width:640px){
  .post_content,.post_content p,.post_content li{ font-size:16px !important; line-height:1.95; }
  nav a,.breadcumb-wrapper a{ display:inline-block; min-height:44px; }
  .section-title{ margin-bottom:var(--s4); }
  .default-blog-news{ border-radius:var(--r); }
}