@import url("/assets/css/baset-site-font.css?v=20261012-all-1");
:root {
    --support-green: #006b58;
    --support-green-dark: #073c33;
    --support-green-soft: #e6f3ef;
    --support-orange: #e7792b;
    --support-ink: #17332c;
    --support-muted: #687c76;
    --support-line: #d9e5e1;
    --support-canvas: #f4f7f5;
    --support-white: #fff;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: supportPageOut .18s ease both; }
::view-transition-new(root) { animation: supportPageIn .38s cubic-bezier(.22,1,.36,1) both; }

.support-page {
    margin-top: -110px;
    overflow: hidden;
    background: var(--support-canvas);
    color: var(--support-ink);
    font-family: IRANYekan,sans-serif;
    line-height: 1.9;
}

.support-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.support-hero {
    position: relative;
    padding: 190px 0 95px;
    scroll-margin-top: 82px;
    background:
        radial-gradient(circle at 12% 18%, rgba(231,121,43,.12), transparent 25%),
        linear-gradient(135deg, #e9f0ed, #d7e7e1);
}

.support-hero::before {
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image: linear-gradient(rgba(0,107,88,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,107,88,.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
    content: '';
    pointer-events: none;
}

.support-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: 70px; align-items: center; }
.support-hero-copy { animation: supportHeroIn .72s cubic-bezier(.22,1,.36,1) both; }
.support-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--support-green); font-size: .82rem; font-weight: 900; }
.support-eyebrow::before { width: 28px; height: 2px; background: var(--support-orange); content: ''; }
.support-hero-copy h1 { margin: 14px 0 20px; color: var(--support-green-dark); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 950; line-height: 1.35; letter-spacing: -.045em; }
.support-hero-copy > p { max-width: 540px; margin: 0 0 22px; color: var(--support-muted); font-size: 1rem; }
.support-hero-copy ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: #49665e; font-size: .88rem; font-weight: 700; }
.support-hero-copy li::before { display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; background: var(--support-orange); content: ''; }
.support-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.support-button { position: relative; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 9px 20px; border: 1px solid transparent; border-radius: 999px; font-size: .82rem; font-weight: 900; text-decoration: none; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.support-button:hover { transform: translateY(-2px); }
.support-button:active { transform: translateY(0) scale(.975); }
.support-button--accent { border-color: var(--baset-portal-bg, #018374); border-radius: 12px; background: var(--baset-portal-bg, #018374); color: var(--baset-portal-text, #fff); box-shadow: var(--baset-portal-shadow); }
.support-button--accent:hover, .support-button--accent:focus { border-color: var(--baset-portal-hover, #006f63); background: var(--baset-portal-hover, #006f63); color: #fff; box-shadow: var(--baset-portal-hover-shadow); }
.support-button--outline { border-color: rgba(0,107,88,.22); background: rgba(255,255,255,.42); color: var(--support-green-dark); }

.support-chat-card { position: relative; min-width: 0; overflow: hidden; padding: 12px; border: 1px solid #c8ddd3; border-radius: 24px; background: #fff; box-shadow: 0 20px 55px rgba(7,60,51,.12); animation: supportChatIn .82s .1s cubic-bezier(.22,1,.36,1) both; }
.support-chat-card::before { position: absolute; top: 0; right: 25px; left: 25px; height: 2px; background: linear-gradient(90deg, transparent, var(--support-orange), transparent); content: ''; }
.support-chat-heading { display: grid; grid-template-columns: 44px minmax(0,1fr) 13px; align-items: center; gap: 12px; min-height: 78px; padding: 10px 12px 16px; }
.support-chat-heading div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.support-chat-heading strong { color: var(--support-green-dark); font-size: 1rem; font-weight: 800; line-height: 1.7; }
.support-chat-heading small { color: #526c63; font-size: .8125rem; line-height: 1.8; overflow-wrap: anywhere; }
.support-chat-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, #05322b, #087a68); color: #fff; }
.support-chat-avatar svg { width: 25px; height: 25px; display: block; }
.support-chat-status { position: relative; width: 13px; height: 13px; flex: 0 0 13px; border: 3px solid #fff; border-radius: 50%; background: #18a77f; box-shadow: 0 0 0 1px rgba(24,167,127,.22); }
.support-chat-status::after { position: absolute; inset: -6px; border: 1px solid rgba(24,167,127,.45); border-radius: 50%; content: ''; animation: supportStatusPulse 2.2s ease-out infinite; }
.support-chat-card iframe { width: 100%; min-width: 0; height: 650px; min-height: 650px; display: block; border: 1px solid #e0eae5; border-radius: 16px; background: #f7faf9; animation: supportFrameIn .55s .28s ease both; }

@keyframes supportHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes supportChatIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes supportFrameIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes supportStatusPulse { 0% { opacity: .7; transform: scale(.65); } 70%,100% { opacity: 0; transform: scale(1.55); } }
@keyframes supportPageOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes supportPageIn { from { opacity: 0; transform: translateY(7px); } }

.support-main { padding: 95px 0 120px; }
.support-section-heading { margin-bottom: 35px; text-align: center; }
.support-section-heading span { color: var(--support-green); font-size: .78rem; font-weight: 900; }
.support-section-heading h2 { margin: 6px 0 0; color: var(--support-green-dark); font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 950; }
.support-section-heading--services { margin-top: 105px; }

.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.support-card { position: relative; min-height: 220px; padding: 23px; border: 1px solid var(--support-line); border-radius: 20px; background: var(--support-white); box-shadow: 0 10px 35px rgba(7,60,51,.05); transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.support-card:hover { transform: translateY(-4px); border-color: #bad6cd; box-shadow: 0 20px 48px rgba(7,60,51,.1); }
.support-card:active { transform: translateY(-1px) scale(.99); }
.support-card > a { position: relative; min-height: 114px; display: grid; grid-template-columns: 46px minmax(0,1fr) 18px; gap: 12px; align-content: start; align-items: start; overflow: hidden; color: inherit; text-decoration: none; border-radius: 12px; }
.support-card > a > div { grid-column: 2; grid-row: 1; min-width: 0; }
.support-page .support-card > a:hover, .support-page .support-card > a:focus { color: inherit; text-decoration: none; }
.support-card h3 { margin: 2px 0 7px; color: var(--support-green-dark); font-size: 1rem; font-weight: 800; line-height: 1.65; }
.support-card p { margin: 0; color: #526c63; font-size: .875rem; line-height: 1.9; overflow-wrap: anywhere; }
.support-card-contact { position: static; grid-column: 2 / -1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; padding: 8px 14px; border: 1px solid #c9dfd6; border-radius: 10px; background: var(--support-green-soft); color: var(--support-green-dark); font-size: 1.05rem; font-weight: 800; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.support-card-arrow { display: none; }
.support-icon { grid-column: 1; grid-row: 1; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #cee5da; border-radius: 13px; background: var(--support-green-soft); color: var(--support-green); font-size: 18px; }
.support-icon svg { display: block; width: 24px; height: 24px; }
.support-card--ticket { border-color: #c8ddd6; background: linear-gradient(160deg, #fff, #f1f8f4); }
.support-card-action { grid-column: 2 / -1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; padding: 9px 16px; border: 1px solid var(--baset-portal-bg, #018374); border-radius: 12px; background: var(--baset-portal-bg, #018374); color: var(--baset-portal-text, #fff); font-size: .875rem; font-weight: 700; line-height: 1.65; box-shadow: var(--baset-portal-shadow); transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.support-card--ticket > a:hover .support-card-action, .support-card--ticket > a:focus-visible .support-card-action { border-color: var(--baset-portal-hover, #006f63); background: var(--baset-portal-hover, #006f63); box-shadow: var(--baset-portal-hover-shadow); }
.support-page a:focus-visible, .support-page button:focus-visible { outline: 3px solid #018374; outline-offset: 4px; }
.support-icon i::before { font-family: 'Font Awesome 6 Free', FontAwesome; font-style: normal; font-weight: 900; }
.support-icon--chat i::before { content: '\f086'; }
.support-icon--ticket i::before { content: '\f3ff'; }
.support-icon--robot i::before { content: '\f544'; }
.support-icon--guide i::before { content: '\f059'; }
.support-icon--phone i::before { content: '\f095'; }
.support-icon--book i::before { content: '\f02d'; }
.support-icon--shield i::before { content: '\f3ed'; }
.support-icon--contract i::before { content: '\f56c'; }
.support-icon--suggestion i::before { content: '\f044'; }
.support-card--channels { padding-bottom: 19px; }
.support-card--channels > a { min-height: 114px; }
.support-channel-links { display: grid; grid-template-columns: 1fr 1.6fr; gap: 7px; margin-top: 10px; }
.support-channel-links > button, .support-channel-links > :last-child:nth-child(3) { grid-column: 1 / -1; }
.support-channel-links a, .support-channel-links button { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; overflow: hidden; padding: 7px 9px; border: 1px solid var(--support-line); border-radius: 10px; background: #f8faf9; color: #49665e; font: inherit; font-size: .8125rem; line-height: 1.7; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease; }
.support-channel-links a:hover, .support-channel-links button:hover { border-color: var(--support-green); color: var(--support-green); }
.support-channel-links a:active, .support-channel-links button:active { transform: scale(.96); }

.support-click-wave { position: absolute; z-index: 5; width: 12px; height: 12px; border-radius: 50%; background: rgba(0,107,88,.18); pointer-events: none; transform: translate(-50%,-50%) scale(0); animation: supportClickWave .48s ease-out forwards; }
@keyframes supportClickWave { to { opacity: 0; transform: translate(-50%,-50%) scale(18); } }

.support-remote { display: flex; align-items: center; justify-content: space-between; gap: 45px; margin-top: 80px; padding: 44px 50px; border-radius: 25px; background: linear-gradient(135deg, #075f50, #073c33); color: #fff; box-shadow: 0 24px 60px rgba(7,60,51,.15); }
.support-remote span { color: #8adcca; font-size: .75rem; font-weight: 900; }
.support-remote h2 { margin: 6px 0 5px; color: #fff; font-size: clamp(1.45rem,2.8vw,2.15rem); font-weight: 950; }
.support-remote p { margin: 0; color: rgba(255,255,255,.66); font-size: .82rem; }
.support-remote .support-actions { flex-shrink: 0; margin: 0; }
.support-button--light { background: #fff; color: var(--support-green-dark); }
.support-button--glass { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }

.support-service-list { display: grid; gap: 22px; }
.support-service-row { display: grid; grid-template-columns: 1.5fr .5fr; overflow: hidden; border: 1px solid var(--support-line); border-radius: 23px; background: #fff; box-shadow: 0 12px 38px rgba(7,60,51,.05); }
.support-service-row > div { padding: 43px 50px; }
.support-service-row > div > span { color: var(--support-orange); font-size: .74rem; font-weight: 950; }
.support-service-row h3 { margin: 5px 0 8px; color: var(--support-green-dark); font-size: 1.45rem; font-weight: 950; }
.support-service-row p { margin: 0 0 18px; color: var(--support-muted); font-size: .86rem; }
.support-service-row ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 25px; margin: 0; padding: 0; list-style: none; color: #49665e; font-size: .78rem; font-weight: 700; }
.support-service-row li::before { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--support-orange); content: ''; }
.support-service-row aside { display: grid; place-items: center; background: var(--support-green-soft); color: var(--support-green); font-size: 70px; }
.support-service-row--reverse { grid-template-columns: .5fr 1.5fr; }
.support-service-row--reverse > div { order: 2; }
.support-service-row--reverse aside { order: 1; background: #fff0e6; color: var(--support-orange); }

.support-motion-ready .support-card, .support-motion-ready .support-remote, .support-motion-ready .support-service-row { opacity: 0; transform: translateY(15px); }
.support-motion-ready .support-card.is-visible, .support-motion-ready .support-remote.is-visible, .support-motion-ready .support-service-row.is-visible { opacity: 1; transform: none; transition: opacity .65s ease var(--support-delay,0ms), transform .65s cubic-bezier(.22,1,.36,1) var(--support-delay,0ms), box-shadow .3s ease, border-color .3s ease; }
.support-chat-card.is-chat-focus { animation: supportChatFocus 1.15s cubic-bezier(.22,1,.36,1); }
@keyframes supportChatFocus { 0% { transform: scale(1); box-shadow: 0 25px 70px rgba(7,60,51,.13); } 38% { transform: scale(1.012); box-shadow: 0 28px 78px rgba(0,107,88,.24), 0 0 0 5px rgba(2,188,148,.12); } 100% { transform: scale(1); box-shadow: 0 25px 70px rgba(7,60,51,.13); } }

@media (max-width: 992px) {
    .support-page { margin-top: -90px; }
    .support-hero { padding-top: 155px; }
    .support-hero-grid { grid-template-columns: 1fr; gap: 50px; }
    .support-hero-copy { max-width: 720px; }
    .support-chat-card { max-width: 760px; width: 100%; margin-inline: auto; }
    .support-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .support-remote { align-items: flex-start; flex-direction: column; }
    .support-service-row, .support-service-row--reverse { grid-template-columns: 1fr .32fr; }
    .support-service-row--reverse > div { order: 1; }
    .support-service-row--reverse aside { order: 2; }
    .support-service-row ul { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .support-shell { width: min(100% - 28px, 1180px); }
    .support-hero { padding: 140px 0 65px; }
    .support-hero-copy h1 { font-size: 2.45rem; }
    .support-chat-card { padding: 8px; border-radius: 20px; }
    .support-chat-heading { padding-inline: 10px; }
    .support-chat-heading { grid-template-columns: 40px minmax(0,1fr) 10px; gap: 9px; padding: 9px 7px 14px; }
    .support-chat-heading strong { font-size: .9375rem; }
    .support-chat-heading small { font-size: .75rem; }
    .support-chat-avatar { width: 40px; height: 40px; }
    .support-chat-card iframe { height: 650px; min-height: 650px; border-radius: 15px; }
    .support-main { padding: 70px 0 90px; }
    .support-grid { grid-template-columns: 1fr; }
    .support-card { min-height: 168px; padding: 20px; }
    .support-card > a { grid-template-columns: 42px minmax(0,1fr) 16px; gap: 10px; min-height: 108px; }
    .support-icon { width: 42px; height: 42px; }
    .support-card h3 { font-size: 1rem; }
    .support-card p { font-size: .875rem; }
    .support-card-contact, .support-card-action { grid-column: 1 / -1; justify-self: stretch; }
    .support-remote { margin-top: 60px; padding: 30px 23px; border-radius: 20px; }
    .support-remote .support-actions { width: 100%; }
    .support-remote .support-button { width: 100%; }
    .support-section-heading--services { margin-top: 75px; }
    .support-service-row, .support-service-row--reverse { grid-template-columns: 1fr; }
    .support-service-row > div, .support-service-row--reverse > div { order: 1; padding: 30px 23px; }
    .support-service-row aside, .support-service-row--reverse aside { order: 2; min-height: 145px; font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root), .support-hero-copy, .support-chat-card, .support-chat-card iframe, .support-chat-status::after, .support-click-wave, .support-chat-card.is-chat-focus { animation: none !important; }
    .support-click-wave { display: none; }
    .support-card, .support-remote, .support-service-row, .support-button, .support-card-arrow { transition: none !important; }
    .support-motion-ready .support-card, .support-motion-ready .support-remote, .support-motion-ready .support-service-row { opacity: 1; transform: none; }
}

/* Active actions are real links or buttons; unavailable services are not links. */
.support-card > a,.support-card > .support-card-trigger{grid-template-columns:46px minmax(0,1fr)}
.support-card-trigger{position:relative;display:grid;align-items:start;align-content:start;gap:12px;min-height:114px;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:transparent;color:inherit;font:inherit;text-align:right;cursor:pointer}
.support-card-trigger>div{grid-column:2;grid-row:1;min-width:0}
.support-card-trigger:disabled{cursor:not-allowed}
.support-card--disabled{background:#edf0ef;border-color:#d7ddda;box-shadow:none}
.support-card--disabled:hover,.support-card--disabled:active{transform:none!important;border-color:#d7ddda;box-shadow:none}
.support-card--disabled h3,.support-card--disabled p{color:#69736f}
.support-card--disabled .support-icon{background:#e0e5e2;border-color:#cdd5d0;color:#77817c}
.support-unavailable{grid-column:2;display:block;padding-top:12px;font-size:.75rem;color:#707b75;line-height:1.8}
.support-modal-open{overflow:hidden}
.support-chat-card{scroll-margin-top:100px}
.support-dialog{position:fixed;top:50%;left:50%;right:auto;bottom:auto;margin:0;width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:28px;border:1px solid #d9e5e1;border-radius:22px;background:#fff;color:var(--support-ink);box-shadow:0 25px 80px #073c3333;transform:translate(-50%,-50%);overflow:auto;line-height:1.95;text-align:right;font:inherit}
.support-dialog[open]{animation:supportDialogIn .24s ease-out}
.support-dialog::backdrop{background:#073c3370;backdrop-filter:blur(3px)}
.support-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.support-dialog-heading h2{margin:0;font-size:1.2rem;font-weight:800;line-height:1.8;color:var(--support-green-dark)}
.support-dialog-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid var(--support-line);border-radius:12px;background:#f4f7f5;color:var(--support-green-dark);font:inherit;font-size:1.5rem;cursor:pointer}
.support-dialog p{font-size:.92rem;color:#526c63;line-height:2;margin:0 0 18px}
.support-dialog-number{display:block;width:fit-content;max-width:100%;padding:10px 18px;border:1px solid #c9dfd6;border-radius:12px;background:var(--support-green-soft);color:var(--support-green-dark);font-size:1.3rem;font-weight:800;text-decoration:none;line-height:1.8}
.support-dialog .support-actions{margin-top:22px}
.support-dialog-channels{display:grid;gap:10px}
.support-dialog-channels a{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:14px 16px;border:1px solid var(--support-line);border-radius:14px;background:#f4f9f6;color:var(--support-green-dark);text-decoration:none;transition:background-color .2s}
.support-dialog-channels a:hover{background:#e6f3ef}
.support-dialog-channels strong{font-size:.9rem}.support-dialog-channels span{font-size:.95rem;font-weight:700}.support-dialog-channels small{font-size:.78rem;color:#526c63}
@keyframes supportDialogIn{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(max-width:640px){.support-card > a,.support-card > .support-card-trigger{grid-template-columns:42px minmax(0,1fr);gap:10px}.support-unavailable{grid-column:1/-1}.support-dialog{padding:22px}.support-dialog .support-actions{flex-direction:column}.support-dialog .support-button{width:100%}.support-dialog-channels a{grid-template-columns:1fr}.support-dialog-channels span{justify-self:start}}
@media(prefers-reduced-motion:reduce){.support-dialog[open]{animation:none}.support-dialog-channels a{transition:none}}
