/**
 * Chalet-Montagne.com V2 - Frontend Styles
 *
 * Comprehensive responsive styles for the WordPress frontend.
 * Includes styles for all shortcode components: planning, tarifs,
 * galerie, contact, carte, and listing.
 *
 * @package ChaletMontagne
 * @since   1.0.0
 */

/* ==========================================================================
   Table of Contents
   ==========================================================================
   1. CSS Variables
   2. Base Styles & Resets
   3. Typography
   4. Common Components
   5. Notices & Messages
   6. Buttons
   7. Forms & Inputs
   8. Contact Form Component
   9. Loading States
   10. PRO Feature Notices
   11. Error States
   12. Accessibility Helpers
   13. Animations
   14. Responsive Utilities
   15. Print Styles
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */

:root {
    /* Primary Colors */
    --cmv2-primary: #3498db;
    --cmv2-primary-dark: #2980b9;
    --cmv2-primary-light: #e8f4fd;

    /* Status Colors */
    --cmv2-success: #27ae60;
    --cmv2-success-dark: #219a52;
    --cmv2-success-light: #d4edda;

    --cmv2-danger: #e74c3c;
    --cmv2-danger-dark: #c0392b;
    --cmv2-danger-light: #f8d7da;

    --cmv2-warning: #f39c12;
    --cmv2-warning-dark: #d68910;
    --cmv2-warning-light: #fff3cd;

    --cmv2-info: #17a2b8;
    --cmv2-info-light: #d1ecf1;

    /* Calendar Colors (can be overridden via admin settings) */
    --cmv2-dispo-bg: #27ae60;
    --cmv2-dispo-text: #ffffff;
    --cmv2-indispo-bg: #e74c3c;
    --cmv2-indispo-text: #ffffff;
    --cmv2-header-bg: #2c3e50;
    --cmv2-header-text: #ffffff;
    --cmv2-action-bg: #3498db;
    --cmv2-action-text: #ffffff;

    /* Text Colors */
    --cmv2-text-primary: #333333;
    --cmv2-text-secondary: #555555;
    --cmv2-text-muted: #666666;
    --cmv2-text-light: #999999;

    /* Background Colors */
    --cmv2-bg-white: #ffffff;
    --cmv2-bg-light: #f8f9fa;
    --cmv2-bg-lighter: #f0f0f0;
    --cmv2-bg-dark: #1e1e1e;

    /* Border Colors */
    --cmv2-border: #dddddd;
    --cmv2-border-light: #eeeeee;
    --cmv2-border-dark: #cccccc;

    /* Spacing */
    --cmv2-spacing-xs: 0.25rem;
    --cmv2-spacing-sm: 0.5rem;
    --cmv2-spacing-md: 1rem;
    --cmv2-spacing-lg: 1.5rem;
    --cmv2-spacing-xl: 2rem;
    --cmv2-spacing-xxl: 3rem;

    /* Border Radius */
    --cmv2-radius-sm: 4px;
    --cmv2-radius-md: 6px;
    --cmv2-radius-lg: 8px;
    --cmv2-radius-xl: 12px;
    --cmv2-radius-round: 50%;
    --cmv2-radius-pill: 9999px;

    /* Shadows */
    --cmv2-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --cmv2-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --cmv2-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --cmv2-transition-fast: 0.15s ease;
    --cmv2-transition: 0.2s ease;
    --cmv2-transition-slow: 0.3s ease;

    /* Font Sizes */
    --cmv2-font-xs: 0.75rem;
    --cmv2-font-sm: 0.875rem;
    --cmv2-font-base: 1rem;
    --cmv2-font-md: 1.125rem;
    --cmv2-font-lg: 1.25rem;
    --cmv2-font-xl: 1.5rem;
    --cmv2-font-xxl: 2rem;

    /* Z-index layers */
    --cmv2-z-dropdown: 1000;
    --cmv2-z-sticky: 1020;
    --cmv2-z-modal-backdrop: 1040;
    --cmv2-z-modal: 1050;
    --cmv2-z-lightbox: 999999;
}

