/* ==========================================================================
   CanadaParvaz — کامپوننت‌ها
   بعد از tokens.css و base.css بارگذاری شود. فقط از توکن‌ها استفاده می‌شود.
   همه‌ی ابعاد افقی با logical properties (inline/block) تا RTL درست باشد.
   ========================================================================== */

/* ---------- هدر چسبان شیشه‌ای ---------- */
.site-header{ position:sticky; top:0; z-index:var(--z-header); border-inline:0; border-block-start:0; }
.site-header .container{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.logo{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); font-weight:900; font-size:var(--fs-title3); color:var(--brand-text); white-space:nowrap; flex-shrink:0; }
.logo svg{ height:40px; width:auto; fill:currentColor; flex-shrink:0; }
@media (min-width:1024px){ .logo svg{ height:46px; } }
.main-nav{ min-width:0; overflow-x:auto; scrollbar-width:none; }
.main-nav::-webkit-scrollbar{ display:none; }
.main-nav ul{ display:flex; gap:var(--sp-1); flex-wrap:nowrap; }
.main-nav a{ display:inline-flex; align-items:center; min-height:40px; padding-inline:var(--sp-3); border-radius:var(--r-pill); font-size:var(--fs-subhead); font-weight:700; color:var(--ink-2); white-space:nowrap; flex-shrink:0; transition:color var(--t-fast) var(--ease-standard), background var(--t-fast) var(--ease-standard); }
.main-nav a:hover,.main-nav a[aria-current="page"]{ color:var(--ink); background:var(--surface-2); }
@media (max-width:1023px){ .main-nav{ display:none; } }      /* در موبایل tab bar جایگزین است */
.header-actions{ display:flex; align-items:center; gap:var(--sp-2); }
/* سلکتور عنصر+کلاس عمداً برای غلبه بر .btn{display:inline-flex} که بعداً در همین فایل تعریف می‌شود */
a.header-phone{ display:none; }
@media (min-width:640px){ a.header-phone{ display:inline-flex; } }
.menu-btn{ display:inline-flex; }
/* سلکتور عنصر+کلاس عمداً برای غلبه بر .icon-btn{display:grid} در patterns.css (که بعداً لود می‌شود) */
@media (min-width:1024px){ button.menu-btn{ display:none; } }      /* دسکتاپ از .main-nav استفاده می‌کند */

/* ---------- Tab Bar شناور موبایل (۵ آیتم، لینک واقعی) ---------- */
.tabbar{ position:fixed; z-index:var(--z-tabbar); inset-inline:var(--sp-3); bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); border-radius:var(--r-pill); box-shadow:var(--shadow-2); }
.tabbar ul{ display:flex; height:var(--tabbar-h); padding:var(--sp-1); }
.tabbar li{ flex:1; }
.tabbar a{ height:100%; min-height:var(--tap); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:var(--r-pill); font-size:11px; font-weight:700; line-height:1.3; color:var(--ink-2); transition:color var(--t-fast) var(--ease-standard), background var(--t-fast) var(--ease-standard), transform var(--t-med) var(--ease-spring); }
.tabbar a[aria-current="page"]{ color:var(--brand-text); background:var(--brand-soft); }
.tabbar a:active{ transform:scale(.92); }
.tabbar .icon{ width:22px; height:22px; }
@media (max-width:1023px){ body.has-tabbar{ padding-block-end:calc(var(--tabbar-h) + var(--sp-7) + env(safe-area-inset-bottom, 0px)); } }
@media (min-width:1024px){ .tabbar{ display:none; } }
/* فوتر فقط در دسکتاپ گسترده؛ در موبایل عناصر معادل در tabbar هستند */
.footer--desktop-only{ display:none; }
@media (min-width:1024px){ .footer--desktop-only{ display:block; } }

