/* ==========================================================
   Cardy — أنماط صفحة البطاقة
   مستخرجة من card.php: كانت 877 سطراً inline تُرسَل مع كل
   زيارة ولا تُكاش. الأنماط الديناميكية (ألوان البطاقة
   وخلفيتها) تبقى inline في card.php لأنها تعتمد على PHP.
   ========================================================== */

.customizer-section {
        margin: 25px auto 40px auto;
    }
    .customizer-card {
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 10px 35px rgba(0,0,0,0.06);
        border: 1px solid #e2e8f0;
        padding: 30px;
        overflow: hidden;
    }
    .customizer-card > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    
    /* Live Preview Column */
    .preview-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 25px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    @media (max-width: 991px) {
        .preview-column {
            position: static;
            margin-bottom: 25px;
        }
    }
    /* منصة المعاينة تتبع الشاشة لا البطاقة:
       على الشاشات الكبيرة: تكون المنصة طولية بنسبة 9:16 (1080×1920) دائماً
       لكل البطاقات. التصميم العرضي يتوسطها محتفظاً بنسبته الحقيقية، والتدرج
       العلاماتي يملأ الفراغ أعلى وأسفل البطاقة مثل شبكة الرئيسية تماماً. */
    .card-preview-stage {
        position: relative;
        width: 100%;
        max-width: 440px;
        aspect-ratio: 1080 / 1920;
        border-radius: 20px;
        box-shadow: 0 12px 36px rgba(0,0,0,0.14);
        background: linear-gradient(180deg,
            rgba(var(--brand-rgb, 41, 72, 201), 1) 0%,
            #1e293b 34%,
            #1e293b 66%,
            rgba(var(--brand-rgb, 41, 72, 201), 1) 100%);
        overflow: hidden;
        border: 2px solid rgba(255,255,255,0.08);
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .card-preview-stage:hover {
        transform: scale(1.01);
    }
    #card-canvas {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 14px;
        background: transparent;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
    }

    /* نسب الكانفس التعاقدية حسب مقاس التصميم:
       تبقى نسبة العمل الفني ثابتة وصحيحة دائماً داخل منصة العرض دون تشويه أو قص. */
    .customizer-card.fmt-square #card-canvas,
    .customizer-card.fmt-square.is-portrait #card-canvas { aspect-ratio: 1080 / 1080; }
    .customizer-card.fmt-mobile #card-canvas,
    .customizer-card.fmt-mobile.is-portrait #card-canvas { aspect-ratio: 1080 / 1920; }
    .customizer-card.fmt-a4.is-portrait     #card-canvas { aspect-ratio: 1240 / 1754; }
    .customizer-card.is-landscape #card-canvas,
    .customizer-card.fmt-a4.is-landscape    #card-canvas { aspect-ratio: 1754 / 1240; }

    .preview-live-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(15, 23, 42, 0.82);
        color: #38bdf8;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(56, 189, 248, 0.3);
        z-index: 10;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .preview-live-badge .pulse-dot {
        width: 7px;
        height: 7px;
        background: #38bdf8;
        border-radius: 50%;
        animation: pulseLive 1.5s infinite;
    }
    @keyframes pulseLive {
        0% { transform: scale(0.9); opacity: 0.7; }
        50% { transform: scale(1.3); opacity: 1; }
        100% { transform: scale(0.9); opacity: 0.7; }
    }
    .canvas-loader {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        z-index: 5;
        transition: opacity 0.3s ease;
    }
    
    /* Form & Controls Column */
    .controls-column {
        padding: 0 15px;
    }
    .customizer-title {
        font-size: 22px;
        font-weight: 800;
        color: #0f172a;
        margin-top: 0;
        margin-bottom: 8px;
        line-height: 1.35;
    }
    .customizer-subtitle {
        font-size: 13.5px;
        color: #64748b;
        margin-bottom: 22px;
        line-height: 1.5;
    }
    #card-form .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -7px;
        margin-left: -7px;
    }
    #card-form .row > [class*="col-"] {
        padding-right: 7px;
        padding-left: 7px;
    }
    .field-group {
        margin-bottom: 16px;
    }
    .field-label {
        display: block;
        margin-bottom: 6px;
        font-weight: 700;
        font-size: 13.5px;
        color: #1e293b;
    }
    .form-control-custom {
        width: 100%;
        border: 1.5px solid #cbd5e1;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14.5px;
        color: #0f172a;
        background: #f8fafc;
        transition: all 0.2s ease;
        font-family: inherit;
    }
    .form-control-custom:focus {
        border-color: var(--brand-color);
        background: #ffffff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
    }
    select.form-control-custom {
        min-height: 52px;
        line-height: 1.6;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }
    
    /* Multi-card template selectors */
    .template-picker-container {
        margin-bottom: 22px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    .template-picker-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .template-picker-header .field-label {
        margin: 0;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .template-count-badge {
        font-size: 11.5px;
        background: rgba(var(--brand-rgb, 41, 72, 201), 0.1);
        color: var(--brand-color, #2948c9);
        font-weight: 800;
        padding: 3px 12px;
        border-radius: 20px;
    }
    .template-radio-group {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .template-radio-item {
        cursor: pointer;
        text-align: center;
        border-radius: 12px;
        padding: 6px;
        border: 2px solid #e2e8f0;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        background: #fff;
        position: relative;
        flex: 0 0 calc(25% - 9px);
        max-width: 105px;
        min-width: 75px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .template-radio-item.active {
        border-color: var(--brand-color);
        background: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(var(--brand-rgb, 41, 72, 201), 0.2);
    }
    .template-radio-item:hover {
        border-color: var(--brand-color);
        transform: translateY(-2px);
    }
    .template-radio-thumb {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        background: #f1f5f9;
        aspect-ratio: 3/4;
    }
    .template-radio-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .template-check-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        background: var(--brand-color);
        color: #fff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        opacity: 0;
        transform: scale(0.6);
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    }
    .template-radio-item.active .template-check-badge {
        opacity: 1;
        transform: scale(1);
    }
    .template-radio-item span {
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin-top: 6px;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .template-radio-item.active span {
        color: var(--brand-color);
    }
    
    /* Action Buttons (Matched exactly to reference design) */
    .card-actions-row {
        display: flex;
        gap: 12px;
        margin-top: 18px;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .btn-card-action {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--brand-color, #2948c9);
        color: #ffffff !important;
        font-size: 17px;
        font-weight: 700;
        padding: 13px 20px;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 14px rgba(var(--brand-rgb, 41, 72, 201), 0.28);
        text-decoration: none !important;
        line-height: 1.2;
    }
    .btn-card-action:hover {
        filter: brightness(1.08);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(var(--brand-rgb, 41, 72, 201), 0.38);
        color: #ffffff !important;
    }
    .btn-card-action:active {
        transform: translateY(0);
    }
    .btn-card-action i {
        font-size: 17px;
    }
    
    .action-btn-share {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #25d366;
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 16px;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }
    .action-btn-share:hover {
        background: #1eb956;
        transform: translateY(-1px);
    }

    .action-btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #ffffff;
        color: #334155;
        border: 1.5px solid #cbd5e1;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none !important;
        font-weight: 700;
    }
    .action-btn-outline:hover {
        border-color: var(--brand-color, #2948c9);
        color: var(--brand-color, #2948c9);
        background: rgba(var(--brand-rgb, 41, 72, 201), 0.05);
    }

    /* Cardy Locked & Dimmed Mode Styles */
    .cardy-locked-card {
        position: relative;
    }
    .cardy-locked-card #card-canvas {
        filter: grayscale(45%) contrast(0.88) brightness(0.92);
        opacity: 0.72;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .cardy-locked-card .preview-locked-badge {
        background: rgba(225, 29, 72, 0.88) !important;
        color: #ffffff !important;
        border-color: rgba(244, 63, 94, 0.4) !important;
    }
    .cardy-locked-card .preview-locked-badge .pulse-dot {
        background: #ffffff !important;
    }
    .cardy-locked-card .field-group,
    .cardy-locked-card .template-picker-container {
        opacity: 0.55;
        pointer-events: none;
        user-select: none;
        filter: grayscale(25%);
    }
    .cardy-locked-card .btn-card-action,
    .cardy-locked-card .action-btn-share,
    .cardy-locked-card .action-btn-outline {
        opacity: 0.45 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
        filter: grayscale(100%);
        box-shadow: none !important;
    }

    /* Glassmorphic Lock Overlay over Canvas */
    .cardy-canvas-locked-overlay {
        position: absolute;
        inset: 0;
        z-index: 25;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 20px;
        text-align: center;
        pointer-events: none;
    }
    .cardy-canvas-locked-overlay .lock-icon-circle {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: rgba(225, 29, 72, 0.25);
        border: 2px solid rgba(244, 63, 94, 0.9);
        color: #ffffff;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 25px rgba(225, 29, 72, 0.4);
        animation: lockPulse 2s infinite ease-in-out;
    }
    @keyframes lockPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(225, 29, 72, 0.35); }
        50% { transform: scale(1.06); box-shadow: 0 0 32px rgba(225, 29, 72, 0.6); }
    }
    .cardy-canvas-locked-overlay .lock-overlay-title {
        color: #ffffff;
        font-size: 14.5px;
        font-weight: 800;
        letter-spacing: -0.2px;
        background: rgba(15, 23, 42, 0.78);
        padding: 6px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    /* Prominent Lock Banner in Controls Column */
    .cardy-locked-panel {
        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
        border: 1.5px solid #fecdd3;
        border-radius: 16px;
        padding: 18px 20px;
        margin-bottom: 22px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
        box-shadow: 0 4px 20px rgba(244, 63, 94, 0.08);
        direction: rtl;
        text-align: right;
    }
    .cardy-locked-panel-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 12px;
        background: #e11d48;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
    }
    .cardy-locked-panel-body {
        flex: 1;
    }
    .cardy-locked-panel-title {
        font-size: 16px;
        font-weight: 800;
        color: #9f1239;
        margin: 0 0 6px 0;
    }
    .cardy-locked-panel-desc {
        font-size: 13.5px;
        color: #881337;
        line-height: 1.65;
        margin: 0 0 14px 0;
    }
    .cardy-locked-renew-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #059669;
        color: #ffffff !important;
        padding: 9px 18px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 3px 10px rgba(5, 150, 105, 0.25);
        transition: all 0.2s ease;
    }
    .cardy-locked-renew-btn:hover {
        background: #047857;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(5, 150, 105, 0.35);
    }
    /* CTA Services Banner under Card: مكوّن موحد ومُعرّف في compact.css */

.cardy-gallery-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.cardy-gallery-modal-container {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 920px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    animation: cardyGalleryZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardyGalleryZoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.cardy-gallery-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}
.cardy-gallery-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.badge-gallery-count {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 12px;
}
.cardy-gallery-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.cardy-gallery-close-btn:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}
.cardy-gallery-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8fafc;
}
.cardy-gallery-preview-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    border-radius: 16px;
    padding: 16px;
    min-height: 280px;
}
.cardy-gallery-img-box {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#gallery-main-preview-img {
    max-height: 52vh;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: opacity 0.2s;
}
.gallery-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    font-size: 16px;
}
.gallery-nav-arrow:hover:not(:disabled) {
    background: #ffffff;
    transform: translateY(-50%) scale(1.08);
    color: var(--brand-color);
}
.gallery-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.arrow-prev { right: 12px; }
.arrow-next { left: 12px; }

