.ctp-seat-booking-page {
    background: var(--ctp-bg);
    max-width: 1150px;
    margin: 0 auto;
    padding: 40px 20px 100px;
    position: relative;
    overflow-x: clip;

    /*
     * اندازه صندلی‌ها متغیر است: seat-booking.js آن را بر اساس عرضِ واقعیِ
     * بخش نقشه و تعداد صندلی‌های هر ردیف محاسبه می‌کند تا سالن‌های کوچک
     * تمام عرض را پر کنند و سالن‌های بزرگ از قاب خودشان بیرون نزنند.
     */
    --ctp-seat-size: 32px;
    --ctp-seat-gap: 7px;
    --ctp-row-gap: 8px;
    --ctp-row-label-size: 22px;
}
button.ctp-seat.ctp-seat-available:focus {
    background-color: #f0b429;
}
/* هاله رنگی ملایم بالای صفحه */
.ctp-booking-glow {
    position: absolute;
    top: -40px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 460px;
    height: 300px;
    background: radial-gradient(circle, var(--ctp-accent) 0%, transparent 70%);
    opacity: 0.1;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

/* ---------- سربرگ: بخش مستقل با پوستر + عنوان + متا ---------- */
.ctp-booking-hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 18px;
    background: var(--ctp-surface);
    border: 1px solid var(--ctp-border);
    border-radius: var(--ctp-radius-lg);
    box-shadow: var(--ctp-shadow-sm);
    animation: ctp-hero-in 0.5s ease both;
}

@keyframes ctp-hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ctp-booking-poster {
    flex: 0 0 92px;
    width: 92px;
    aspect-ratio: 2 / 3;
    border-radius: var(--ctp-radius-md);
    overflow: hidden;
    border: 1px solid var(--ctp-border-strong);
    box-shadow: var(--ctp-shadow-sm);
    background: var(--ctp-surface-alt);
}

.ctp-booking-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ctp-booking-poster-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    opacity: 0.6;
}

.ctp-booking-hero-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ctp-booking-title {
    margin: 4px 0 12px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.ctp-booking-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- نشانگر مراحل ---------- */
.ctp-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 32px;
}

.ctp-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ctp-text-faint);
    font-size: 13px;
}

.ctp-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ctp-surface-alt);
    border: 1px solid var(--ctp-border-strong);
    font-size: 12px;
    font-weight: 700;
    transition: background-color .15s, color .15s, border-color .15s;
}

.ctp-step-item.is-active .ctp-step-num {
    background: var(--ctp-accent);
    color: #1a1300;
    border-color: var(--ctp-accent);
}

.ctp-step-item.is-active .ctp-step-text {
    color: var(--ctp-text);
    font-weight: 700;
}

.ctp-step-item.is-done .ctp-step-num {
    background: transparent;
    color: var(--ctp-accent);
    border-color: var(--ctp-accent);
}

.ctp-step-line {
    width: 40px;
    height: 1px;
    background: var(--ctp-border-strong);
}

/* ---------- راهنما ---------- */
.ctp-seat-legend {
    display: flex;
    gap: 18px;
    font-size: 12.5px;
    color: var(--ctp-text-dim);
    margin-bottom: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.ctp-legend-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 5px;
    margin-inline-start: 5px;
    vertical-align: middle;
}

