/**
 * GalyamStudio CTA+POPUP - Frontend Styles
 * 
 * @package GS_CTA
 * @version 1.2.0
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --gs-ctapopup-primary: #3580AA;
    --gs-ctapopup-primary-hover: #2a6a8a;
    --gs-ctapopup-primary-light: #e8f4fc;
    --gs-ctapopup-accent: #FACA00;
    --gs-ctapopup-accent-hover: #d4aa00;
    --gs-ctapopup-success: #28a745;
    --gs-ctapopup-success-light: #d4edda;
    --gs-ctapopup-error: #dc3545;
    --gs-ctapopup-error-light: #f8d7da;
    --gs-ctapopup-text: #333333;
    --gs-ctapopup-text-light: #666666;
    --gs-ctapopup-border: #dee2e6;
    --gs-ctapopup-bg: #ffffff;
    --gs-ctapopup-overlay: rgba(0, 0, 0, 0.6);
    --gs-ctapopup-radius: 8px;
    --gs-ctapopup-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --gs-ctapopup-transition: 0.3s ease;
}

/* ==========================================================================
   Body Lock
   ========================================================================== */
body.gs-ctapopup-body-locked {
    overflow: hidden;
}

/* Legacy support */
body.gs-body-locked {
    overflow: hidden;
}

/* ==========================================================================
   Wrapper - CRITICAL: Full width for alignment to work
   ========================================================================== */
.gs-ctapopup-wrapper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    direction: rtl;
    font-family: inherit;
    box-sizing: border-box !important;
}

/* Legacy support - old class name */
.gs-cta-container {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    direction: rtl;
    font-family: inherit;
    box-sizing: border-box !important;
}

.gs-ctapopup-wrapper *,
.gs-ctapopup-wrapper *::before,
.gs-ctapopup-wrapper *::after {
    box-sizing: inherit;
}

/* ==========================================================================
   CTA Button (base styles - colors overridden by inline styles)
   ========================================================================== */
.gs-ctapopup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    border-radius: var(--gs-ctapopup-radius);
    cursor: pointer;
    transition: all var(--gs-ctapopup-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    flex-shrink: 0;
}

/* Legacy support */
.gs-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    border-radius: var(--gs-ctapopup-radius);
    cursor: pointer;
    transition: all var(--gs-ctapopup-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    flex-shrink: 0;
}

.gs-ctapopup-btn:hover,
.gs-ctapopup-btn:focus,
.gs-cta-btn:hover,
.gs-cta-btn:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.gs-ctapopup-btn:active,
.gs-cta-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   Modal Overlay
   ========================================================================== */
.gs-ctapopup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--gs-ctapopup-overlay);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gs-ctapopup-transition), visibility var(--gs-ctapopup-transition);
}

/* Legacy support */
.gs-cta-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--gs-ctapopup-overlay);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gs-ctapopup-transition), visibility var(--gs-ctapopup-transition);
}

.gs-ctapopup-overlay.gs-ctapopup-overlay-visible,
.gs-cta-overlay.gs-cta-overlay-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Modal Dialog
   ========================================================================== */
.gs-ctapopup-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    background: var(--gs-ctapopup-bg);
    border-radius: var(--gs-ctapopup-radius);
    box-shadow: var(--gs-ctapopup-shadow);
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--gs-ctapopup-transition);
}

/* Legacy support */
.gs-cta-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    background: var(--gs-ctapopup-bg);
    border-radius: var(--gs-ctapopup-radius);
    box-shadow: var(--gs-ctapopup-shadow);
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--gs-ctapopup-transition);
}

.gs-ctapopup-overlay.gs-ctapopup-overlay-visible .gs-ctapopup-modal,
.gs-cta-overlay.gs-cta-overlay-visible .gs-cta-modal {
    transform: scale(1) translateY(0);
}

.gs-ctapopup-modal::-webkit-scrollbar,
.gs-cta-modal::-webkit-scrollbar {
    width: 6px;
}

.gs-ctapopup-modal::-webkit-scrollbar-track,
.gs-cta-modal::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.gs-ctapopup-modal::-webkit-scrollbar-thumb,
.gs-cta-modal::-webkit-scrollbar-thumb {
    background: var(--gs-ctapopup-border);
    border-radius: 3px;
}

/* ==========================================================================
   Close Button
   ========================================================================== */
.gs-ctapopup-close,
.gs-cta-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--gs-ctapopup-text-light);
    cursor: pointer;
    transition: all var(--gs-ctapopup-transition);
    z-index: 10;
}

.gs-ctapopup-close:hover,
.gs-ctapopup-close:focus,
.gs-cta-close:hover,
.gs-cta-close:focus {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gs-ctapopup-text);
}

.gs-ctapopup-close:focus,
.gs-cta-close:focus {
    outline: 2px solid var(--gs-ctapopup-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Modal Content
   ========================================================================== */
.gs-ctapopup-content,
.gs-cta-content {
    padding: 30px;
}

.gs-ctapopup-title,
.gs-cta-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--gs-ctapopup-primary);
    text-align: center;
}

