/* Styles for view-preview.php */
#ctmd-preview-page {
    margin-top: 20px;
}

.ctmd-preview-controls {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

#ctmd-preview-swatches {
    display: flex;
    gap: 5px;
}

#ctmd-mode-selector-wrapper {
    display: none;
}

#primary-section-preview,
#secondary-section-preview,
#accent-section-preview,
#primary-section-dark-modules-preview,
#cta-section-preview,
#footer-section-preview {
    padding: 40px 20px;
    text-align: center;
}

#primary-section-preview { background-color: var(--gcid-primary-section-bg, #f7f7f7); }
#secondary-section-preview { background-color: var(--gcid-secondary-section-bg, #e8e8e8); }
#accent-section-preview { background-color: var(--gcid-accent-section-bg, #e8e8e8); }
#primary-section-dark-modules-preview { background-color: var(--gcid-primary-section-bg, #f7f7f7); }
#cta-section-preview { background-color: var(--gcid-cta-section-bg, #2ea3f2); }
#footer-section-preview { background-color: var(--gcid-footer-section-bg, #333333); }

#primary-section-preview h1,
#secondary-section-preview h1,
#accent-section-preview h1,
#primary-section-dark-modules-preview h1,
#cta-section-preview h1,
#footer-section-preview h1 {
    margin-top: 0;
    font-weight: bold;
}

#primary-section-preview h1 { color: var(--gcid-primary-section-heading, #000000); }
#secondary-section-preview h1 { color: var(--gcid-secondary-section-heading, #000000); }
#accent-section-preview h1 { color: var(--gcid-accent-section-heading, #000000); }
#primary-section-dark-modules-preview h1 { color: var(--gcid-primary-section-heading, #000000); }
#cta-section-preview h1 { color: var(--gcid-cta-section-heading, #ffffff); }
#footer-section-preview h1 { color: var(--gcid-footer-section-heading, #ffffff); }

#primary-section-preview p,
#secondary-section-preview p,
#accent-section-preview p,
#primary-section-dark-modules-preview p,
#cta-section-preview p,
#footer-section-preview p {
    margin-bottom: 0;
}

#primary-section-preview p { color: var(--gcid-primary-section-text, #333333); }
#secondary-section-preview p { color: var(--gcid-secondary-section-text, #333333); }
#accent-section-preview p { color: var(--gcid-accent-section-text, #333333); }
#primary-section-dark-modules-preview p { color: var(--gcid-primary-section-text, #333333); }
#cta-section-preview p { color: var(--gcid-cta-section-text, #eaf5ff); }
#footer-section-preview p { color: var(--gcid-footer-section-text, #dddddd); }
#footer-section-preview a { color: var(--gcid-links, #ffffff); }
#footer-section-preview a:hover { color: var(--gcid-links-hover, #eeeeee); }

.ctmd-button-container { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
.ctmd-btn { padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; font-size: 14px; font-weight: bold; border: 2px solid transparent; transition: all 0.3s ease; }
.ctmd-btn-primary {
    background-color: var(--gcid-primary-button-bg, #2ea3f2);
    color: var(--gcid-primary-button-text, #fff);
    border-color: var(--gcid-primary-button-border, #2ea3f2);
}
.ctmd-btn-primary:hover {
    background-color: var(--gcid-primary-button-hover-bg, #2585c5);
    color: var(--gcid-primary-button-hover-text, #fff);
    border-color: var(--gcid-primary-button-hover-border, #2585c5);
}
.ctmd-btn-secondary {
    background-color: var(--gcid-secondary-button-bg, transparent);
    color: var(--gcid-secondary-button-text, #333);
    border-color: var(--gcid-secondary-button-border, #ccc);
}
.ctmd-btn-secondary:hover {
    background-color: var(--gcid-secondary-button-hover-bg, #f0f0f0);
    color: var(--gcid-secondary-button-hover-text, #333);
    border-color: var(--gcid-secondary-button-hover-border, #999);
}
.ctmd-btn-accent {
    background-color: var(--gcid-accent-button-bg, #f0f0f0);
    color: var(--gcid-accent-button-text, #333);
    border-color: var(--gcid-accent-button-border, #f0f0f0);
}
.ctmd-btn-accent:hover {
    background-color: var(--gcid-accent-button-hover-bg, #e0e0e0);
    color: var(--gcid-accent-button-hover-text, #333);
    border-color: var(--gcid-accent-button-hover-border, #e0e0e0);
}
.ctmd-btn-outline {
    background-color: var(--gcid-outline-button-bg, transparent);
    color: var(--gcid-outline-button-text, #333);
    border-color: var(--gcid-outline-button-border, #ccc);
}
.ctmd-btn-outline:hover {
    background-color: var(--gcid-outline-button-hover-bg, #f0f0f0);
    color: var(--gcid-outline-button-hover-text, #333);
    border-color: var(--gcid-outline-button-hover-border, #999);
}

.ctmd-card-container { display: flex; justify-content: center; align-items: flex-start; gap: 20px; margin-top: 30px; }
.ctmd-module-card {
    background-color: var(--gcid-module-light-bg, #fff) !important;
    border: 1px solid var(--gcid-module-light-border, #ddd);
    padding: 20px;
    border-radius: 5px;
    flex: 1;
    max-width: 28%;
    text-align: left;
}
.ctmd-module-card h4 {
    color: var(--gcid-module-light-heading, #333) !important;
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}
.ctmd-module-card p {
    color: var(--gcid-module-light-text, #666) !important;
    font-size: 14px;
    line-height: 1.5;
}
.ctmd-module-card.dark {
    background-color: var(--gcid-module-dark-bg, #333) !important;
    border-color: var(--gcid-module-dark-border, #555);
}
.ctmd-module-card.dark h4 {
    color: var(--gcid-module-dark-heading, #fff) !important;
}
.ctmd-module-card.dark p {
    color: var(--gcid-module-dark-text, #ccc) !important;
}
.ctmd-module-card .ctmd-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.ctmd-icon-container { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 30px; }
.ctmd-icon-group { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.ctmd-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0; /* Prevent icon from shrinking */
}
.ctmd-icon.primary {
    background-color: var(--gcid-icon-primary-bg, #2ea3f2);
    color: var(--gcid-icon-primary-color, #fff);
}
.ctmd-icon.secondary {
    background-color: var(--gcid-icon-secondary-bg, #6c757d);
    color: var(--gcid-icon-secondary-color, #fff);
}
.ctmd-icon.transparent {
    background-color: var(--gcid-icon-transparent-bg, transparent);
    color: var(--gcid-icon-transparent-color, #fff);
    border: 1px solid var(--gcid-icon-transparent-color, #fff);
}
.ctmd-icon-group p { color: var(--gcid-accent-section-text, #333333); margin: 0; }

#ctmd-combinations-container { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 0; justify-content: center; }
.ctmd-combo-card { padding: 15px; border-radius: 3px; text-align: center; font-size: 12px; line-height: 1.4; border: 1px solid #dcdcdc; }

#ctmd-preview-area {
    max-height: 75vh;
    overflow-y: auto;
    padding: 20px;
    background-color: #f0f0f1;
    margin-top: 20px;
    display: none;
}

.footer-divider {
    width: 80%;
    margin: 20px auto;
    border-top: 1px solid var(--gcid-light-3);
}

.footer-copyright {
    color: var(--gcid-footer-section-text);
    font-size: 12px;
    opacity: 0.7;
}

.combinations-title {
    text-align: center;
    margin-top: 40px;
    font-size: 1.2em;
}