.ctp-legend-available { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.3); }
.ctp-legend-selected { background: var(--ctp-accent); }
.ctp-legend-taken { background: #3a2020; border: 1px solid rgba(229,72,77,0.4); }
.ctp-legend-inactive { background: transparent; border: 1px dashed var(--ctp-text-faint); }

/* ---------- راهنمای بزرگ‌نمایی ---------- */
.ctp-stage-hint {
    text-align: center;
    font-size: 12.5px;
    color: var(--ctp-text-dim);
    background: var(--ctp-bg-elevated);
    border: 1px solid var(--ctp-border);
    border-radius: var(--ctp-radius-sm);
    padding: 9px 14px;
    margin-bottom: 14px;
    line-height: 1.7;
}

/* ---------- سالن/صفحه نمایش ---------- */
.ctp-theater {
    position: relative;
    background: var(--ctp-surface);
    border: 1px solid var(--ctp-border);
    border-radius: var(--ctp-radius-lg);
    padding: 14px;
    box-shadow: var(--ctp-shadow-sm);
    margin: 0 auto 90px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ناحیه‌ی دید نقشه (پن/زوم) */
.ctp-stage-viewport {
    position: relative;
    width: 100%;
    height: clamp(340px, 58vh, 560px);
    overflow: hidden;
    border-radius: var(--ctp-radius-md);
    background:
        radial-gradient(ellipse at top, rgba(240, 180, 41, 0.05), transparent 60%),
        var(--ctp-bg);
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: contain;
}

.ctp-stage-viewport:active {
    cursor: grabbing;
}

/* بوم قابل تبدیل (translate + scale) */
.ctp-stage-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    transform-origin: 0 0;
    padding: 20px 24px 28px;
    width: max-content;
    will-change: transform;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* دکمه‌های کنترل بزرگ‌نمایی */
.ctp-zoom-controls {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ctp-zoom-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    font-family: var(--ctp-font);
    color: var(--ctp-text);
    background: rgba(24, 28, 36, 0.92);
    border: 1px solid var(--ctp-border-strong);
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: var(--ctp-shadow-sm);
    transition: background-color .12s, border-color .12s, transform .08s;
}

.ctp-zoom-btn:hover {
    background: rgba(36, 42, 54, 0.96);
    border-color: var(--ctp-accent);
    color: var(--ctp-accent);
}

.ctp-zoom-btn:active {
    transform: scale(0.94);
}

.ctp-screen {
    height: 14px;
    width: var(--ctp-screen-width, 66%);
    max-width: 100%;
    margin: 4px auto 48px;
    background: linear-gradient(90deg, transparent, rgba(240, 180, 41, 0.75), transparent);
    border-radius: 50% 50% 46% 46% / 100% 100% 100% 100%;
    position: relative;
    transform: perspective(220px) rotateX(-32deg);
    box-shadow:
        0 -2px 10px rgba(240, 180, 41, 0.35),
        0 22px 48px rgba(240, 180, 41, 0.22);
}

.ctp-screen::after {
    content: '';
    position: absolute;
    inset-inline: 6%;
    top: 100%;
    height: 46px;
    background: linear-gradient(180deg, rgba(240, 180, 41, 0.14), transparent 78%);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.ctp-screen span {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--ctp-text-faint);
    white-space: nowrap;
}

.ctp-seat-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ctp-row-gap);
    min-width: max-content;
    margin: 0 auto;
}

.ctp-seat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ctp-row-label {
    width: var(--ctp-row-label-size);
    flex: 0 0 var(--ctp-row-label-size);
    text-align: center;
    font-size: calc(var(--ctp-seat-size) * 0.38);
    font-weight: 700;
    color: var(--ctp-text-faint);
}

.ctp-seat-row-seats {
    display: flex;
    gap: var(--ctp-seat-gap);
}

/* ---------- صندلی‌ها ---------- */
.ctp-seat {
    width: var(--ctp-seat-size);
    height: var(--ctp-seat-size);
    flex: 0 0 var(--ctp-seat-size);
    border-radius: calc(var(--ctp-seat-size) * 0.28) calc(var(--ctp-seat-size) * 0.28) 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ctp-text-dim);
    font-family: var(--ctp-font);
    font-size: calc(var(--ctp-seat-size) * 0.33);
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, transform .08s, color .12s;
    padding: 0;
}

.ctp-seat-available:hover:not(:disabled) {
    background: rgba(240, 180, 41, 0.18);
    border-color: var(--ctp-accent);
    color: var(--ctp-text);
}

.ctp-seat-selected {
    background: var(--ctp-accent) !important;
    border-color: var(--ctp-accent) !important;
    color: #1a1300 !important;
    font-weight: 700;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(240, 180, 41, 0.4);
    animation: ctp-seat-pop 0.22s ease;
}

@keyframes ctp-seat-pop {
    0%   { transform: scale(1); }
    55%  { transform: scale(1.22); }
    100% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ctp-booking-backdrop,
    .ctp-booking-hero { animation: none; }
    .ctp-seat-selected { animation: none; }
}