/* ==========================================================================
   2. Base Styles & Resets
   ========================================================================== */

/* Plugin wrapper reset */
[class^="cmv2-"],
[class*=" cmv2-"] {
    box-sizing: border-box;
}

[class^="cmv2-"] *,
[class*=" cmv2-"] * {
    box-sizing: inherit;
}

/* Base component wrapper */
.cmv2-wrapper {
    margin: var(--cmv2-spacing-lg) 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: var(--cmv2-font-base);
    line-height: 1.6;
    color: var(--cmv2-text-primary);
}

/* Clear floats */
.cmv2-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.cmv2-heading {
    margin: 0 0 var(--cmv2-spacing-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--cmv2-text-primary);
}

.cmv2-heading--xl {
    font-size: var(--cmv2-font-xxl);
}

.cmv2-heading--lg {
    font-size: var(--cmv2-font-xl);
}

.cmv2-heading--md {
    font-size: var(--cmv2-font-lg);
}

.cmv2-heading--sm {
    font-size: var(--cmv2-font-md);
}

.cmv2-text {
    margin: 0 0 var(--cmv2-spacing-md);
    color: var(--cmv2-text-secondary);
}

.cmv2-text--small {
    font-size: var(--cmv2-font-sm);
}

.cmv2-text--muted {
    color: var(--cmv2-text-muted);
}

.cmv2-text--center {
    text-align: center;
}

.cmv2-link {
    color: var(--cmv2-primary);
    text-decoration: none;
    transition: color var(--cmv2-transition-fast);
}

.cmv2-link:hover,
.cmv2-link:focus {
    color: var(--cmv2-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   4. Common Components
   ========================================================================== */

/* Container */
.cmv2-container {
    background: var(--cmv2-bg-white);
    border: 1px solid var(--cmv2-border);
    border-radius: var(--cmv2-radius-lg);
    overflow: hidden;
}

/* Header */
.cmv2-component-header {
    padding: var(--cmv2-spacing-md) var(--cmv2-spacing-lg);
    background: var(--cmv2-header-bg);
    color: var(--cmv2-header-text);
}

.cmv2-component-header__title {
    margin: 0;
    font-size: var(--cmv2-font-lg);
    font-weight: 600;
}

/* Body */
.cmv2-component-body {
    padding: var(--cmv2-spacing-lg);
}

/* Footer */
.cmv2-component-footer {
    padding: var(--cmv2-spacing-md) var(--cmv2-spacing-lg);
    background: var(--cmv2-bg-light);
    border-top: 1px solid var(--cmv2-border-light);
    text-align: center;
}

/* Divider */
.cmv2-divider {
    border: none;
    border-top: 1px solid var(--cmv2-border-light);
    margin: var(--cmv2-spacing-lg) 0;
}

/* Card */
.cmv2-card {
    background: var(--cmv2-bg-white);
    border: 1px solid var(--cmv2-border);
    border-radius: var(--cmv2-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--cmv2-transition), transform var(--cmv2-transition);
}

.cmv2-card:hover {
    box-shadow: var(--cmv2-shadow-md);
    transform: translateY(-2px);
}

.cmv2-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cmv2-bg-lighter);
}

.cmv2-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cmv2-transition-slow);
}

.cmv2-card:hover .cmv2-card__image img {
    transform: scale(1.05);
}

.cmv2-card__content {
    padding: var(--cmv2-spacing-md);
}

.cmv2-card__title {
    margin: 0 0 var(--cmv2-spacing-sm);
    font-size: var(--cmv2-font-md);
    font-weight: 600;
}

.cmv2-card__title a {
    color: inherit;
    text-decoration: none;
}

.cmv2-card__title a:hover {
    color: var(--cmv2-primary);
}

/* Grid */
.cmv2-grid {
    display: grid;
    gap: var(--cmv2-spacing-lg);
}