/* ---------- دکمه‌ها (کپسولی) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--tap); padding-inline:var(--sp-5); border-radius:var(--r-pill); font-size:var(--fs-callout); font-weight:800; white-space:nowrap; transition:background var(--t-fast) var(--ease-standard), transform var(--t-med) var(--ease-spring), opacity var(--t-fast); }
.btn:active{ transform:scale(.97); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.btn--filled{ background:var(--brand); color:var(--brand-ink); }
.btn--filled:hover{ background:var(--brand-hover); }
.btn--accent{ background:var(--accent); color:var(--accent-ink); }            /* فقط اکشن‌های ویژه (استعلام قیمت) */
.btn--accent:hover{ background:color-mix(in srgb, var(--accent) 88%, var(--black)); }
.btn--tinted{ background:var(--brand-soft); color:var(--brand-text); }
.btn--gray{ background:var(--surface-2); color:var(--ink); }
.btn--outline{ background:transparent; border:1.5px solid var(--brand); color:var(--brand-text); }
.btn--outline:hover{ background:var(--brand-soft); }
.btn--plain{ color:var(--brand-text); padding-inline:var(--sp-2); }
.btn--telegram{ background:var(--telegram); color:var(--on-media); }
.btn--white{ background:#fff; color:var(--brand-text); }                      /* روی باند قرمز برند */
.btn--white:hover{ background:var(--brand-soft); }
.btn--outline-white{ background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff; }
.btn--outline-white:hover{ background:rgba(255,255,255,.12); }
.btn--lg{ min-height:52px; padding-inline:var(--sp-7); font-size:var(--fs-body); }
.btn--block{ width:100%; }
.btn--icon{ width:var(--tap); padding:0; }
.btn.is-loading{ pointer-events:none; opacity:.8; }
.btn.is-loading::after{ content:""; width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-inline-end-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- نشان و چیپ ---------- */
.badge{ display:inline-flex; align-items:center; gap:var(--sp-1); min-height:26px; padding-inline:var(--sp-3); border-radius:var(--r-pill); font-size:var(--fs-caption); font-weight:800; background:var(--surface-2); color:var(--ink); }
.badge--brand{ background:var(--brand-soft); color:var(--brand-text); }
.badge--accent{ background:var(--accent-soft); color:var(--accent-text); }
.badge--success{ background:var(--success-bg); color:var(--success); }
.chip{ flex-shrink:0; white-space:nowrap; display:inline-flex; align-items:center; gap:var(--sp-2); min-height:36px; padding-inline:var(--sp-4); border-radius:var(--r-pill); background:var(--surface-2); font-size:var(--fs-subhead); font-weight:700; color:var(--ink); transition:background var(--t-fast), color var(--t-fast); }
.chip:hover{ background:var(--surface-3); }
.chip[aria-current="page"],.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.chips{ display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; padding-block:var(--sp-1); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
.chips::-webkit-scrollbar{ display:none; }

/* ---------- کارت ---------- */
.card{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.section--grouped .card{ border-color:transparent; box-shadow:var(--shadow-1); }
.card__media{ position:relative; aspect-ratio:4/3; background:var(--surface-2); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__badges{ position:absolute; inset-block-start:var(--sp-3); inset-inline-start:var(--sp-3); display:flex; gap:var(--sp-1); }
.card__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.card__eyebrow{ font-size:var(--fs-caption); font-weight:800; color:var(--ink-2); }
.card__title{ font-size:var(--fs-headline); font-weight:800; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta{ font-size:var(--fs-footnote); color:var(--ink-2); }
.card__foot{ margin-block-start:auto; padding-block-start:var(--sp-2); }
.card > a{ display:flex; flex-direction:column; height:100%; }        /* کل کارت یک لینک واقعی */

/* ---------- لیست گروه‌بندی‌شده ---------- */
.list-group{ background:var(--surface); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); }
.section--grouped .list-group{ border-color:transparent; }
.list-group li + li{ border-block-start:1px solid var(--line); }
.list-row{ display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap); padding:var(--sp-3) var(--sp-4); }
.list-row__label{ flex:1; }
.list-row__value{ color:var(--ink-2); font-size:var(--fs-subhead); }
.list-row .icon{ color:var(--brand-text); }

/* ---------- فرم ---------- */
.field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.field__label{ font-size:var(--fs-subhead); font-weight:800; }
.field__hint{ font-size:var(--fs-footnote); color:var(--ink-2); }
.field__error{ font-size:var(--fs-footnote); color:var(--danger); font-weight:700; }
.input,.select,.textarea{ width:100%; min-height:var(--tap); padding:var(--sp-3) var(--sp-4); background:var(--surface-2); border:1.5px solid transparent; border-radius:var(--r-md); font-size:16px; /* ≥16px تا iOS زوم نکند */ transition:border-color var(--t-fast), background var(--t-fast); }
.textarea{ min-height:120px; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:var(--ink-3); }
.input:hover,.select:hover,.textarea:hover{ background:var(--surface-3); }
.input:focus,.select:focus,.textarea:focus{ outline:none; background:var(--surface); border-color:var(--brand); box-shadow:0 0 0 4px var(--focus); }
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{ border-color:var(--danger); background:var(--danger-bg); }
.input[dir="ltr"]{ text-align:end; }                                          /* شماره موبایل */

/* ---------- هشدار ---------- */
.alert{ display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-subhead); background:var(--info-bg); color:var(--info); }
.alert--success{ background:var(--success-bg); color:var(--success); }
.alert--warning{ background:var(--warning-bg); color:var(--warning); }
.alert--danger{ background:var(--danger-bg); color:var(--danger); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:block; padding-block:var(--sp-3); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); font-size:var(--fs-footnote); color:var(--ink-2); }
.breadcrumb li + li::before{ content:"/"; margin-inline-end:var(--sp-1); color:var(--ink-3); }
.breadcrumb a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.breadcrumb a:hover{ color:var(--brand-text); }
.breadcrumb [aria-current="page"]{ color:var(--ink); }

/* ---------- صفحه‌بندی ---------- */
.pagination ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); }
.pagination a,.pagination span{ display:inline-grid; place-items:center; min-width:var(--tap); height:var(--tap); padding-inline:var(--sp-3); border-radius:var(--r-pill); font-weight:800; font-size:var(--fs-subhead); background:var(--surface-2); color:var(--ink); }
.pagination a:hover{ background:var(--surface-3); }
.pagination [aria-current="page"]{ background:var(--brand); color:var(--brand-ink); }
.pagination .dots{ background:transparent; }