.ctp-seat-taken {
    background: #241417;
    border-color: rgba(229, 72, 77, 0.35);
    color: #7a4b4d;
    cursor: not-allowed;
}

.ctp-seat-inactive {
    background: transparent;
    border: 1px dashed var(--ctp-text-faint);
    color: var(--ctp-text-faint);
    cursor: not-allowed;
    opacity: 0.55;
}

.ctp-seat-gap {
    width: var(--ctp-seat-size);
    height: var(--ctp-seat-size);
    flex: 0 0 var(--ctp-seat-size);
    display: inline-block;
    visibility: hidden;
}

/* ---------- نوار چسبان خلاصه/ادامه ---------- */
.ctp-sticky-bar {
    position: sticky;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(24, 28, 36, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--ctp-border-strong);
    border-radius: 999px;
    padding: 10px 10px 10px 22px;
    box-shadow: var(--ctp-shadow);
    z-index: 5;
}

.ctp-sticky-info {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--ctp-text-dim);
    flex-wrap: wrap;
}

.ctp-sticky-info strong {
    color: var(--ctp-text);
}

/* ---------- مرحله ۲: فرم مشخصات ---------- */
#ctp-seat-step-2 {
    background: var(--ctp-surface);
    border: 1px solid var(--ctp-border);
    border-radius: var(--ctp-radius-lg);
    padding: 26px 22px;
    box-shadow: var(--ctp-shadow-sm);
}

.ctp-form-row {
    margin-bottom: 14px;
}

.ctp-form-row input[type="text"],
.ctp-form-row input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border-radius: var(--ctp-radius-sm);
    border: 1px solid var(--ctp-border-strong);
    background: var(--ctp-bg-elevated);
    color: var(--ctp-text);
    font-family: var(--ctp-font);
    font-size: 14px;
    outline: none;
    text-align: right;
    transition: border-color .12s;
}

.ctp-form-row input:focus {
    border-color: var(--ctp-accent);
}

.ctp-form-row ::placeholder {
    color: var(--ctp-text-faint);
}

.ctp-receive-method-div {
    background: var(--ctp-bg-elevated);
    border: 1px solid var(--ctp-border);
    padding: 16px;
    border-radius: var(--ctp-radius-md);
    color: var(--ctp-text-dim);
}

.ctp-receive-span {
    font-size: 13px;
    color: var(--ctp-text-dim);
}

.ctp-receive-method {
    margin-top: 10px;
    display: flex;
    gap: 18px;
}

.ctp-receive-method label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--ctp-text);
    cursor: pointer;
}

.ctp-alert {
    background: rgba(240, 180, 41, 0.1) !important;
    color: #f0c766 !important;
    padding: 10px 14px;
    border-radius: var(--ctp-radius-sm);
    font-size: 12.5px;
    margin-top: 12px;
}

.ctp-input-prefix {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    border: 1px solid var(--ctp-border-strong);
    border-radius: var(--ctp-radius-sm);
    padding: 0 12px;
    background: var(--ctp-bg-elevated);
    margin-top: 12px;
}

.ctp-input-prefix .prefix {
    color: var(--ctp-text-faint);
    font-size: 13px;
    margin-inline-start: 8px;
    white-space: nowrap;
}

.ctp-input-prefix input {
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    direction: ltr;
}

#ctp-seat-step-2 > button[type="submit"] {
    margin-top: 20px;
}

@media (max-width: 600px) {
    .ctp-booking-backdrop { height: 190px; }

    .ctp-booking-hero {
        gap: 14px;
        margin-top: 0px;
        margin-bottom: 26px;
    }

    .ctp-booking-poster {
        flex: 0 0 84px;
        width: 84px;
    }

    .ctp-booking-title {
        font-size: 22px;
        margin: 4px 0 10px;
    }

    /*
     * اندازه ثابت صندلی روی موبایل حذف شد؛ اندازه از متغیر --ctp-seat-size
     * می‌آید که seat-booking.js بر اساس عرض واقعی نقشه حساب می‌کند.
     */

    .ctp-sticky-bar {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--ctp-radius-md);
    }

    .ctp-sticky-bar .ctp-cta-btn {
        width: 100%;
    }

    .ctp-stage-hint, .ctp-theater.is-static, .ctp-theater {
        width: 100%;
        margin-inline: auto;
    }
}

