/* ==========================================================================
   سواعد العقارية - نظام تنسيقات لوحة تحكم الصفحات التسويقية (UI/UX الاحترافي)
   Sawaed Marketing Pages Editor - Dedicated High-End UI/UX Styles
   ========================================================================== */

:root {
    --mkt-primary: #0d3b37;
    --mkt-primary-dark: #082623;
    --mkt-accent: #c5a059;
    --mkt-accent-hover: #b38e44;
    --mkt-bg-card: #ffffff;
    --mkt-bg-input: #f8fafc;
    --mkt-bg-input-focus: #ffffff;
    --mkt-border-card: #e2e8f0;
    --mkt-border-input: #cbd5e1;
    --mkt-border-input-hover: #94a3b8;
    --mkt-text-main: #0f172a;
    --mkt-text-label: #1e293b;
    --mkt-text-muted: #64748b;
}

/* Master Container */
.mkt-editor-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
    padding-bottom: 40px !important;
}

/* Top Overview Banner */
.mkt-top-banner {
    background: linear-gradient(135deg, #0d3b37 0%, #154c46 60%, #082623 100%) !important;
    color: #ffffff !important;
    border-radius: 18px !important;
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 25px -5px rgba(13, 59, 55, 0.25) !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.mkt-top-banner-title {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.mkt-top-banner-sub {
    font-size: 0.85rem !important;
    color: #cbd5e1 !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

/* Live Integration Status Banner (PMS & Dev) */
.mkt-live-banner {
    background: #f0fdf4 !important;
    border: 2px dashed #10b981 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
}

/* Editor Cards */
.mkt-card {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mkt-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

.mkt-card-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

.mkt-card-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--mkt-primary) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Visual Location Badge */
.mkt-badge-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1.5px solid #a7f3d0 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
}

.mkt-badge-amber {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1.5px solid #fde68a !important;
}

/* Form Groups & Labels */
.mkt-form-group {
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mkt-label {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.mkt-hint {
    display: block !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   EDITABLE INPUTS & TEXTAREAS - THE CORE UI/UX REQUIREMENTS
   1. Wide and clear (width: 100%)
   2. High contrast prominent 2px border
   3. Distinct background color (#f8fafc) so user knows it's editable
   ========================================================================== */
.mkt-editor-container input[type="text"],
.mkt-editor-container input[type="url"],
.mkt-editor-container input[type="tel"],
.mkt-editor-container input[type="email"],
.mkt-editor-container input[type="number"],
.mkt-editor-container textarea,
.mkt-editor-container select,
.mkt-input,
.mkt-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: #f8fafc !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.6 !important;
    font-family: inherit !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.mkt-editor-container input[type="text"]:hover,
.mkt-editor-container input[type="url"]:hover,
.mkt-editor-container input[type="tel"]:hover,
.mkt-editor-container input[type="email"]:hover,
.mkt-editor-container textarea:hover,
.mkt-input:hover,
.mkt-textarea:hover {
    border-color: #94a3b8 !important;
    background-color: #ffffff !important;
}

.mkt-editor-container input[type="text"]:focus,
.mkt-editor-container input[type="url"]:focus,
.mkt-editor-container input[type="tel"]:focus,
.mkt-editor-container input[type="email"]:focus,
.mkt-editor-container textarea:focus,
.mkt-input:focus,
.mkt-textarea:focus {
    outline: none !important;
    border-color: #0d3b37 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(13, 59, 55, 0.15), inset 0 1px 2px rgba(0,0,0,0.02) !important;
}

.mkt-editor-container textarea,
.mkt-textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

.mkt-textarea-lg {
    min-height: 160px !important;
}

.mkt-textarea-xl {
    min-height: 220px !important;
}

/* Grids - Solid CSS Grid not dependent on Tailwind */
.mkt-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mkt-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mkt-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mkt-col-span-2 {
    grid-column: span 2 / span 2 !important;
}

.mkt-col-span-3 {
    grid-column: span 3 / span 3 !important;
}

.mkt-col-span-4 {
    grid-column: span 4 / span 4 !important;
}

@media (max-width: 900px) {
    .mkt-grid-2,
    .mkt-grid-3,
    .mkt-grid-4 {
        grid-template-columns: 1fr !important;
    }
    .mkt-col-span-2,
    .mkt-col-span-3,
    .mkt-col-span-4 {
        grid-column: span 1 / span 1 !important;
    }
}

/* Sub-card (e.g. for individual service items, values, stats) */
.mkt-subcard {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 18px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mkt-subcard:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.mkt-subcard-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 10px !important;
}

.mkt-subcard-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    color: #0d3b37 !important;
}

.mkt-subcard-num {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #0d3b37 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
}

/* Buttons */
.mkt-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #c5a059 0%, #b38e44 100%) !important;
    color: #0d3b37 !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.35) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.mkt-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(197, 160, 89, 0.45) !important;
    background: linear-gradient(135deg, #d4ae63 0%, #c5a059 100%) !important;
}

.mkt-btn-teal {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #0d3b37 !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(13, 59, 55, 0.25) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.mkt-btn-teal:hover {
    background: #082623 !important;
    transform: translateY(-1px) !important;
}

.mkt-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.mkt-btn-outline:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* Sticky Bottom Bar */
.mkt-sticky-bar {
    position: sticky !important;
    bottom: 16px !important;
    z-index: 40 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px 24px !important;
    margin-top: 24px !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.mkt-sticky-status {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: #334155 !important;
}

.mkt-pulse-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important;
}

/* Toggle Switch Styles */
.mkt-toggle-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
}

.mkt-toggle-input {
    width: 44px !important;
    height: 24px !important;
    cursor: pointer !important;
    accent-color: #0d3b37 !important;
}

/* ==========================================================================
   تكييف واجهات تحرير الصفحات التسويقية للهواتف والتابلت والآيفون
   ========================================================================== */
@media (max-width: 900px) {
    .mkt-top-banner {
        padding: 18px 20px !important;
        border-radius: 14px !important;
    }
    .mkt-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }
    .mkt-sticky-bar {
        padding: 12px 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
        bottom: 10px !important;
    }
    .mkt-sticky-bar .mkt-btn-primary {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 640px) {
    .mkt-grid-2,
    .mkt-grid-3,
    .mkt-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .mkt-input,
    .mkt-textarea,
    .mkt-select {
        font-size: 16px !important; /* iOS Safari auto-zoom prevention */
        min-height: 44px !important;
        padding: 10px 12px !important;
    }
}