.cmv2-grid--cols-1 {
    grid-template-columns: 1fr;
}

.cmv2-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cmv2-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cmv2-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   5. Notices & Messages
   ========================================================================== */

.cmv2-notice {
    padding: var(--cmv2-spacing-md) var(--cmv2-spacing-lg);
    margin-bottom: var(--cmv2-spacing-lg);
    border-radius: var(--cmv2-radius-md);
    font-size: var(--cmv2-font-sm);
}

.cmv2-notice p {
    margin: 0;
}

.cmv2-notice--success {
    background: var(--cmv2-success-light);
    border: 1px solid var(--cmv2-success);
    color: #155724;
}

.cmv2-notice--error {
    background: var(--cmv2-danger-light);
    border: 1px solid var(--cmv2-danger);
    color: #721c24;
}

.cmv2-notice--warning {
    background: var(--cmv2-warning-light);
    border: 1px solid var(--cmv2-warning);
    color: #856404;
}

.cmv2-notice--info {
    background: var(--cmv2-info-light);
    border: 1px solid var(--cmv2-info);
    color: #0c5460;
}

/* Icon in notice */
.cmv2-notice__icon {
    display: inline-flex;
    margin-right: var(--cmv2-spacing-sm);
    vertical-align: middle;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.cmv2-button,
.cmv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cmv2-spacing-sm);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--cmv2-radius-md);
    font-family: inherit;
    font-size: var(--cmv2-font-sm);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--cmv2-transition-fast),
                color var(--cmv2-transition-fast),
                transform var(--cmv2-transition-fast),
                box-shadow var(--cmv2-transition-fast);
}

.cmv2-button:focus,
.cmv2-btn:focus {
    outline: 3px solid rgba(52, 152, 219, 0.5);
    outline-offset: 2px;
}

/* Primary Button */
.cmv2-button--primary,
.cmv2-btn--primary {
    background: var(--cmv2-action-bg);
    color: var(--cmv2-action-text);
}

.cmv2-button--primary:hover,
.cmv2-btn--primary:hover {
    background: var(--cmv2-primary-dark);
    color: var(--cmv2-action-text);
    transform: translateY(-1px);
}

/* Secondary Button */
.cmv2-button--secondary,
.cmv2-btn--secondary {
    background: var(--cmv2-bg-light);
    color: var(--cmv2-text-primary);
    border: 1px solid var(--cmv2-border);
}

.cmv2-button--secondary:hover,
.cmv2-btn--secondary:hover {
    background: var(--cmv2-bg-lighter);
    border-color: var(--cmv2-border-dark);
}

/* Success Button */
.cmv2-button--success,
.cmv2-btn--success {
    background: var(--cmv2-success);
    color: #ffffff;
}

.cmv2-button--success:hover,
.cmv2-btn--success:hover {
    background: var(--cmv2-success-dark);
}

/* Danger Button */
.cmv2-button--danger,
.cmv2-btn--danger {
    background: var(--cmv2-danger);
    color: #ffffff;
}

.cmv2-button--danger:hover,
.cmv2-btn--danger:hover {
    background: var(--cmv2-danger-dark);
}

/* Small Button */
.cmv2-button--small,
.cmv2-btn--sm {
    padding: 0.5rem 1rem;
    font-size: var(--cmv2-font-xs);
}

/* Large Button */
.cmv2-button--large,
.cmv2-btn--lg {
    padding: 1rem 2rem;
    font-size: var(--cmv2-font-base);
}

/* Full Width Button */
.cmv2-button--block,
.cmv2-btn--block {
    width: 100%;
}