/* =========================================================
   دسکتاپ: نمایش کامل نقشه‌ی سالن بدون حالت پنجره‌ی زوم
   ========================================================= */
.ctp-theater.is-static .ctp-stage-viewport {
    height: auto;
    max-height: none;
    /*
     * اسکرول افقی فقط زمانی ظاهر می‌شود که سالن حتی با کوچک‌ترین اندازه‌ی
     * مجاز صندلی هم در عرض بخش جا نشود؛ در غیر این صورت نقشه بیرون نمی‌زند.
     */
    overflow-x: auto;
    overflow-y: hidden;
    cursor: default;
    touch-action: auto;
}

.ctp-theater.is-static .ctp-stage-canvas {
    position: relative;
    transform: none !important;
    width: 100%;
    min-width: max-content;
    box-sizing: border-box;
}

/*
 * قابِ سالن به اندازه‌ی نقشه جمع می‌شود و وسط‌چین می‌ماند: سالن کم‌صندلی
 * یک کارت جمع‌وجورِ وسط صفحه می‌سازد (نه یک قاب پهن با نقشه‌ی گوشه‌نشین)
 * و سالن پرصندلی تا تمام عرض بخش کش می‌آید.
 */
.ctp-theater.is-static {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.ctp-theater.is-static .ctp-stage-viewport {
    width: max-content;
    max-width: 100%;
}

.ctp-theater.is-static .ctp-zoom-controls {
    display: none;
}

.ctp-stage-hint {
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   پنجره‌ی تأیید انتخاب صندلی (پاپ‌آور کنار صندلی)
   ========================================================= */
.ctp-seat-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.ctp-seat-modal[hidden] {
    display: none;
}

.ctp-seat-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.28);
    opacity: 0;
    transition: opacity .18s ease;
}

.ctp-seat-modal.is-open .ctp-seat-modal-backdrop {
    opacity: 1;
}

.ctp-seat-modal-box {
    position: fixed;
    width: 232px;
    max-width: calc(100vw - 16px);
    background: var(--ctp-surface);
    border: 1px solid var(--ctp-border-strong);
    border-radius: var(--ctp-radius-md);
    box-shadow: var(--ctp-shadow);
    padding: 14px 14px 12px;
    text-align: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity .16s ease, transform .16s ease;
}

.ctp-seat-modal.is-open .ctp-seat-modal-box {
    opacity: 1;
    transform: scale(1);
}

/* فلش اشاره‌گر به سمت صندلی */
.ctp-seat-modal-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--ctp-surface);
    border: 1px solid var(--ctp-border-strong);
    transform: rotate(45deg);
    pointer-events: none;
}

.ctp-seat-modal-box.is-above .ctp-seat-modal-arrow {
    bottom: -7px;
    border-top: none;
    border-inline-start: none;
}

.ctp-seat-modal-box.is-below .ctp-seat-modal-arrow {
    top: -7px;
    border-bottom: none;
    border-inline-end: none;
}

.ctp-seat-modal-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}

.ctp-seat-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ctp-text);
    margin: 2px 0 4px;
}

.ctp-seat-modal-info {
    font-size: 12.5px;
    color: var(--ctp-text-dim);
    margin: 0 0 4px;
}

.ctp-seat-modal-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--ctp-accent);
    min-height: 16px;
    margin-bottom: 12px;
}

.ctp-seat-modal-actions {
    display: flex;
    gap: 8px;
}

.ctp-seat-modal-actions .ctp-cta-btn {
    flex: 1;
    padding: 9px 10px !important;
    font-size: 13px !important;
}

