/**
 * Frontend CSS for Ateko Pardot Integration
 */

/* Modal Overlay */

.wp-block-buttons div.ateko-pardot-resource-button.locked a.wp-block-button__link:after {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='19' viewBox='0 0 17 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.73082 6.83698H4.26928C4.50005 6.83698 4.65389 6.72159 4.65389 6.49082V6.45236C4.65389 4.26005 6.53851 2.45236 8.76928 2.60621C10.8077 2.76005 12.3462 4.52928 12.3462 6.60621V6.49082C12.3462 6.72159 12.5 6.83698 12.7308 6.83698H14.2693C14.5 6.83698 14.6539 6.72159 14.6539 6.49082V6.45236C14.6539 2.95236 11.7308 0.144669 8.19236 0.298515C4.92312 0.452361 2.42312 3.22159 2.3462 6.49082C2.38466 6.68313 2.53851 6.83698 2.73082 6.83698ZM2.3462 6.49082V6.64467V6.49082ZM16.1924 9.9139C16.1924 9.06775 15.5 8.37544 14.6539 8.37544H2.3462C1.50005 8.37544 0.807739 9.06775 0.807739 9.9139V17.2216C0.807739 18.0677 1.50005 18.7601 2.3462 18.7601H14.6539C15.5 18.7601 16.1924 18.0677 16.1924 17.2216V9.9139ZM10.2693 15.9524C10.3462 16.1831 10.1539 16.4524 9.88466 16.4524H7.07697C6.80774 16.4524 6.65389 16.2216 6.69235 15.9524L7.38466 13.6447C6.80774 13.2601 6.46159 12.5677 6.57697 11.7985C6.73082 11.0677 7.30774 10.4908 8.07697 10.337C9.30774 10.1062 10.3847 10.9908 10.3847 12.1447C10.3847 12.7601 10.077 13.337 9.57697 13.6447L10.2693 15.9524Z' fill='black'/%3E%3C/svg%3E");

}

.ateko-pardot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ateko-pardot-modal.ateko-pardot-visible {
    opacity: 1;
    visibility: visible;
}

.ateko-pardot-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

/* Modal Content */
.ateko-pardot-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #E4DFDC;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 792px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
}

/* Close Button */
.ateko-pardot-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: all 0.2s ease;
}

.ateko-pardot-modal-close:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #333;
    transform: scale(1.1);
}

/* Modal Header */
.ateko-pardot-modal-header {
    padding: 40px 40px 30px 40px;
}


.ateko-pardot-modal-header p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    display: none; /* Hide for cleaner look */
}

/* Form Styles */
.ateko-pardot-form {
    padding: 0 40px 40px 40px;
}

.ateko-pardot-form-row {
    margin-bottom: 30px;
}

.ateko-pardot-form-row-half {
    display: flex;
    gap: 20px;
}

.ateko-pardot-form-col {
    flex: 1;
}

/* Floating Label Form Field Styles */
.ateko-pardot-field {
    margin-bottom: 0;
    position: relative;
}

.ateko-pardot-field label {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    font-weight: normal;
    color: #000000;
    opacity: 0.35;
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
    z-index: 1;
    line-height: 1;
}

/* When field is focused or has content */
.ateko-pardot-field.has-content label,
.ateko-pardot-field.is-focused label {
    top: -8px;
    font-size: 0.875rem;
    padding: 0;
    z-index: 2;
}

.ateko-pardot-field input[type="text"],
.ateko-pardot-field input[type="email"],
.ateko-pardot-field select {
    width: 100%;
    padding: 8px 0px 8px 0px;
    border: 1px solid transparent;
    border-bottom: 1px solid #999;
    border-radius: 0;
    font-size: 1.75rem;
    background: transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.ateko-pardot-field input[type="text"]:focus,
.ateko-pardot-field input[type="email"]:focus,
.ateko-pardot-field select:focus {
    outline: none;
}

.ateko-pardot-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 50px;
}

/* Special handling for select dropdown label */
.ateko-pardot-field select + label {
    pointer-events: none;
}

.ateko-pardot-form-row-submit {
    text-align: center;
}

.ateko-pardot-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* reCAPTCHA and Terms Text */
.ateko-pardot-terms-text {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin: 20px 0;
    line-height: 1.4;
}

.ateko-pardot-terms-text a {
    color: #0073aa;
    text-decoration: underline;
}

.ateko-pardot-terms-text a:hover {
    color: #005a87;
}

/* Form Messages */
.ateko-pardot-form-message {
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 15px;
}

.ateko-pardot-message-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ateko-pardot-message-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Utility Classes */
.ateko-pardot-hidden {
    display: none !important;
}

.ateko-pardot-btn-loading {
    opacity: 0.8;
}

/* Body class when modal is open */
body.ateko-pardot-modal-open {
    overflow: hidden;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .ateko-pardot-modal-content {
        width: 95%;
        margin: 20px;
        max-height: calc(100vh - 40px);
    }
    
    .ateko-pardot-modal-header {
        padding: 20px 20px 15px;
    }
    
    .ateko-pardot-modal-header h2 {
        font-size: 20px;
    }
    
    .ateko-pardot-form {
        padding: 15px 20px 20px;
    }
    
    .ateko-pardot-form-row-half {
        flex-direction: column;
        gap: 20px;
    }
    
    .ateko-pardot-form input[type="text"],
    .ateko-pardot-form input[type="email"],
    .ateko-pardot-form select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Small screens */
@media (max-width: 480px) {
    .ateko-pardot-modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
        margin: 0;
    }
    
    .ateko-pardot-modal-overlay {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ateko-pardot-form input[type="text"],
    .ateko-pardot-form input[type="email"],
    .ateko-pardot-form input[type="tel"] {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ateko-pardot-modal {
        transition: none;
    }
    
    .ateko-pardot-form input[type="text"],
    .ateko-pardot-form input[type="email"],
    .ateko-pardot-form select,
    .ateko-pardot-submit-btn {
        transition: none;
    }
}

/* Checkbox Styles */
.ateko-pardot-checkboxes {
    margin-top: 10px;
    margin-bottom: 10px;
}

.ateko-pardot-form-group {
    margin-bottom: 15px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ateko-pardot-form-group.ateko-pardot-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    transform: translateY(-10px);
}

.ateko-pardot-custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.ateko-pardot-checkbox-input {
    margin: 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #ff6b35;
    cursor: pointer;
    border-radius: 3px;
}

.ateko-pardot-checkbox-label {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.ateko-pardot-checkbox-label a {
    color: #ff6b35;
    text-decoration: underline;
}

.ateko-pardot-checkbox-label a:hover {
    color: #e55a2b;
}

/* Responsive checkbox adjustments */
@media (max-width: 600px) {
    .ateko-pardot-checkbox-label {
        font-size: 13px;
    }
    
    .ateko-pardot-checkbox-input {
        width: 16px;
        height: 16px;
    }
}

/* High contrast mode support for checkboxes */
@media (prefers-contrast: high) {
    .ateko-pardot-checkbox-input {
        border: 2px solid #000;
    }
    
    .ateko-pardot-checkbox-label {
        color: #000;
    }
}

/* Print styles */
@media print {
    .ateko-pardot-modal {
        display: none !important;
    }
}