.gs-ctapopup-subtitle,
.gs-cta-subtitle {
    margin: 0 0 25px 0;
    font-size: 14px;
    color: var(--gs-ctapopup-text-light);
    text-align: center;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */
.gs-ctapopup-form,
.gs-cta-form {
    direction: rtl;
}

.gs-ctapopup-fields,
.gs-cta-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gs-ctapopup-field,
.gs-cta-field {
    position: relative;
}

.gs-ctapopup-field-half,
.gs-cta-field-half {
    grid-column: span 1;
}

.gs-ctapopup-field-full,
.gs-cta-field-full {
    grid-column: span 2;
}

.gs-ctapopup-field label,
.gs-cta-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gs-ctapopup-text);
}

.gs-ctapopup-required,
.gs-cta-required {
    color: var(--gs-ctapopup-error);
}

.gs-ctapopup-field input,
.gs-ctapopup-field select,
.gs-ctapopup-field textarea,
.gs-cta-field input,
.gs-cta-field select,
.gs-cta-field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    color: var(--gs-ctapopup-text);
    background: var(--gs-ctapopup-bg);
    border: 1px solid var(--gs-ctapopup-border);
    border-radius: 6px;
    transition: border-color var(--gs-ctapopup-transition), box-shadow var(--gs-ctapopup-transition);
    -webkit-appearance: none;
    appearance: none;
}

.gs-ctapopup-field input:focus,
.gs-ctapopup-field select:focus,
.gs-ctapopup-field textarea:focus,
.gs-cta-field input:focus,
.gs-cta-field select:focus,
.gs-cta-field textarea:focus {
    outline: none;
    border-color: var(--gs-ctapopup-primary);
    box-shadow: 0 0 0 3px var(--gs-ctapopup-primary-light);
}

.gs-ctapopup-field select,
.gs-cta-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 36px;
    cursor: pointer;
}

.gs-ctapopup-field textarea,
.gs-cta-field textarea {
    resize: vertical;
    min-height: 80px;
}

.gs-ctapopup-field input[dir="ltr"],
.gs-ctapopup-field textarea[dir="ltr"],
.gs-cta-field input[dir="ltr"],
.gs-cta-field textarea[dir="ltr"] {
    text-align: left;
}

.gs-ctapopup-field input::placeholder,
.gs-cta-field input::placeholder {
    color: #aaa;
}

/* ==========================================================================
   Field Errors
   ========================================================================== */
.gs-ctapopup-field-invalid input,
.gs-ctapopup-field-invalid select,
.gs-ctapopup-field-invalid textarea,
.gs-cta-field-invalid input,
.gs-cta-field-invalid select,
.gs-cta-field-invalid textarea {
    border-color: var(--gs-ctapopup-error);
}

.gs-ctapopup-field-invalid input:focus,
.gs-ctapopup-field-invalid select:focus,
.gs-ctapopup-field-invalid textarea:focus,
.gs-cta-field-invalid input:focus,
.gs-cta-field-invalid select:focus,
.gs-cta-field-invalid textarea:focus {
    box-shadow: 0 0 0 3px var(--gs-ctapopup-error-light);
}

.gs-ctapopup-error,
.gs-cta-error {
    display: block;
    min-height: 18px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gs-ctapopup-error);
}

/* ==========================================================================
   City Autocomplete
   ========================================================================== */
.gs-ctapopup-field-city,
.gs-cta-field-city {
    position: relative;
}