.ctp-cta-btn.ctp-modal-danger {
    background: linear-gradient(180deg, #ef5b60, #e5484d) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(229, 72, 77, 0.3) !important;
}

@media (prefers-reduced-motion: reduce) {
    .ctp-seat-modal-backdrop,
    .ctp-seat-modal-box {
        transition: none;
    }
}

h1.entry-title {
    display: none;
}

.ctp-booking-hero-location {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 15px;
}
.ctp-booking-hero-location strong {
    color: var(--ctp-accent);
}
#ctp-step2-summary{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.ctp-ticket2{
    display:flex;
    background:#556277;
    border-radius:18px;
    overflow:hidden;
    position:relative;
}
.ctp-ticket-main {
    flex: 1;
    padding: 12px 26px;
    display: flex;
    gap: 30%;
}
.ctp-ticket-cinema {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0px;
    align-self: anchor-center;
}
.ctp-ticket-info{
    display:flex;
    gap:50px;
}
.ctp-ticket-info div{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.ctp-ticket-divider{
    width:2px;
    background:
    repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.4),
        rgba(255,255,255,.4) 6px,
        transparent 6px,
        transparent 12px
    );
    position:relative;
}
.ctp-ticket-divider::before,
.ctp-ticket-divider::after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:26px;
    height:26px;
    background: var(--ctp-surface);
    border-radius:50%;
}
.ctp-ticket-divider::before{
    top:-13px;
}

.ctp-ticket-divider::after{
    bottom:-13px;
}
.ctp-ticket-price{
    width:170px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.ctp-ticket-price strong{
    font-size:18px;
    font-weight:700;
    color:#fff;
}
@media (max-width: 600px) {

    .ctp-ticket-main {
        padding: 12px 20px;
        flex-direction: column;
        gap: 12px;
        width: 60% !important;
    }
    .ctp-ticket-price {
        width: 40%;
    }
    .ctp-ticket-cinema {
        font-size: 14px;
    }
    .ctp-ticket-info div span {
        font-size: 12px;
    }
}
/* =========================================================
   MOBILE VERIFICATION - PAGE LOCK
   ========================================================= */
html.ctp-mobile-modal-open,
body.ctp-mobile-modal-open {
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
}
/* جلوگیری از اسکرول لمسی صفحه */
body.ctp-mobile-modal-open {
    touch-action: none;
}
.ctp-mobile-modal {
    touch-action: auto;
}
/* =========================================================
   MOBILE VERIFICATION MODAL
   ========================================================= */
.ctp-mobile-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        rgba(15, 15, 18, 0.72);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* =========================================================
   MODAL BOX
   ========================================================= */
.ctp-mobile-box {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 36px 32px 30px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 24px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.10);
    text-align: center;
    animation:
        ctpMobileModalIn .35s ease;
}
@keyframes ctpMobileModalIn {
    from {
        opacity: 0;
        transform:
            translateY(22px)
            scale(.97);
    }
    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* =========================================================
   TITLE
   ========================================================= */
.ctp-mobile-box h3 {
    margin: 0 0 10px;
    color: #171717;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.5;
}
/* =========================================================
   DESCRIPTION
   ========================================================= */
.ctp-mobile-box p {
    margin: 0 auto 25px;
    max-width: 340px;
    color: #777777;
    font-size: 14px;
    line-height: 1.9;
}
/* =========================================================
   INPUT
   ========================================================= */
.ctp-mobile-box input {
    width: 100%;
    height: 54px;
    margin: 0 0 12px;
    padding: 0 18px;
    box-sizing: border-box;
    border:

        1px solid #dedede;
    border-radius: 13px;
    background: #fafafa;
    color: #171717;
    font-family: inherit;
    font-size: 16px;
    text-align: center;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}
.ctp-mobile-box input:hover {
    border-color: #c9c9c9;
}
.ctp-mobile-box input:focus {
    background: #ffffff;
    border-color: #D4AF37;
    box-shadow:
        0 0 0 4px
        rgba(212, 175, 55, .13);
}
.ctp-mobile-box input::placeholder {
    color: #a2a2a2;
}

/* =========================================================
   BUTTON
   ========================================================= */
.ctp-mobile-box button {
    width: 100%;
    height: 52px;
    margin: 0;
    border: 0;
    border-radius: 13px;
    background: #171717;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}
.ctp-mobile-box button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .16);
}
.ctp-mobile-box button:active {
    transform: translateY(0);
}
.ctp-mobile-box button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* =========================================================
   OTP SECTION
   ========================================================= */
#ctp-code-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top:
        1px dashed #dedede;
}
#ctp-code-section input {
    letter-spacing: 7px;
    font-weight: 800;
    font-size: 18px;
}
/* =========================================================
   MESSAGE
   ========================================================= */