.cardy-gallery-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}
.cardy-gallery-recipient-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.recipient-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}
.recipient-name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}
.cardy-gallery-buttons-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-gallery-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.btn-gallery-download {
    background: var(--brand-color);
    color: #ffffff;
    border-color: var(--brand-color);
}
.btn-gallery-download:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn-gallery-download-all {
    background: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
}
.btn-gallery-download-all:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.btn-gallery-pdf {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
.btn-gallery-pdf:hover {
    background: #fecaca;
}
.cardy-gallery-thumbnails-wrapper {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
}
.cardy-gallery-thumbnails-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}
.cardy-gallery-thumbnails-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.gallery-thumb-chip {
    padding: 7px 14px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.gallery-thumb-chip:hover {
    background: #e2e8f0;
}
.gallery-thumb-chip.active {
    background: #eff6ff;
    color: var(--brand-color);
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}
.gallery-thumb-chip .chip-idx {
    font-size: 11px;
    opacity: 0.7;
}
@media (max-width: 640px) {
    .cardy-gallery-controls-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cardy-gallery-recipient-info {
        justify-content: center;
    }
    .cardy-gallery-buttons-group {
        justify-content: center;
    }
    .btn-gallery-action {
        flex: 1;
        justify-content: center;
    }
}

/* Was inline onmouseover/onmouseout on each link. Hover is presentation,
           so CSS does it without needing script at all. */
        .related-card-link:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }


