﻿/* TL_CONTACT_CAPTURE_V1: «سبدم را نگه دار» card and the iPhone-style sheet for «خبرم کن» / before leaving */
.tl-ccard, .tl-csheet {
    --cc-page: #fff; --cc-fill: #f2f2f7; --cc-ink: #000; --cc-muted: #6e6e73; --cc-line: rgba(60,60,67,.18); --cc-blue: #007aff; --cc-red: #ff3b30;
}
html[data-theme="dark"] :is(.tl-ccard, .tl-csheet) {
    --cc-page: #1c1c1e; --cc-fill: #2c2c2e; --cc-ink: #fff; --cc-muted: #98989d; --cc-line: rgba(84,84,88,.6); --cc-blue: #0a84ff; --cc-red: #ff453a;
}
.tl-ccard { margin: 14px 0; padding: 14px 16px; border-radius: 16px; background: var(--cc-page); color: var(--cc-ink); border: 1px solid var(--cc-line); direction: rtl; }
.tl-ccard[hidden], .tl-csheet[hidden], [data-contact-form][hidden] { display: none !important; }
.tl-ccard > strong { display: block; font-size: 15px; }
.tl-ccard > p, .tl-csheet__panel > p { margin: 4px 0 10px; color: var(--cc-muted); font-size: 13px; line-height: 1.8; }
[data-contact-form] { display: flex; gap: 8px; }
[data-contact-form] input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--cc-fill); color: var(--cc-ink); font: inherit; font-size: 16px; text-align: left; }
[data-contact-form] button { flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--cc-blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
[data-contact-form] button:disabled { opacity: .6; }
[data-contact-msg] { display: block; margin-top: 8px; font-size: 13px; color: #1d9661; }
[data-contact-msg]:empty { display: none; }
[data-contact-msg].is-error { color: var(--cc-red); }
.tl-csheet { position: fixed; inset: 0; z-index: 13000; direction: rtl; }
.tl-csheet__dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tl-csheet__panel { position: absolute; right: 0; bottom: 0; left: 0; margin: 0 auto; max-width: 460px; padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: var(--cc-page); color: var(--cc-ink); animation: tl-csheet-up .22s ease; }
@media (min-width: 841px) { .tl-csheet__panel { bottom: auto; top: 50%; border-radius: 18px; transform: translateY(-50%); animation: none; } }
@keyframes tl-csheet-up { from { transform: translateY(30px); opacity: 0; } }
.tl-csheet__panel > strong { display: block; padding-left: 32px; font-size: 16px; }
.tl-csheet__x { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--cc-fill); color: var(--cc-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.tl-csheet__later { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; background: transparent; color: var(--cc-blue); font: inherit; cursor: pointer; }
html.tl-csheet-open { overflow: hidden; }
.tl-price-alert-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-price-alert-button.is-on { color: #007aff; }
.tl-price-alert-button.is-on svg { fill: currentColor; }

/* TL_CHECKOUT_MOBILE_FIRST_V1: «شماره موبایل شما» at the top of the guest checkout */
.tl-checkout-mobile { --cc-page: #fff; --cc-ink: #000; --cc-muted: #6e6e73; --cc-line: rgba(60,60,67,.18); --cc-blue: #007aff; --cc-red: #ff3b30;
    display: grid; gap: 6px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--cc-page); color: var(--cc-ink); border: 1px solid var(--cc-line); direction: rtl; }
html[data-theme="dark"] .tl-checkout-mobile { --cc-page: #1c1c1e; --cc-ink: #fff; --cc-muted: #98989d; --cc-line: rgba(84,84,88,.6); --cc-blue: #0a84ff; --cc-red: #ff453a; }
.tl-checkout-mobile label { font-weight: 700; font-size: 15px; }
.tl-checkout-mobile input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--cc-line); border-radius: 12px; font: inherit; font-size: 16px; text-align: left; background: transparent; color: inherit; }
.tl-checkout-mobile input:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(10,132,255,.15); }
.tl-checkout-mobile small { font-size: 12px; color: var(--cc-muted); }
.tl-checkout-mobile small.is-error { color: var(--cc-red); }