#ctp-mobile-message {
    margin-top: 14px;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.8;
}
#ctp-mobile-message.success {
    color: #416b2d;
    background: #f4f8ef;
    border:
        1px solid #dbe8cc;
}
#ctp-mobile-message.error {
    color: #9a3434;
    background: #fff5f5;
    border:
        1px solid #f0d3d3;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 600px) {
    .ctp-mobile-modal {
        padding: 16px;
    }
    .ctp-mobile-box {
        max-width: 100%;
        padding: 30px 20px 24px;
        border-radius: 20px;
    }
    .ctp-mobile-box h3 {
        font-size: 20px;
    }
    .ctp-mobile-box p {
        margin-bottom: 21px;
        font-size: 13px;
    }
    .ctp-mobile-box input {
        height: 52px;
    }
    .ctp-mobile-box button {
        height: 50px;
    }
}

.ctp-step-panel input.ctp-mobile-number {
    display: none;
}

/* ===========================================================
   رزرو موقت صندلی (Seat Hold)
   =========================================================== */

/* ---------- صندلیِ در حال رزرو توسط کاربر دیگر: هاشورخورده ---------- */
.ctp-seat-held {
    /* هاشور مورب + پس‌زمینه خنثی تا با «فروخته‌شده» (قرمز) اشتباه نشود */
    background-color: #2a2620;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(240, 180, 41, 0.38) 0,
        rgba(240, 180, 41, 0.38) 3px,
        transparent 3px,
        transparent 7px
    );
    border-color: rgba(240, 180, 41, 0.45);
    color: rgba(240, 180, 41, 0.75);
    cursor: not-allowed;
    position: relative;
    animation: ctp-hold-breathe 2.4s ease-in-out infinite;
}

@keyframes ctp-hold-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.68; }
}

/* صندلی در انتظار پاسخ سرور */
.ctp-seat.is-pending {
    opacity: 0.55;
    pointer-events: none;
}

.ctp-legend-held {
    background-color: #2a2620;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(240, 180, 41, 0.55) 0,
        rgba(240, 180, 41, 0.55) 2px,
        transparent 2px,
        transparent 5px
    );
    border: 1px solid rgba(240, 180, 41, 0.45);
}

/* ---------- نوار شمارش معکوس ---------- */
.ctp-hold-timer[hidden] {
    display: none !important;
}

.ctp-hold-timer {
    position: sticky;
    top: 8px;
    z-index: 30;
    background: rgba(24, 28, 36, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 180, 41, 0.35);
    border-radius: var(--ctp-radius-md);
    padding: 11px 14px 9px;
    margin-bottom: 14px;
    box-shadow: var(--ctp-shadow-sm);
    animation: ctp-hold-timer-in 0.25s ease;
}

@keyframes ctp-hold-timer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ctp-hold-timer-main {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ctp-text-dim);
    line-height: 1.9;
}

.ctp-hold-timer-icon {
    font-size: 15px;
    flex: 0 0 auto;
}

.ctp-hold-timer-text {
    flex: 1 1 auto;
    min-width: 190px;
}

.ctp-hold-timer-clock {
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    color: var(--ctp-accent);
    background: var(--ctp-accent-soft);
    border-radius: 7px;
    padding: 1px 8px;
    margin: 0 3px;
    font-variant-numeric: tabular-nums;
}

.ctp-hold-release-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--ctp-border-strong);
    color: var(--ctp-text-dim);
    font-family: var(--ctp-font);
    font-size: 12px;
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}

.ctp-hold-release-btn:hover:not(:disabled) {
    color: var(--ctp-danger);
    border-color: rgba(229, 72, 77, 0.5);
    background: var(--ctp-danger-soft);
}

.ctp-hold-release-btn:disabled { opacity: 0.5; cursor: default; }

.ctp-hold-timer-track {
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.ctp-hold-timer-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: var(--ctp-accent);
    transition: width 1s linear, background-color .3s;
}

/* دو دقیقه پایانی: هشدار */
.ctp-hold-timer.is-warning {
    border-color: rgba(229, 72, 77, 0.55);
    animation: ctp-hold-pulse 1.4s ease-in-out infinite;
}

