/**
 * CV Maker Pro - Builder UI Fixes, Typography, Photo & Header Normalization
 * File: assets/css/builder-fixes.css
 *
 * Implements:
 * 1. Stepper Typography: exact 12px font size, Title Case (capitalize), zero forced uppercase.
 * 2. Profile Photo Distortion Fix: 90px x 90px with border-radius: 8px, aspect-ratio: 1/1,
 *    object-fit: cover, object-position: center, and zero shape selector clutter.
 * 3. Minimal & In-Block Header: flexible alignment (display: flex; gap: 8px; flex-wrap: wrap;),
 *    compact button typography and padding, preventing all visual overflow out of header container.
 * 4. Dropdown Template Switcher: clean dropdown presentation and active states.
 */

/* ==========================================================================
   1. STEPPER TYPOGRAPHY (EXACT 12PX, CAPITALIZE / TITLE CASE)
   ========================================================================== */
.cvm-stepper-pill-nav,
#cvm-stepper-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
}

.cvm-stepper-pill-nav button,
.cvm-step-pill-btn,
.cvm-step-pill,
.tab-item,
.step-button,
.cvm-step-counter-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.cvm-master-stepper-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cvm-step-counter-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: capitalize !important;
}

.cvm-btn-step-next,
.cvm-btn-step-prev {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    padding: 7px 16px !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   2. PROFILE PHOTO PREVIEW & ANTI-DISTORTION FIX (90x90, RADIUS 8PX)
   ========================================================================== */
/* Hide deprecated shape selector from HTML/CSS */
.cvm-photo-shape-selector,
.cvm-shape-pill-group,
.cvm-photo-shape-label,
.cvm-shape-pill-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Compact horizontal photo card */
.cvm-photo-uploader-box {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
}

/* Explicit 90px x 90px photo wrapper with 8px corner radius */
.profile-photo-preview,
.cvm-photo-avatar-wrap {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: #e2e8f0 !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

/* Perfect aspect ratio 1:1, object-fit: cover, object-position: center */
.profile-photo-preview img,
.cvm-photo-avatar-wrap img,
.cvm-photo-avatar-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    border-radius: 6px !important;
}

/* Perfect centering & circular radius for dashed avatar box */
.cvm-photo-avatar-box #cvm-avatar-img,
.cvm-photo-avatar-box img,
#cvm-avatar-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    transform: none !important;
}

.cvm-photo-meta-controls {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cvm-photo-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.cvm-btn-dark-select {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.02em !important;
    padding: 6px 12px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: background 0.15s ease !important;
}

.cvm-btn-photo-remove {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    padding: 5px 10px !important;
    background: transparent !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cvm-btn-photo-remove:hover {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
}

/* Also protect all A4 rendered preview images from distortion */
#cvm-preview-frame img.photo,
#cvm-preview-frame img.oxford-photo-img,
#cvm-preview-frame img,
#cv-printable-sheet img {
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 1 / 1 !important;
}

/* ==========================================================================
   3. MINIMAL & IN-BLOCK HEADER (ZERO OVERFLOW, FLEX-WRAP)
   ========================================================================== */
.cvm-master-top-bar,
#cvm-builder-header {
    min-height: 48px !important;
    height: auto !important;
    padding: 6px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.cvm-brand-area {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

.cvm-dynamic-header-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.cvm-dynamic-package-heading {
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    text-transform: capitalize !important;
}

.cvm-header-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.cvm-header-right-actions button,
.cvm-btn-master-save,
.cvm-btn-load-dummy-data {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    padding: 5px 12px !important;
    height: 30px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Preview Toolbar Row: Flex-wrap & no overflow */
.cvm-preview-toolbar-row {
    min-height: 42px !important;
    height: auto !important;
    padding: 6px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 30 !important;
}

.cvm-toolbar-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
}

.cvm-btn-ai-accent,
#cvm-btn-toolbar-ai {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    padding: 4px 10px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(0, 114, 221, 0.06) !important;
    color: #0072DD !important;
    border: 1px solid #0072DD !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.cvm-btn-tpl-dropdown-trigger {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    padding: 4px 10px !important;
    height: 30px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.cvm-toolbar-zoom-group {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
}

/* ==========================================================================
   4. EXACT 45% FORM / 55% PREVIEW RESPONSIVE LAYOUT
   ========================================================================== */
#cv-maker-builder-wrapper .cvm-master-grid-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#cv-maker-builder-wrapper .cvm-left-form-panel {
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#cv-maker-builder-wrapper .cvm-right-preview-panel {
    flex: 0 0 55% !important;
    width: 55% !important;
    max-width: 55% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 960px) {
    #cv-maker-builder-wrapper .cvm-master-grid-container {
        flex-direction: column !important;
    }
    #cv-maker-builder-wrapper .cvm-left-form-panel {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #cv-maker-builder-wrapper .cvm-right-preview-panel {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}