/* منتقي النموذج — قائمة منسدلة (استبدلت شبكة الصور المصغّرة) */
.template-picker-container .template-select {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    cursor: pointer;
}
.template-picker-container .template-select:focus {
    outline: none;
    border-color: var(--brand-color, #2948C9);
    box-shadow: 0 0 0 3px rgba(41, 72, 201, 0.12);
}
.template-picker-container .template-select:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
}

/* ==========================================================
   Mobile-First Layout & Touch Optimization (User Story 12)
   ========================================================== */
/* The page header is no longer mobile-only.
   The title used to be printed three times -- once here for mobile, once in
   the controls column for desktop, and the share buttons likewise had a
   desktop copy under the canvas and a mobile copy under the downloads. The
   title now sits above the card on every screen, with the template picker
   directly beneath it, and there is exactly one of each. */
.card-mobile-header {
    display: block;
    margin-bottom: 18px;
    text-align: center;
}
@media (min-width: 992px) {
    .controls-column .card-mobile-header {
        text-align: right;
        margin-bottom: 16px;
    }
}
.card-mobile-header .customizer-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.35;
}
.card-mobile-header .customizer-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* Sharing sits under the download buttons on every screen size. */
.mobile-share-section {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
    flex-wrap: wrap;
}

/* المنتقي داخل عمود التحكم يأخذ كامل عرض العمود ليحاذي الحقول تحته */
.template-picker-container {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
}