/* Disabled Button */
.cmv2-button:disabled,
.cmv2-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Button with Icon */
.cmv2-button__icon,
.cmv2-btn__icon {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   7. Forms & Inputs
   ========================================================================== */

.cmv2-form-group {
    margin-bottom: var(--cmv2-spacing-md);
}

.cmv2-label {
    display: block;
    margin-bottom: var(--cmv2-spacing-sm);
    font-size: var(--cmv2-font-sm);
    font-weight: 500;
    color: var(--cmv2-text-primary);
}

.cmv2-input,
.cmv2-select,
.cmv2-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--cmv2-border);
    border-radius: var(--cmv2-radius-sm);
    font-family: inherit;
    font-size: var(--cmv2-font-base);
    line-height: 1.5;
    color: var(--cmv2-text-primary);
    background: var(--cmv2-bg-white);
    transition: border-color var(--cmv2-transition-fast),
                box-shadow var(--cmv2-transition-fast);
}

.cmv2-input:focus,
.cmv2-select:focus,
.cmv2-textarea:focus {
    outline: none;
    border-color: var(--cmv2-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.cmv2-input::placeholder,
.cmv2-textarea::placeholder {
    color: var(--cmv2-text-light);
}

.cmv2-textarea {
    min-height: 120px;
    resize: vertical;
}

.cmv2-select {
    appearance: none;
    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: right 0.75rem center;
    padding-right: 2.5rem;
}

/* Input with error */
.cmv2-input--error,
.cmv2-select--error,
.cmv2-textarea--error {
    border-color: var(--cmv2-danger);
}

.cmv2-input--error:focus,
.cmv2-select--error:focus,
.cmv2-textarea--error:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

/* Input help text */
.cmv2-input-help {
    display: block;
    margin-top: var(--cmv2-spacing-xs);
    font-size: var(--cmv2-font-xs);
    color: var(--cmv2-text-muted);
}

.cmv2-input-help--error {
    color: var(--cmv2-danger);
}

/* Checkbox and Radio */
.cmv2-checkbox-label,
.cmv2-radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--cmv2-spacing-sm);
    cursor: pointer;
}

.cmv2-checkbox,
.cmv2-radio {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
}

.cmv2-checkbox-text {
    font-size: var(--cmv2-font-sm);
    color: var(--cmv2-text-secondary);
    line-height: 1.5;
}

/* Required indicator */
.cmv2-required {
    color: var(--cmv2-danger);
    font-weight: normal;
    margin-left: 2px;
}

/* ==========================================================================
   8. Contact Form Component
   ========================================================================== */

.cmv2-contact {
    margin: var(--cmv2-spacing-lg) 0;
}

/* Owner Info Section */
.cmv2-contact__owner-info {
    margin-bottom: var(--cmv2-spacing-xl);
    padding: var(--cmv2-spacing-lg);
    background: var(--cmv2-bg-light);
    border-radius: var(--cmv2-radius-lg);
}

.cmv2-contact__owner-title {
    margin: 0 0 var(--cmv2-spacing-md);
    font-size: var(--cmv2-font-lg);
    font-weight: 600;
    color: var(--cmv2-text-primary);
}

.cmv2-contact__owner-details {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmv2-contact__owner-details li {
    display: flex;
    align-items: center;
    gap: var(--cmv2-spacing-sm);
    padding: var(--cmv2-spacing-sm) 0;
    font-size: var(--cmv2-font-sm);
    color: var(--cmv2-text-secondary);
}

.cmv2-contact__owner-details li i {
    width: 1.25rem;
    color: var(--cmv2-primary);
}

.cmv2-contact__owner-details a {
    color: var(--cmv2-primary);
    text-decoration: none;
}

.cmv2-contact__owner-details a:hover {
    text-decoration: underline;
}

/* Location Info */
.cmv2-contact__location-info {
    margin-bottom: var(--cmv2-spacing-lg);
    padding: var(--cmv2-spacing-md);
    background: var(--cmv2-primary-light);
    border-left: 4px solid var(--cmv2-primary);
    border-radius: var(--cmv2-radius-sm);
}

.cmv2-contact__location-title {
    margin: 0 0 var(--cmv2-spacing-xs);
    font-size: var(--cmv2-font-base);
    font-weight: 600;
    color: var(--cmv2-text-primary);
}

.cmv2-contact__location-ref {
    margin: 0;
    font-size: var(--cmv2-font-sm);
    color: var(--cmv2-text-muted);
}

/* Form Grid */
.cmv2-contact__form {
    background: var(--cmv2-bg-white);
    border: 1px solid var(--cmv2-border);
    border-radius: var(--cmv2-radius-lg);
    overflow: hidden;
}

.cmv2-contact__form-grid {
    padding: var(--cmv2-spacing-lg);
}

/* Form Sections */
.cmv2-contact__section {
    margin-bottom: var(--cmv2-spacing-xl);
}

.cmv2-contact__section:last-child {
    margin-bottom: 0;
}

.cmv2-contact__section-title {
    margin: 0 0 var(--cmv2-spacing-md);
    padding-bottom: var(--cmv2-spacing-sm);
    border-bottom: 2px solid var(--cmv2-border-light);
    font-size: var(--cmv2-font-base);
    font-weight: 600;
    color: var(--cmv2-header-bg);
}

/* Field Rows */
.cmv2-contact__field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cmv2-spacing-md);
    margin-bottom: var(--cmv2-spacing-md);
}