/* ---------- FAQ بدون JS ---------- */
.faq{ display:flex; flex-direction:column; gap:var(--sp-2); }
.faq details{ background:var(--surface-2); border-radius:var(--r-md); }
.faq summary{ list-style:none; cursor:pointer; min-height:var(--tap); padding:var(--sp-4) var(--sp-5); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); font-weight:800; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:var(--fs-title2); color:var(--ink-2); transition:transform var(--t-med) var(--ease-spring); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__a{ padding:0 var(--sp-5) var(--sp-5); color:var(--ink-2); }

/* ---------- اسکلت لودینگ و حالت خالی ---------- */
.skeleton{ background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:var(--r-sm); }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.empty{ text-align:center; padding:var(--sp-10) var(--sp-4); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.empty .icon{ width:56px; height:56px; color:var(--ink-3); }

/* ---------- نوار اعتماد (بالای فوتر) ---------- */
.trust{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
.trust__item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.trust__item .icon{ width:28px; height:28px; color:var(--brand-text); }
.trust__item b{ display:block; font-size:var(--fs-subhead); font-weight:800; line-height:1.5; }
.trust__item span{ display:block; font-size:var(--fs-footnote); color:var(--ink-2); line-height:1.6; }
@media (min-width:1024px){ .trust{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---------- فوتر ---------- */
.site-footer{ background:var(--bg-grouped); color:var(--ink-2); font-size:var(--fs-subhead); padding-block-start:var(--sp-9); }
.footer__top{ display:grid; gap:var(--sp-7); padding-block-end:var(--sp-8); border-block-end:1px solid var(--line); }
.footer__brand{ display:flex; flex-direction:column; gap:var(--sp-4); max-width:46ch; }
.footer__brand .logo svg{ height:56px; }
.footer__brand p{ line-height:1.9; }
.footer__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

.footer__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-7) var(--sp-5); align-content:start; }
.footer__col h2{ font-size:var(--fs-callout); font-weight:800; color:var(--ink); margin-block-end:var(--sp-2); }
.footer__col li a{ display:inline-flex; align-items:center; min-height:var(--tap); color:var(--ink-2); transition:color var(--t-fast); }
.footer__col li a:hover{ color:var(--brand-text); text-decoration:underline; text-underline-offset:4px; }
.footer__col--contact{ grid-column:1 / -1; }

.footer__phones{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-block-end:var(--sp-4); }
.footer__phone{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); padding-inline:var(--sp-4); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:800; direction:ltr; }
.footer__addr{ display:flex; flex-direction:column; gap:var(--sp-3); margin-block-end:var(--sp-4); }
.footer__addr b{ display:block; color:var(--ink); font-size:var(--fs-subhead); }
.footer__addr span{ font-size:var(--fs-footnote); line-height:1.8; }

.socials{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.socials a{ width:var(--tap); height:var(--tap); display:grid; place-items:center; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink); transition:background var(--t-fast), color var(--t-fast), transform var(--t-med) var(--ease-spring); }
.socials a:hover{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.socials a:active{ transform:scale(.92); }

/* نشان‌های اعتماد (enamad، سازمان هواپیمایی و...) تا تصاویر واقعی جایگزین شود — داخل ستون footer__brand */
.footer__badges{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-block-start:var(--sp-2); }
.badge-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:140px; min-height:88px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--fs-caption); color:var(--ink-2); text-align:center; padding:var(--sp-3) var(--sp-2); line-height:1.4; }
.badge-placeholder__label{ font-weight:800; color:var(--ink); line-height:1.4; }

