/* ==========================================================================
   CoachProAI Template Generator — sab kuch .cpaitg- prefix ke sath.
   Koi <select>, <ul>, <nav> ya "menu" class use nahi hui — taake
   header ke mega menu CSS/JS se koi bhi takraav na ho.

   NOTE: Bohat se WordPress themes apne "button" element par global
   CSS laga dete hain (rounded orange gradient waghera). Isse hamare
   plain buttons par bhi color "leak" ho sakta hai. Isliye neeche har
   zaroori property par !important laga kar theme ke defaults ko
   pakka override kiya gaya hai — taake yeh widget har theme mein
   hamesha waisa hi dikhe jaisa hum design kar rahe hain.
   ========================================================================== */

.cpaitg-wrapper,
.cpaitg-wrapper * {
    box-sizing: border-box !important;
}

.cpaitg-wrapper {
    --cpaitg-brand-start: #F97316; /* CoachProAI ka orange (dark end) */
    --cpaitg-brand-end: #FDBA74;   /* CoachProAI ka orange (light end) */

    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    font-family: Arial, sans-serif !important;
    line-height: 1.5;
    isolation: isolate; /* apni stacking context, mega menu ke z-index se mehfooz */
    overflow-wrap: anywhere;
}

.cpaitg-heading {
    margin: 0 0 4px 0;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.3;
}

.cpaitg-subheading {
    margin: 0 0 20px 0;
    color: #666 !important;
    background: none !important;
    font-size: 14px;
}

.cpaitg-field {
    margin-bottom: 18px;
    width: 100%;
}

.cpaitg-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 13px;
    color: #222 !important;
    background: none !important;
}

.cpaitg-input {
    display: block;
    width: 100% !important;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd !important;
    border-radius: 6px;
    background: #fff !important;
    color: #333 !important;
    font-size: 14px;
    font-family: inherit !important;
}

/* ---- Pill / segmented button group (dropdown/menu ki jagah) ---- */
.cpaitg-option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

/* Base pill button — theme ke global button style se pura mehfooz */
.cpaitg-wrapper .cpaitg-option-btn,
.cpaitg-wrapper .cpaitg-swatch-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 9px 16px !important;
    border: 1.5px solid #e2e2e2 !important;
    border-radius: 999px !important;
    background: #f6f6f6 !important;
    background-image: none !important;
    color: #333 !important;
    font-size: 13px;
    font-weight: 600;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

.cpaitg-wrapper .cpaitg-option-btn:hover,
.cpaitg-wrapper .cpaitg-swatch-btn:hover {
    background: #fff3e8 !important;
    border-color: var(--cpaitg-brand-start) !important;
    color: #333 !important;
}

/* Quick Preset — active state ab brand orange gradient + white text hai (blue nahi) */
.cpaitg-wrapper .cpaitg-option-btn.is-active {
    background: linear-gradient(135deg, var(--cpaitg-brand-start), var(--cpaitg-brand-end)) !important;
    background-image: linear-gradient(135deg, var(--cpaitg-brand-start), var(--cpaitg-brand-end)) !important;
    border-color: var(--cpaitg-brand-start) !important;
    color: #fff !important;
    font-weight: 700;
}

/* Color Scheme swatches — active state apne hi rang ko halka gradient bana kar dikhata hai */
.cpaitg-wrapper .cpaitg-swatch-btn.is-active {
    background: linear-gradient(135deg, var(--cpaitg-swatch, var(--cpaitg-brand-start)), var(--cpaitg-swatch, var(--cpaitg-brand-end))) !important;
    background-image: linear-gradient(135deg, var(--cpaitg-swatch, var(--cpaitg-brand-start)) 0%, color-mix(in srgb, var(--cpaitg-swatch, var(--cpaitg-brand-start)) 60%, #fff) 100%) !important;
    border-color: var(--cpaitg-swatch, var(--cpaitg-brand-start)) !important;
    color: #fff !important;
    font-weight: 700;
}

.cpaitg-swatch-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cpaitg-swatch, #999) !important;
    display: inline-block;
    flex-shrink: 0;
}

/* ---- Generate button (yeh hamesha brand orange gradient + safed text) ---- */
.cpaitg-wrapper .cpaitg-generate-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    background: linear-gradient(135deg, var(--cpaitg-brand-start), var(--cpaitg-brand-end)) !important;
    background-image: linear-gradient(135deg, var(--cpaitg-brand-start), var(--cpaitg-brand-end)) !important;
    color: #fff !important;
    border: none !important;
    padding: 13px 24px !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px !important;
    cursor: pointer;
    margin: 10px 0 24px 0;
    text-shadow: none !important;
}

.cpaitg-wrapper .cpaitg-generate-btn:hover {
    opacity: 0.92;
}

.cpaitg-wrapper .cpaitg-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Results (jab tak generate na ho, khali box nazar nahi aata) ---- */
.cpaitg-results {
    display: none;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.cpaitg-results.is-visible {
    display: flex;
}

.cpaitg-preview-col {
    flex: 2 1 280px;
    min-width: 0;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    background: #fafafa;
    overflow-x: auto;
}

.cpaitg-preview-col img,
.cpaitg-preview-col table {
    max-width: 100%;
}

.cpaitg-download-col {
    flex: 1 1 200px;
    min-width: 0;
}

.cpaitg-wrapper .cpaitg-download-btn {
    display: inline-block !important;
    background: #059669 !important;
    background-image: none !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
}

.cpaitg-success {
    background: #f0fdf4 !important;
    border-left: 4px solid #059669;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #14532d !important;
}

.cpaitg-error {
    background: #fef2f2 !important;
    border-left: 4px solid #dc2626;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #7f1d1d !important;
}

/* ==========================================================================
   Responsive breakpoints — har screen size par fit
   ========================================================================== */

/* Tablets */
@media (max-width: 768px) {
    .cpaitg-wrapper {
        padding: 20px;
    }
    .cpaitg-results {
        flex-direction: column;
    }
    .cpaitg-preview-col,
    .cpaitg-download-col {
        flex-basis: auto;
        width: 100%;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .cpaitg-wrapper {
        padding: 14px;
        border-radius: 8px;
    }
    .cpaitg-option-group {
        gap: 6px;
    }
    .cpaitg-wrapper .cpaitg-option-btn,
    .cpaitg-wrapper .cpaitg-swatch-btn {
        padding: 8px 12px !important;
        font-size: 12.5px;
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
    .cpaitg-wrapper .cpaitg-generate-btn {
        width: 100%;
        justify-content: center;
    }
    .cpaitg-wrapper .cpaitg-download-btn {
        width: 100%;
        text-align: center;
    }
}

/* Bohat chote screens (purane phones) */
@media (max-width: 360px) {
    .cpaitg-heading {
        font-size: 17px;
    }
    .cpaitg-wrapper .cpaitg-option-btn,
    .cpaitg-wrapper .cpaitg-swatch-btn {
        font-size: 12px;
        padding: 7px 10px !important;
    }
}