.cmv2-contact__field-row:last-child {
    margin-bottom: 0;
}

.cmv2-contact__field {
    display: flex;
    flex-direction: column;
}

.cmv2-contact__field--full {
    grid-column: 1 / -1;
}

/* Labels */
.cmv2-contact__label {
    display: block;
    margin-bottom: var(--cmv2-spacing-sm);
    font-size: var(--cmv2-font-sm);
    font-weight: 500;
    color: var(--cmv2-text-primary);
}

/* Inputs */
.cmv2-contact__input,
.cmv2-contact__textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cmv2-border);
    border-radius: var(--cmv2-radius-sm);
    font-family: inherit;
    font-size: var(--cmv2-font-base);
    line-height: 1.5;
    color: var(--cmv2-text-primary);
    background: var(--cmv2-bg-white);
    transition: border-color var(--cmv2-transition-fast),
                box-shadow var(--cmv2-transition-fast);
}

.cmv2-contact__input:focus,
.cmv2-contact__textarea:focus {
    outline: none;
    border-color: var(--cmv2-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.cmv2-contact__input::placeholder,
.cmv2-contact__textarea::placeholder {
    color: var(--cmv2-text-light);
}

.cmv2-contact__textarea {
    min-height: 120px;
    resize: vertical;
}

.cmv2-contact__input--date,
.cmv2-contact__input--number {
    max-width: 100%;
}

/* Checkbox */
.cmv2-contact__field--checkbox {
    margin-bottom: var(--cmv2-spacing-md);
}

.cmv2-contact__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--cmv2-spacing-sm);
    cursor: pointer;
}

.cmv2-contact__checkbox {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    cursor: pointer;
}

.cmv2-contact__checkbox-text {
    font-size: var(--cmv2-font-sm);
    color: var(--cmv2-text-secondary);
    line-height: 1.5;
}

.cmv2-contact__checkbox-text a {
    color: var(--cmv2-primary);
    text-decoration: none;
}

.cmv2-contact__checkbox-text a:hover {
    text-decoration: underline;
}

/* Consent Info */
.cmv2-contact__consent-info {
    margin: var(--cmv2-spacing-sm) 0 0;
    padding: var(--cmv2-spacing-sm);
    background: var(--cmv2-bg-light);
    border-radius: var(--cmv2-radius-sm);
    color: var(--cmv2-text-muted);
}

.cmv2-contact__consent-info small {
    font-size: var(--cmv2-font-xs);
}

/* Submit Section */
.cmv2-contact__section--submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cmv2-spacing-md);
    padding-top: var(--cmv2-spacing-lg);
    border-top: 1px solid var(--cmv2-border-light);
}

.cmv2-contact__required-note {
    margin: 0;
    color: var(--cmv2-text-muted);
}

.cmv2-contact__required-note small {
    font-size: var(--cmv2-font-xs);
}