.footer__legal{ display:flex; flex-direction:column; gap:var(--sp-5); padding-block:var(--sp-6) calc(var(--sp-6) + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); font-size:var(--fs-footnote); }
.footer__legal p{ line-height:1.9; max-width:70ch; }
.footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.to-top{ display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--tap); color:var(--ink); font-weight:700; }

@media (min-width:768px){
  .footer__top{ grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); }
  .footer__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer__col--contact{ grid-column:auto; }
  .footer__legal{ flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (min-width:1024px){
  .footer__legal{ padding-block-end:var(--sp-6); }
  .footer__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); }    /* ۴ ستون (مسیرها/ایرلاین‌ها/شهرها/تماس) هم‌ردیف، بدون افتادن تماس به ردیف جدا */
}

/* ---------- Hero و پترن‌های تزئینی ---------- */
.hero{ position:relative; isolation:isolate; border-radius:var(--r-xl); background:var(--brand); color:var(--brand-ink); padding:var(--sp-8) var(--sp-6); }
.hero .t-lead{ color:color-mix(in srgb, var(--brand-ink) 82%, transparent); }
.pattern-dots{ position:relative; isolation:isolate; }
.pattern-dots::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; background-image:radial-gradient(currentColor 1px, transparent 1.5px); background-size:22px 22px; opacity:.1; -webkit-mask-image:radial-gradient(ellipse at center, var(--black) 30%, transparent 75%); mask-image:radial-gradient(ellipse at center, var(--black) 30%, transparent 75%); }
.motif{ position:absolute; pointer-events:none; z-index:-1; opacity:.12; }
.motif svg{ width:100%; height:100%; }

/* ---------- دکمه شناور تلگرام (فقط دسکتاپ؛ در موبایل معادل آن در tabbar است) ---------- */
.floating-telegram{ position:fixed; z-index:var(--z-tabbar); inset-inline-start:var(--sp-5); inset-block-end:var(--sp-5); width:52px; height:52px; border-radius:50%; background:var(--telegram); color:var(--on-media); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-2); transition:transform var(--t-fast) var(--ease-standard); }
.floating-telegram:hover{ transform:scale(1.06); }
.floating-telegram .icon{ width:26px; height:26px; }
@media (max-width:1023px){ .floating-telegram{ display:none; } }

/* ---------- فرم نظر (WordPress native comments) ---------- */
.comment-respond{ max-width:640px; }
.comment-form{ display:flex; flex-direction:column; gap:var(--sp-5); }
.comment-form .field__label{ font-size:var(--fs-subhead); font-weight:700; }
.comment-form .textarea{ min-height:140px; resize:vertical; }
.comment-form .form-submit{ margin:0; }
.comment-form .form-submit .btn{ width:100%; }
@media (min-width:768px){ .comment-form .form-submit .btn{ width:auto; min-width:200px; } }
.comment-reply-title small{ margin-inline-start:var(--sp-3); }