@media (max-width: 991px) {
    .customizer-card {
        padding: 20px 16px;
        border-radius: 18px;
    }
}

/* نص المدخل يبقى ١٦px لمنع تكبير iOS عند التركيز — الارتفاع وحده
   هو ما صُغِّر بعد قياس الصفحة على ٣٧٥px. */
@media (max-width: 768px) {
    .form-control-custom,
    .form-control,
    input[type="text"].form-control-custom,
    input[type="number"].form-control-custom,
    input[type="email"].form-control-custom,
    input[type="tel"].form-control-custom,
    select.form-control-custom,
    textarea.form-control-custom,
    .template-picker-container .template-select {
        font-size: 16px !important;
        min-height: 42px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .btn-card-action,
    .action-btn-share,
    .action-btn-outline {
        min-height: 44px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }
}


/* ==========================================================
   توحيد مربعات التعبئة وإخفاء أسماء الحقول — المواصفة 010
   ========================================================== */

/* أسماء الحقول تختفي بصرياً وتبقى لقارئات الشاشة.
   النص الإرشادي داخل المربع يسقط إلى اسم الحقل تلقائياً
   (placeholder = $f['placeholder'] ?: $f['name']) فلا يبقى
   الزائر بلا دليل على المطلوب. تسمية منتقي النماذج مستثناة
   لأنها عنوان قسم لا اسم حقل. */
.field-group > .field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* إطار واحد ونص واحد لكل مربعات الصفحة — بما فيها الأنواع التي
   كانت تُنسَّق على حدة: القوائم المنسدلة وحقول الأسطر والجداول. */
.customizer-card .form-control-custom,
.customizer-card select.form-control-custom,
.customizer-card textarea.form-control-custom,
.customizer-card .dynamic-line-input,
.customizer-card .table-grid-cell-input,
.customizer-card .cardy-box-input,
.template-picker-container .template-select {
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #0f172a;
    background: #f8fafc;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.customizer-card .form-control-custom:focus,
.customizer-card select.form-control-custom:focus,
.customizer-card textarea.form-control-custom:focus,
.customizer-card .cardy-line-input:focus,
.customizer-card .cardy-table-grid-widget input[type="text"]:focus,
.template-picker-container .template-select:focus {
    border-color: var(--brand-color, #2948C9);
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 41 72 201), 0.15);
}

/* اسم النموذج كان باهتاً داخل المنتقي فلا يعرف الزائر أي تصميم
   يحرّر. يرث الإطار الموحّد أعلاه، ويزيد عليه حجماً ووزناً لأنه
   القرار الأول في الصفحة. */
.template-picker-container .template-select {
    max-width: 100%;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background-color: #ffffff;
    /* الحشوة وحدها لا تضمن ارتفاعاً كافياً في عنصر select: المتصفح
       يحسب ارتفاع سطره بنفسه فيُقتطع النص من أعلاه وأسفله. ارتفاع
       أدنى صريح مع line-height يمنع الاقتطاع. */
    min-height: 52px;
    line-height: 1.6;
    height: auto;
}

/* ==========================================================
   الجوال أولاً — المعاينة لا تدفع المدخلات خارج الشاشة
   ========================================================== */
@media (max-width: 991px) {
    /* العمودان يملآن العرض كاملاً.
       الوسم يحمل col-md-5 و col-sm-12، ولا ينطبق أيٌّ منهما تحت 576px،
       فيصير العمود عنصر فلكس بلا عرض محدد فينكمش إلى مقاس محتواه: عمود
       المعاينة كان 263px من شاشة 500px ويقف في جانب واحد تاركاً 220px
       بيضاء. لا يعتمد الآن على فئة شبكة قد لا تنطبق. */
    /* الصف الخارجي يرث هامشاً سالباً -15px من الشبكة، فيخرج عرضه عن
       حشوة البطاقة ويفيض المحتوى 14px من كل جانب — وهو ما ظهر كأطراف
       مقطوعة عند حافة الشاشة. يُصفَّر هنا فيبقى كل شيء داخل الإطار. */
    .customizer-card > .row {
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .customizer-card .controls-column {
        display: contents !important;
    }

    .customizer-card .card-mobile-header {
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }

    .customizer-card .preview-column {
        order: 2;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .customizer-card .template-picker-container {
        order: 3;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0;
        margin-bottom: 14px;
    }

    .customizer-card .cardy-locked-panel {
        order: 4;
        width: 100%;
    }

    .customizer-card #card-form {
        order: 5;
        width: 100%;
    }

    .customizer-card .visitorscounter {
        order: 6;
        width: 100%;
    }

    /* منصة المعاينة على الجوال تأخذ قالباً عرضياً ثابتاً بنسبة 16:9 لكل
       البطاقات بلا استثناء، فتبقى المعاينة مدمجة والمدخلات في متناول اليد
       دون تمرير طويل. البطاقة الطولية تتوسط المنصة، ويمتد التدرج
       العلاماتي أفقياً عن يمينها وشمالها. */
    .customizer-card .card-preview-stage {
        aspect-ratio: 16 / 9;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        background: linear-gradient(90deg,
            rgba(var(--brand-rgb, 41, 72, 201), 1) 0%,
            #1e293b 34%,
            #1e293b 66%,
            rgba(var(--brand-rgb, 41, 72, 201), 1) 100%);
    }
    .customizer-card .card-preview-stage #card-canvas {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    /* المربعات والأزرار بعرض الشاشة كاملاً.
       صفوف النموذج كانت تسرّب هوامشها السالبة فتزيح المحتوى. */
    .customizer-card #card-form .row {
        margin-right: 0;
        margin-left: 0;
    }
    .customizer-card #card-form .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    .customizer-card .field-group,
    .customizer-card .form-control-custom,
    .customizer-card .card-actions-row,
    .customizer-card .mobile-share-section,
    .customizer-card .template-picker-container {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    /* أهداف لمس مريحة وخط لا يُقفز الشاشة على iOS. */
    .customizer-card .btn-card-action,
    .customizer-card .action-btn-share,
    .customizer-card .action-btn-outline {
        min-height: 50px;
        font-size: 15px;
        flex: 1 1 100%;
    }
    .customizer-card .card-actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* هامش أقل حول البطاقة يعني عرضاً أكبر للمحتوى على شاشة ضيقة. */
    .customizer-card {
        padding: 16px 12px;
    }

    /* المنتقي كان يأخذ 121px من أعلى الشاشة قبل أن تظهر البطاقة. */
    .template-picker-container {
        padding: 12px;
        margin-bottom: 14px;
    }
    .template-picker-header {
        margin-bottom: 8px;
    }

    /* العنوان أقرب إلى البطاقة. */
    .card-mobile-header {
        margin-bottom: 12px;
    }
}

/* ===== مربع رفع الصورة =====
   زر المتصفح الأصلي يعرض «لم يتم اختيار ملف» ولا يذكر أي ملف يُطلب،
   فحقلا صورة في البطاقة نفسها يبدوان متطابقين. المربع هنا يحمل اسم
   الحقل، ويستبدله باسم الملف بعد الاختيار. المدخل الأصلي يبقى في
   الصفحة — مخفياً بصرياً لا بـ display:none — كي يظل قابلاً للتركيز
   بلوحة المفاتيح ويُرسل مع النموذج. */
.cardy-file-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cardy-file-drop {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 500;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cardy-file-drop:hover {
    border-color: var(--brand-color, #2948C9);
    background: #ffffff;
}

.cardy-file-native:focus + .cardy-file-drop,
.cardy-file-drop:focus-within {
    border-color: var(--brand-color, #2948C9);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 41 72 201), 0.15);
}

.cardy-file-drop i {
    color: var(--brand-color, #2948C9);
    font-size: 17px;
    flex: 0 0 auto;
}

.cardy-file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .cardy-file-drop {
        min-height: 50px;
        font-size: 16px;
    }
}

/* ==========================================================
   شبكة الشهادات في المعرض
   ==========================================================
   كل الشهادات معروضة دفعةً واحدة ولكل واحدة زر تنزيلها، بدل
   التنقّل بالأسهم لرؤية ما عند الزائر أصلاً. */
.cardy-gallery-grid-wrapper {
    margin-top: 14px;
}

.gallery-grid-progress {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-inline-start: 8px;
}

.cardy-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px;
}

.gallery-grid-cell {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gallery-grid-cell img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: pointer;
    display: block;
}

.gallery-grid-caption {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-grid-download {
    border: 0;
    border-radius: 8px;
    background: #0f766e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 8px;
    cursor: pointer;
}

.gallery-grid-download:hover {
    background: #115e59;
}

@media (max-width: 767.98px) {
    .cardy-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        max-height: 300px;
    }
}

/* أجزاء المعرض لا تنكمش.
   جسم النافذة عمود مرن بتمرير داخلي، والعناصر المرنة تنكمش افتراضياً
   لتتّسع. فلمّا أُضيفت شبكة الشهادات وطال المحتوى، ضُغط صندوق المعاينة
   إلى حدّه الأدنى ٢٨٠px بينما الصورة ٣٧٤px، ففاضت ٤٧px فوق أزرار
   التنزيل وغطّتها. مع منع الانكماش يطول الجسم ويتمرّر كما صُمّم. */
.cardy-gallery-modal-body > * {
    flex-shrink: 0;
}