/* Submit Button */
.cmv2-contact__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--cmv2-spacing-sm);
    padding: 0.875rem 1.75rem;
    background: var(--cmv2-action-bg);
    color: var(--cmv2-action-text);
    border: none;
    border-radius: var(--cmv2-radius-md);
    font-family: inherit;
    font-size: var(--cmv2-font-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--cmv2-transition-fast),
                transform var(--cmv2-transition-fast);
}

.cmv2-contact__submit:hover {
    background: var(--cmv2-primary-dark);
    transform: translateY(-1px);
}

.cmv2-contact__submit:focus {
    outline: 3px solid rgba(52, 152, 219, 0.5);
    outline-offset: 2px;
}

.cmv2-contact__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cmv2-contact__submit i {
    font-size: 1rem;
}

/* ==========================================================================
   9. Loading States
   ========================================================================== */

.cmv2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cmv2-spacing-md);
    padding: var(--cmv2-spacing-xl);
    color: var(--cmv2-text-muted);
}

.cmv2-loading__spinner {
    display: block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--cmv2-border-light);
    border-top-color: var(--cmv2-primary);
    border-radius: var(--cmv2-radius-round);
    animation: cmv2-spin 0.8s linear infinite;
}

.cmv2-loading__spinner--large {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.cmv2-loading__text {
    font-size: var(--cmv2-font-sm);
}

/* Skeleton loading */
.cmv2-skeleton {
    background: linear-gradient(90deg,
        var(--cmv2-bg-lighter) 25%,
        var(--cmv2-bg-light) 50%,
        var(--cmv2-bg-lighter) 75%
    );
    background-size: 200% 100%;
    animation: cmv2-skeleton 1.5s ease-in-out infinite;
    border-radius: var(--cmv2-radius-sm);
}

.cmv2-skeleton--text {
    height: 1rem;
    margin-bottom: var(--cmv2-spacing-sm);
}

.cmv2-skeleton--title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--cmv2-spacing-md);
}

.cmv2-skeleton--image {
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   10. PRO Feature Notices
   ========================================================================== */

.cmv2-pro-notice {
    padding: var(--cmv2-spacing-lg);
    margin: var(--cmv2-spacing-lg) 0;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #a78bfa;
    border-radius: var(--cmv2-radius-lg);
    text-align: center;
}

.cmv2-pro-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--cmv2-spacing-md);
    background: #7c3aed;
    color: #ffffff;
    border-radius: var(--cmv2-radius-round);
    font-size: 1.5rem;
}

.cmv2-pro-notice__title {
    margin: 0 0 var(--cmv2-spacing-sm);
    font-size: var(--cmv2-font-md);
    font-weight: 600;
    color: #5b21b6;
}

.cmv2-pro-notice__text {
    margin: 0;
    font-size: var(--cmv2-font-sm);
    color: #6d28d9;
}

.cmv2-pro-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #7c3aed;
    color: #ffffff;
    font-size: var(--cmv2-font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--cmv2-radius-sm);
}

/* ==========================================================================
   11. Error States
   ========================================================================== */

.cmv2-error {
    padding: var(--cmv2-spacing-md) var(--cmv2-spacing-lg);
    background: var(--cmv2-danger-light);
    border: 1px solid var(--cmv2-danger);
    border-radius: var(--cmv2-radius-md);
    color: #721c24;
    text-align: center;
}

.cmv2-error p {
    margin: 0;
}

.cmv2-empty {
    padding: var(--cmv2-spacing-xxl) var(--cmv2-spacing-lg);
    background: var(--cmv2-bg-light);
    border-radius: var(--cmv2-radius-lg);
    text-align: center;
    color: var(--cmv2-text-muted);
}

.cmv2-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--cmv2-spacing-md);
    background: var(--cmv2-bg-lighter);
    color: var(--cmv2-text-light);
    border-radius: var(--cmv2-radius-round);
}

.cmv2-empty__title {
    margin: 0 0 var(--cmv2-spacing-sm);
    font-size: var(--cmv2-font-md);
    font-weight: 600;
    color: var(--cmv2-text-primary);
}