.ctp-hold-timer.is-warning .ctp-hold-timer-clock {
    color: #ff8b8e;
    background: var(--ctp-danger-soft);
}

.ctp-hold-timer.is-warning .ctp-hold-timer-fill {
    background: var(--ctp-danger);
}

@keyframes ctp-hold-pulse {
    0%, 100% { box-shadow: var(--ctp-shadow-sm); }
    50%      { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.16); }
}

/* ---------- توست اطلاع‌رسانی ---------- */
.ctp-seat-toast {
    position: fixed;
    inset-inline: 16px;
    bottom: 22px;
    z-index: 100000;
    max-width: 420px;
    margin: 0 auto;
    padding: 12px 16px;
    border-radius: var(--ctp-radius-sm);
    background: var(--ctp-surface-alt);
    border: 1px solid var(--ctp-border-strong);
    color: var(--ctp-text);
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
    box-shadow: var(--ctp-shadow);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}

.ctp-seat-toast[hidden] {
    display: none !important;
}

.ctp-seat-toast.is-visible { opacity: 1; transform: translateY(0); }
.ctp-seat-toast.is-error   { border-color: rgba(229, 72, 77, 0.55); color: #ffb4b6; }
.ctp-seat-toast.is-info    { border-color: rgba(240, 180, 41, 0.45); }
.ctp-seat-toast.is-success { border-color: rgba(70, 200, 120, 0.5); }

/* ---------- یادداشت مهلت در پنجره تأیید صندلی ---------- */
.ctp-seat-modal-hold-note {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--ctp-accent);
    background: var(--ctp-accent-soft);
    border-radius: 7px;
    padding: 6px 9px;
}

/* ---------- پنجره پایان مهلت ---------- */
.ctp-expired-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}

.ctp-expired-modal[hidden] {
    display: none !important;
}

/* تا وقتی باز نشده، هیچ کلیکی را نگیرد */
.ctp-expired-modal:not(.is-open) {
    pointer-events: none;
}

.ctp-expired-modal.is-open { opacity: 1; pointer-events: auto; }

.ctp-expired-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 10, 0.82);
    backdrop-filter: blur(4px);
}

.ctp-expired-box {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--ctp-surface);
    border: 1px solid var(--ctp-border-strong);
    border-radius: var(--ctp-radius-lg);
    padding: 26px 22px 22px;
    text-align: center;
    box-shadow: var(--ctp-shadow);
    transform: translateY(12px) scale(0.97);
    transition: transform .22s ease;
}

.ctp-expired-modal.is-open .ctp-expired-box {
    transform: translateY(0) scale(1);
}

.ctp-expired-icon {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 12px;
}

.ctp-expired-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ctp-text);
}

.ctp-expired-text {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 2;
    color: var(--ctp-text-dim);
}

.ctp-expired-text strong { color: var(--ctp-accent); }

@media (prefers-reduced-motion: reduce) {
    .ctp-seat-held,
    .ctp-hold-timer,
    .ctp-hold-timer.is-warning { animation: none; }
}

@media (max-width: 600px) {
    .ctp-hold-timer-main { font-size: 12.5px; }
    .ctp-hold-timer-text { min-width: 0; }
    .ctp-hold-release-btn { width: 100%; }
}

/* یادداشت زیر فیلد موبایلِ تاییدشده */
.ctp-mobile-verified-note {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--ctp-text-dim);
}

.ctp-mobile-verified-note::before {
    content: '✓';
    color: #46c878;
    font-weight: 700;
    margin-inline-end: 5px;
}

input[name="ctp_mobile"][readonly] {
    opacity: 0.75;
    cursor: default;
}

/* =========================================================
   پیام مسدود بودن خرید (پایان اکران / تکمیل ظرفیت)
   ========================================================= */
.ctp-booking-blocked {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 640px;
    margin: 40px auto;
    padding: 26px 24px;
    border-radius: var(--ctp-radius-lg, 20px);
    background: #181c24;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9aa0ab;
    font-family: 'YekanBakhFaNum', Tahoma, sans-serif;
    font-size: 14px;
    line-height: 2;
    text-align: center;
    direction: rtl;
}

.ctp-booking-blocked strong {
    color: #f3f4f6;
    font-size: 17px;
}

