/**
 * SAC Email Subscribe Plugin Styles
 *
 * These styles will apply to elements outside the web component
 * (Web component has its own styles in the Shadow DOM)
 */

#page-title {text-align: center;}
#form-steps {color: #000;}

.sac-email-subscribe-container {margin: 40px 0;}
.sac-email-subscribe-title {margin-bottom: 20px; text-align: center;}

:host {display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin: 0 auto; max-width: 800px;}
.form-container {background-color: transparent; padding: 10px 0 30px 0;}

.form-header {display: none; margin-bottom: 20px; text-align: center;}
.form-step {display: none;}
.form-step.active {display: block;}
.form-navigation {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.nav-right {display: flex; gap: 10px; align-items: center;}
.step-indicator {display: flex; justify-content: center; margin: 20px 0;}
.step-dot {background-color: #ccc; border-radius: 50%; height: 10px; margin: 0 5px; width: 10px;}
.step-dot.active {background-color: #0073aa;}

button {background-color: #0073aa; border: none; color: #fff; cursor: pointer; font-size: 16px; font-weight: bold; padding: 10px 20px; text-transform: uppercase; transition: 0.1s ease-in all;}
button:hover {background-color: #005177;}
button.back-button {background-color: #f1f1f1; color: #333; text-transform: none;}
button.back-button:hover {background-color: #e1e1e1;}
.skip-link {background: none; border: 1px solid #0073aa; color: #0073aa; cursor: pointer; font-size: 16px; padding: 10px 20px; text-decoration: none; text-transform: uppercase; font-weight: bold;}
.skip-link:hover {background-color: #f0f8ff; color: #005177;}

input, select {border: 1px solid #ddd; box-sizing: border-box; margin: 8px 0; padding: 10px; width: 100%;}
input[type="checkbox"] {margin-right: 10px; width: auto;}
label {display: block; font-weight: 600; margin-bottom: 5px;}
.checkbox-label {align-items: flex-start; display: flex; font-weight: normal;}
.form-group {margin-bottom: 15px;}
.form-group-row {display: flex; gap: 15px; margin-bottom: 15px;}
.form-group.half-width {flex: 1; margin-bottom: 0;}

.success-message, .error-message {border-radius: 4px; margin: 20px 0; padding: 15px; text-align: center;}
.success-message {background-color: #dff0d8; color: #3c763d;}
.success-message ul {list-style-type: none; padding-left: 0;}
.error-message {background-color: #f2dede; color: #a94442;}
.legal-disclosure {color: #666; font-size: 0.9em; margin: 15px 0;}

.newsletter-list {margin: 20px 0;}
.newsletter-item {margin-bottom: 5px; padding: 2px 0;}

/* Two-column layout for many newsletters */
.newsletter-list-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 15px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.newsletter-list-columns .newsletter-item {
    margin-bottom: 0;
    padding: 0;
}

.newsletter-list-columns .checkbox-label {
    font-size: 14px;
    line-height: 1.3;
}

.newsletter-list-columns .checkbox-label span strong {
    display: inline;
    margin-right: 3px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .sac-email-subscribe-container {margin: 20px 0;}
    .form-group-row {flex-direction: column; gap: 0;}
    .form-group.half-width {margin-bottom: 15px;}
    
    /* Single column on mobile */
    .newsletter-list-columns {
        grid-template-columns: 1fr;
        max-height: 300px;
    }
}

/* ---------- Modal wrapper ---------- */
.sac-modal {position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10000; background:rgba(0,0,0,.6);}
.sac-modal[hidden] {display:none;}
.sac-modal-content {background:#fff; max-width:640px; width:90%; border-radius:6px; padding:20px; position:relative; box-shadow:0 4px 16px rgba(0,0,0,.2);}
.sac-modal-body {max-height:80vh; overflow:auto;}
.sac-modal-close {position:absolute; top:10px; right:12px; font-size:24px; background:none; border:none; cursor:pointer; line-height:1;background-color:#000;}
html.sac-modal-open {overflow:hidden;}
/* Touch-friendly */
@media (max-width:480px) {
	.sac-modal-content {width:96%; padding:15px;}
}

/* Loading animation for ellipses */
@keyframes ellipsis {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
    100% { content: ""; }
}

.loading-ellipsis::after {
    content: "";
    animation: ellipsis 1.5s infinite;
}

.loading-container {
    text-align: center;
    padding: 40px 20px;
}

.loading-text {
    font-size: 18px;
    color: #333;
    font-weight: 500;
}