.gs-ctapopup-cities,
.gs-cta-cities {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 2px;
    background: var(--gs-ctapopup-bg);
    border: 1px solid var(--gs-ctapopup-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.gs-ctapopup-cities.gs-ctapopup-cities-visible,
.gs-cta-cities.gs-cta-cities-visible {
    display: block;
}

.gs-ctapopup-city-option,
.gs-cta-city-option {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--gs-ctapopup-transition);
}

.gs-ctapopup-city-option:hover,
.gs-ctapopup-city-option.gs-ctapopup-city-selected,
.gs-cta-city-option:hover,
.gs-cta-city-option.gs-cta-city-selected {
    background: var(--gs-ctapopup-primary-light);
}

/* ==========================================================================
   Submit Button
   ========================================================================== */
.gs-ctapopup-actions,
.gs-cta-actions {
    margin-top: 24px;
}

.gs-ctapopup-submit,
.gs-cta-submit {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: linear-gradient(135deg, var(--gs-ctapopup-accent), var(--gs-ctapopup-accent-hover));
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--gs-ctapopup-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gs-ctapopup-submit:hover:not(:disabled),
.gs-ctapopup-submit:focus:not(:disabled),
.gs-cta-submit:hover:not(:disabled),
.gs-cta-submit:focus:not(:disabled) {
    background: linear-gradient(135deg, var(--gs-ctapopup-accent-hover), #b89500);
    box-shadow: 0 2px 8px rgba(250, 202, 0, 0.4);
    transform: translateY(-1px);
}

.gs-ctapopup-submit:focus,
.gs-cta-submit:focus {
    outline: 3px solid var(--gs-ctapopup-primary);
    outline-offset: 2px;
}

.gs-ctapopup-submit:disabled,
.gs-cta-submit:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.gs-ctapopup-submit-text,
.gs-ctapopup-submit-loading,
.gs-cta-submit-text,
.gs-cta-submit-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gs-ctapopup-submit-loading[aria-hidden="true"],
.gs-ctapopup-submit-text[aria-hidden="true"],
.gs-cta-submit-loading[aria-hidden="true"],
.gs-cta-submit-text[aria-hidden="true"] {
    display: none;
}

.gs-ctapopup-spinner,
.gs-cta-spinner {
    animation: gs-ctapopup-spin 1s linear infinite;
}

@keyframes gs-ctapopup-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Legacy support */
@keyframes gs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Result Messages
   ========================================================================== */
.gs-ctapopup-result,
.gs-cta-result {
    display: none;
    text-align: center;
    padding: 30px 20px;
}

.gs-ctapopup-result[aria-hidden="false"],
.gs-cta-result[aria-hidden="false"] {
    display: block;
}

.gs-ctapopup-result svg,
.gs-cta-result svg {
    margin-bottom: 16px;
}

.gs-ctapopup-result p,
.gs-cta-result p {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: var(--gs-ctapopup-text);
    line-height: 1.6;
}

/* Success */
.gs-ctapopup-success svg,
.gs-cta-success svg {
    color: var(--gs-ctapopup-success);
}

.gs-ctapopup-close-btn,
.gs-cta-close-btn {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gs-ctapopup-text);
    background: #f5f5f5;
    border: 1px solid var(--gs-ctapopup-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--gs-ctapopup-transition);
}

.gs-ctapopup-close-btn:hover,
.gs-ctapopup-close-btn:focus,
.gs-cta-close-btn:hover,
.gs-cta-close-btn:focus {
    background: #eee;
    border-color: #ccc;
}

.gs-ctapopup-close-btn:focus,
.gs-cta-close-btn:focus {
    outline: 2px solid var(--gs-ctapopup-primary);
    outline-offset: 2px;
}

/* Error */
.gs-ctapopup-error-msg svg,
.gs-cta-error-msg svg {
    color: var(--gs-ctapopup-error);
}

.gs-ctapopup-retry-btn,
.gs-cta-retry-btn {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--gs-ctapopup-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--gs-ctapopup-transition);
}

.gs-ctapopup-retry-btn:hover,
.gs-ctapopup-retry-btn:focus,
.gs-cta-retry-btn:hover,
.gs-cta-retry-btn:focus {
    background: var(--gs-ctapopup-primary-hover);
}

.gs-ctapopup-retry-btn:focus,
.gs-cta-retry-btn:focus {
    outline: 2px solid var(--gs-ctapopup-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Honeypot
   ========================================================================== */
.gs-ctapopup-hp,
.gs-cta-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .gs-ctapopup-overlay,
    .gs-cta-overlay {
        padding: 10px;
    }
    
    .gs-ctapopup-modal,
    .gs-cta-modal {
        max-height: calc(100vh - 20px);
    }
    
    .gs-ctapopup-content,
    .gs-cta-content {
        padding: 20px;
    }
    
    .gs-ctapopup-title,
    .gs-cta-title {
        font-size: 20px;
        padding-left: 30px;
    }
    
    .gs-ctapopup-fields,
    .gs-cta-fields {
        grid-template-columns: 1fr;
    }
    
    .gs-ctapopup-field-half,
    .gs-ctapopup-field-full,
    .gs-cta-field-half,
    .gs-cta-field-full {
        grid-column: span 1;
    }
    
    .gs-ctapopup-close,
    .gs-cta-close {
        top: 8px;
        left: 8px;
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .gs-ctapopup-overlay,
    .gs-ctapopup-modal,
    .gs-ctapopup-btn,
    .gs-ctapopup-submit,
    .gs-ctapopup-field input,
    .gs-ctapopup-field select,
    .gs-ctapopup-field textarea,
    .gs-cta-overlay,
    .gs-cta-modal,
    .gs-cta-btn,
    .gs-cta-submit,
    .gs-cta-field input,
    .gs-cta-field select,
    .gs-cta-field textarea {
        transition: none;
    }
    
    .gs-ctapopup-spinner,
    .gs-cta-spinner {
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .gs-ctapopup-field input,
    .gs-ctapopup-field select,
    .gs-ctapopup-field textarea,
    .gs-cta-field input,
    .gs-cta-field select,
    .gs-cta-field textarea {
        border-width: 2px;
    }
    
    .gs-ctapopup-btn,
    .gs-ctapopup-submit,
    .gs-cta-btn,
    .gs-cta-submit {
        border: 2px solid currentColor;
    }
}