.ctp-booking-blocked.is-soldout {
    border-color: rgba(229, 72, 77, 0.3);
    background: linear-gradient(180deg, rgba(229, 72, 77, 0.08), #181c24);
}

.ctp-booking-blocked.is-soldout strong {
    color: #ff8a8d;
}

/* =========================================================
   کد تخفیف
   ========================================================= */
.ctp-discount-box {
    margin: 18px 0 14px;
    padding: 15px 16px;
    border-radius: var(--ctp-radius-md);
    background: var(--ctp-bg-elevated);
    border: 1px dashed var(--ctp-border-strong);
}

.ctp-discount-label {
    display: block;
    margin-bottom: 9px;
    color: var(--ctp-text-dim);
    font-size: 13px;
    font-weight: 700;
}

.ctp-discount-row {
    display: flex;
    gap: 9px;
}

.ctp-discount-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--ctp-radius-sm);
    border: 1px solid var(--ctp-border-strong);
    background: var(--ctp-surface);
    color: var(--ctp-text);
    font-family: var(--ctp-font);
    font-size: 14px;
    letter-spacing: 1px;
    outline: none;
    transition: border-color .12s;
}

.ctp-discount-row input[type="text"]:focus {
    border-color: var(--ctp-accent);
}

.ctp-discount-row input[readonly] {
    color: var(--ctp-accent);
    font-weight: 700;
    border-color: rgba(240, 180, 41, 0.4);
    background: var(--ctp-accent-soft);
}

.ctp-discount-apply {
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: var(--ctp-radius-sm);
    border: 1px solid var(--ctp-accent);
    background: transparent;
    color: var(--ctp-accent);
    font-family: var(--ctp-font);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .12s, opacity .12s;
}

.ctp-discount-apply:hover:not(:disabled) {
    background: var(--ctp-accent-soft);
}

.ctp-discount-apply:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ctp-discount-message {
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.9;
}

.ctp-discount-message.is-success {
    color: #61d58b;
}

.ctp-discount-message.is-error {
    color: #ff8a8d;
}

/* =========================================================
   خلاصه مبلغ
   ========================================================= */
.ctp-amount-summary {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--ctp-radius-md);
    background: var(--ctp-surface-alt);
    border: 1px solid var(--ctp-border);
}

.ctp-amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    color: var(--ctp-text-dim);
    font-size: 13px;
}

.ctp-amount-row strong {
    color: var(--ctp-text);
    font-weight: 700;
}

.ctp-amount-row.is-discount strong {
    color: #61d58b;
}

.ctp-amount-row.is-total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--ctp-border-strong);
    font-size: 14px;
}

.ctp-amount-row.is-total strong {
    color: var(--ctp-accent);
    font-size: 18px;
}

/* =========================================================
   پذیرش قوانین پیش از پرداخت
   ========================================================= */
.ctp-terms-box {
    margin-bottom: 18px;
}

.ctp-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border-radius: var(--ctp-radius-md);
    background: var(--ctp-bg-elevated);
    border: 1px solid var(--ctp-border-strong);
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}

.ctp-terms-label:hover {
    border-color: var(--ctp-accent);
}

.ctp-terms-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: var(--ctp-accent);
    cursor: pointer;
}

.ctp-terms-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.9;
}

.ctp-terms-text strong {
    color: var(--ctp-text);
    font-weight: 700;
}

.ctp-terms-text span {
    color: var(--ctp-text-dim);
    font-size: 12.5px;
}

@media (max-width: 520px) {
    .ctp-discount-row {
        flex-direction: column;
    }

    .ctp-discount-apply {
        width: 100%;
    }
}
/* =========================================================
   تاریخ و ساعت پخش در سربرگ صفحه انتخاب صندلی
========================================================= */
.ctp-booking-showtime {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-radius: var(--ctp-radius-sm);
    background: rgba(240, 180, 41, .09);
    border: 1px solid rgba(240, 180, 41, .24);
    color: #f3d38a;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.7;
}

.ctp-booking-showtime .ctp-showtime-icon {
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .ctp-booking-showtime {
        width: 100%;
        margin-bottom: 10px;
        padding: 7px 11px;
        font-size: 12px;
    }
}