.cmv2-empty__text {
    margin: 0;
    font-size: var(--cmv2-font-sm);
}

/* ==========================================================================
   12. Accessibility Helpers
   ========================================================================== */

/* Screen reader only */
.cmv2-sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.cmv2-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: var(--cmv2-spacing-sm) var(--cmv2-spacing-md);
    background: var(--cmv2-bg-dark);
    color: #ffffff;
    text-decoration: none;
    z-index: 100000;
}

.cmv2-skip-link:focus {
    top: 0;
}

/* Focus visible */
.cmv2-focus-visible:focus {
    outline: 3px solid var(--cmv2-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .cmv2-button,
    .cmv2-btn {
        border: 2px solid currentColor;
    }

    .cmv2-input,
    .cmv2-select,
    .cmv2-textarea {
        border-width: 2px;
    }
}

/* ==========================================================================
   13. Animations
   ========================================================================== */

@keyframes cmv2-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cmv2-skeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes cmv2-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes cmv2-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cmv2-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.cmv2-animate-fade-in {
    animation: cmv2-fade-in 0.3s ease;
}

.cmv2-animate-slide-up {
    animation: cmv2-slide-up 0.3s ease;
}

.cmv2-animate-pulse {
    animation: cmv2-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   14. Responsive Utilities
   ========================================================================== */

/* Hide on breakpoints */
@media (max-width: 575.98px) {
    .cmv2-hide-xs {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .cmv2-hide-sm {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .cmv2-hide-md {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .cmv2-hide-lg {
        display: none !important;
    }
}

/* Responsive text */
@media (max-width: 767.98px) {
    .cmv2-text-center-mobile {
        text-align: center !important;
    }
}

/* Responsive Grid */
@media (max-width: 1023.98px) {
    .cmv2-grid--cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .cmv2-grid--cols-3,
    .cmv2-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cmv2-grid {
        gap: var(--cmv2-spacing-md);
    }
}

@media (max-width: 575.98px) {
    .cmv2-grid--cols-2,
    .cmv2-grid--cols-3,
    .cmv2-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Responsive Contact Form */
@media (max-width: 767.98px) {
    .cmv2-contact__field-row {
        grid-template-columns: 1fr;
    }

    .cmv2-contact__form-grid {
        padding: var(--cmv2-spacing-md);
    }

    .cmv2-contact__owner-info {
        padding: var(--cmv2-spacing-md);
    }

    .cmv2-contact__section-title {
        font-size: var(--cmv2-font-sm);
    }

    .cmv2-contact__submit {
        width: 100%;
        justify-content: center;
    }

    .cmv2-contact__section--submit {
        align-items: stretch;
    }
}

@media (max-width: 575.98px) {
    .cmv2-contact__input,
    .cmv2-contact__textarea {
        padding: 0.625rem 0.75rem;
        font-size: var(--cmv2-font-sm);
    }

    .cmv2-contact__label {
        font-size: var(--cmv2-font-xs);
    }
}

/* ==========================================================================
   15. Print Styles
   ========================================================================== */

@media print {
    .cmv2-button,
    .cmv2-btn,
    .cmv2-contact__submit,
    .cmv2-lightbox,
    .cmv2-loading {
        display: none !important;
    }

    .cmv2-container,
    .cmv2-card,
    .cmv2-contact__form {
        border: 1px solid #000;
        box-shadow: none;
    }

    .cmv2-notice {
        border: 1px solid #000;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .cmv2-card__image img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   16. FREE Mode Promotional Link
   ========================================================================== */

.cmv2-free-promo {
    margin: 12px 0 0 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 4px;
    font-size: 12px;
    color: #2e7d32;
    text-align: right;
}

.cmv2-free-promo a {
    color: #1b5e20;
    font-weight: 600;
    text-decoration: none;
}

.cmv2-free-promo a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   End of Frontend Styles
   ========================================================================== */