/**
 * ClinicPress — Brand Design System
 * File: assets/css/cp-brand.css
 * Font: Montserrat (Google Fonts)
 * Domain: clinicpress-booking.com
 *
 * Usage: enqueue this file on both frontend and admin.
 * Import Montserrat in your PHP enqueue function:
 *   wp_enqueue_style(
 *       'clinicpress-fonts',
 *       'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'
 *   );
 *   wp_enqueue_style(
 *       'clinicpress-brand',
 *       CP_URL . 'assets/css/cp-brand.css',
 *       ['clinicpress-fonts'],
 *       CP_VERSION
 *   );
 */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');


/* ============================================================
   2. CSS CUSTOM PROPERTIES — LIGHT MODE (default)
   ============================================================ */

:root {

    /* --- Brand: Primary palette --- */
    --cp-navy:              #0A4B5C;   /* Headers, logo, nav background      */
    --cp-navy-dark:         #073544;   /* Hover on navy elements              */
    --cp-navy-light:        #E2EEF2;   /* Navy tints, info backgrounds        */

    --cp-teal:              #0DB89A;   /* Primary CTA, buttons, links         */
    --cp-teal-dark:         #0D7A68;   /* Button hover / active state         */
    --cp-teal-darker:       #085041;   /* Button pressed / focus ring         */
    --cp-teal-light:        #3DD6C0;   /* Accent highlights, icons on dark bg */
    --cp-teal-mist:         #F0F9F8;   /* Card backgrounds, section tints     */
    --cp-teal-mist-dark:    #E0F7F3;   /* Badges, pills, tag backgrounds      */

    --cp-coral:             #F5701A;   /* Pro badge, alerts, upgrade prompts  */
    --cp-coral-dark:        #C4530E;   /* Coral hover                         */
    --cp-coral-tint:        #FDEEE9;   /* Coral badge background              */

    /* --- Brand: Surface palette --- */
    --cp-bg-page:           #F8FBFC;   /* Page / body background              */
    --cp-bg-card:           #FFFFFF;   /* Card / panel background             */
    --cp-bg-input:          #E8F4F7;   /* Input field background              */
    --cp-bg-hover:          #EEF6F8;   /* Row hover, subtle highlight         */

    /* --- Brand: Text --- */
    --cp-text-primary:      #0A4B5C;   /* Headings, strong labels             */
    --cp-text-body:         #4A6B72;   /* Body copy, descriptions             */
    --cp-text-muted:        #7A99A2;   /* Meta, placeholders, captions        */
    --cp-text-inverse:      #FFFFFF;   /* Text on dark/teal backgrounds       */
    --cp-text-link:         #0DB89A;   /* Inline links                        */
    --cp-text-link-hover:   #0D7A68;   /* Link hover                          */

    /* --- Brand: Borders --- */
    --cp-border:            #D4E8EC;   /* Default border colour               */
    --cp-border-strong:     #A8CDD5;   /* Focused inputs, strong dividers     */
    --cp-border-subtle:     #EBF4F6;   /* Subtle card borders                 */

    /* --- Semantic: Status colours --- */
    --cp-success:           #1DB954;
    --cp-success-tint:      #E8F8EE;
    --cp-success-text:      #0D7A3A;

    --cp-warning:           #F0A500;
    --cp-warning-tint:      #FEF6E4;
    --cp-warning-text:      #8A5C00;

    --cp-error:             #E84040;
    --cp-error-tint:        #FDECEC;
    --cp-error-text:        #9B1A1A;

    --cp-info:              #0A4B5C;
    --cp-info-tint:         #E2EEF2;
    --cp-info-text:         #073544;

    /* --- Typography --- */
    --cp-font:              'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cp-font-mono:         'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

    --cp-text-xs:           11px;   /* Labels, badges, uppercase tags      */
    --cp-text-sm:           12px;   /* Meta, captions, table cells         */
    --cp-text-base:         14px;   /* Body text default                   */
    --cp-text-md:           16px;   /* Card titles, UI labels              */
    --cp-text-lg:           20px;   /* Section headings                    */
    --cp-text-xl:           24px;   /* Page headings                       */
    --cp-text-2xl:          28px;   /* Hero headings                       */
    --cp-text-3xl:          36px;   /* Marketing / landing page hero       */

    --cp-weight-light:      300;
    --cp-weight-regular:    400;
    --cp-weight-medium:     500;
    --cp-weight-semibold:   600;
    --cp-weight-bold:       700;

    --cp-leading-tight:     1.2;
    --cp-leading-snug:      1.4;
    --cp-leading-normal:    1.6;
    --cp-leading-relaxed:   1.8;

    --cp-tracking-tight:    -0.02em;
    --cp-tracking-normal:   0;
    --cp-tracking-wide:     0.04em;
    --cp-tracking-wider:    0.08em;   /* Uppercase labels                  */

    /* --- Spacing --- */
    --cp-space-1:           4px;
    --cp-space-2:           8px;
    --cp-space-3:           12px;
    --cp-space-4:           16px;
    --cp-space-5:           20px;
    --cp-space-6:           24px;
    --cp-space-8:           32px;
    --cp-space-10:          40px;
    --cp-space-12:          48px;
    --cp-space-16:          64px;

    /* --- Border radius --- */
    --cp-radius-sm:         4px;
    --cp-radius-md:         8px;
    --cp-radius-lg:         12px;
    --cp-radius-xl:         16px;
    --cp-radius-2xl:        24px;
    --cp-radius-pill:       999px;

    /* --- Shadows (flat design — use sparingly) --- */
    --cp-shadow-sm:         0 1px 3px rgba(10, 75, 92, 0.08);
    --cp-shadow-md:         0 2px 8px rgba(10, 75, 92, 0.10);
    --cp-shadow-focus:      0 0 0 3px rgba(13, 184, 154, 0.25);

    /* --- Transitions --- */
    --cp-transition:        150ms ease;
    --cp-transition-slow:   300ms ease;

    /* --- Z-index scale --- */
    --cp-z-dropdown:        100;
    --cp-z-modal:           200;
    --cp-z-toast:           300;
}


/* ============================================================
   3. CSS CUSTOM PROPERTIES — DARK MODE (disabled — light only)
   ============================================================ */


/* ============================================================
   4. BASE RESET — scoped to .cp-* elements only
   ============================================================ */

.cp-wrap,
.cp-wrap * {
    font-family: var(--cp-font);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cp-wrap {
    background: transparent;
    color: var(--cp-text-body);
    font-size: var(--cp-text-base);
    font-weight: var(--cp-weight-regular);
    line-height: var(--cp-leading-normal);
}


/* ============================================================
   5. TYPOGRAPHY HELPERS
   ============================================================ */

.cp-h1 {
    font-size: var(--cp-text-2xl);
    font-weight: var(--cp-weight-bold);
    color: var(--cp-text-primary);
    line-height: var(--cp-leading-tight);
    letter-spacing: var(--cp-tracking-tight);
    margin: 0 0 var(--cp-space-4);
}

.cp-h2 {
    font-size: var(--cp-text-lg);
    font-weight: var(--cp-weight-semibold);
    color: var(--cp-text-primary);
    line-height: var(--cp-leading-snug);
    letter-spacing: var(--cp-tracking-tight);
    margin: 0 0 var(--cp-space-3);
}

.cp-h3 {
    font-size: var(--cp-text-md);
    font-weight: var(--cp-weight-medium);
    color: var(--cp-text-primary);
    line-height: var(--cp-leading-snug);
    margin:0;
}

.cp-label {
    font-size: var(--cp-text-xs);
    font-weight: var(--cp-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--cp-tracking-wider);
    color: var(--cp-text-muted);
}

.cp-body {
    font-size: var(--cp-text-base);
    font-weight: var(--cp-weight-regular);
    color: var(--cp-text-body);
    line-height: var(--cp-leading-normal);
}

.cp-meta {
    font-size: var(--cp-text-sm);
    color: var(--cp-text-muted);
    line-height: var(--cp-leading-normal);
}

.cp-link {
    color: var(--cp-text-link);
    text-decoration: none;
    font-weight: var(--cp-weight-medium);
    transition: color var(--cp-transition);
}
.cp-link:hover {
    color: var(--cp-text-link-hover);
    text-decoration: underline;
}


/* ============================================================
   6. BUTTONS
   ============================================================ */

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-space-2);
    padding: 10px var(--cp-space-5);
    border-radius: var(--cp-radius-md) !important;
    font-family: var(--cp-font);
    font-size: var(--cp-text-base);
    font-weight: var(--cp-weight-semibold);
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background var(--cp-transition), color var(--cp-transition), transform var(--cp-transition);
    text-decoration: none;
    white-space: nowrap;
}


/* Primary */
.cp-btn-primary {
    background: var(--cp-teal);
    color: var(--cp-text-inverse) !important;
    box-shadow: none !important;
    outline: none !important;
}
.cp-btn-primary:hover {
    background: var(--cp-teal-dark);
}
.cp-btn-primary:focus-visible {
    outline: none;
    box-shadow: none !important;
}

/* Secondary (outlined) */
.cp-btn-secondary {
    background: transparent;
    color: var(--cp-navy) !important;
    border: 1.5px solid var(--cp-navy);
}
.cp-btn-secondary:hover {
    background: var(--cp-navy-light);
}

/* Ghost */
.cp-btn-ghost {
    background: transparent;
    color: var(--cp-text-body) !important;
    border: 1px solid var(--cp-border);
    box-shadow: none !important;
    outline: none !important;
}
.cp-btn-ghost:hover {
    background: var(--cp-bg-hover);
}

/* Danger */
.cp-btn-danger {
    background: var(--cp-error);
    color: #fff;
}
.cp-btn-danger:hover {
    background: var(--cp-error-text);
}

/* Sizes */
.cp-btn-sm {
    padding: 7px var(--cp-space-4);
    font-size: var(--cp-text-sm);
    border-radius: var(--cp-radius-sm);
    box-shadow: none !important;
    outline: none !important;
}
.cp-btn-lg {
    padding: 14px var(--cp-space-8);
    font-size: var(--cp-text-md);
    border-radius: var(--cp-radius-lg);box-shadow: none !important;
    outline: none !important;
}

/* Disabled */
.cp-btn:disabled,
.cp-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}


/* ============================================================
   7. BADGES & PILLS
   ============================================================ */

.cp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--cp-radius-pill);
    font-size: var(--cp-text-xs);
    font-weight: var(--cp-weight-semibold);
    letter-spacing: var(--cp-tracking-wide);
    text-transform: uppercase;
    line-height: 1.6;
}

.cp-badge-teal {
    background: var(--cp-teal-mist-dark);
    color: #0A7A68;
}
.cp-badge-navy {
    background: var(--cp-navy-light);
    color: var(--cp-navy);
}
.cp-badge-coral {
    background: var(--cp-coral-tint);
    color: var(--cp-coral-dark);
}
.cp-badge-success {
    background: var(--cp-success-tint);
    color: var(--cp-success-text);
}
.cp-badge-warning {
    background: var(--cp-warning-tint);
    color: var(--cp-warning-text);
}
.cp-badge-error {
    background: var(--cp-error-tint);
    color: var(--cp-error-text);
}
.cp-badge-pro {
    background: var(--cp-coral);
    color: #fff;
}


/* ============================================================
   8. CARDS
   ============================================================ */

.cp-card {
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding: var(--cp-space-6);
    height: 100%;
}

.cp-card-tint {
    background: var(--cp-teal-mist);
    border-color: var(--cp-border-subtle);
}

.cp-card-featured {
    border: 2px solid var(--cp-teal);
}

.cp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cp-space-4);
    padding-bottom: var(--cp-space-4);
    border-bottom: 1px solid var(--cp-border-subtle);
}


/* ============================================================
   9. FORM ELEMENTS
   ============================================================ */

body .cp-input,
body .cp-select,
body .cp-textarea {
    width: 100%;
    background: var(--cp-bg-input) !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-md) !important;
    padding: 7px var(--cp-space-4) !important;
    font-family: var(--cp-font);
    font-size: var(--cp-text-base);
    font-weight: var(--cp-weight-regular);
    color: var(--cp-text-primary);
    transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
    outline: none;
    appearance: none;
}

body .cp-select {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E) !important;
    background-repeat: no-repeat !important;
    background-size: 18px !important;
    background-position: right 8px top 55% !important;
    max-width: 100% !important;
    min-width: 140px;
    line-height: 1.5;
    min-height: 36px;
}
@media (max-width: 600px) {
    body .cp-select { min-width: 123px; }
}

.cp-input::placeholder,
.cp-textarea::placeholder {
    color: var(--cp-text-muted);
}

.cp-input:hover,
.cp-select:hover,
.cp-textarea:hover {
    border-color: var(--cp-border-strong);
}

.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus {
    border-color: var(--cp-teal) !important;
    box-shadow: none !important;
}

.cp-input-error {
    border-color: var(--cp-error);
}
.cp-input-error:focus {
    box-shadow: 0 0 0 3px rgba(232, 64, 64, 0.2);
}

.cp-field-label {
    display: block;
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-weight-semibold);
    color: var(--cp-text-primary);
    margin-bottom: var(--cp-space-2);
    letter-spacing: var(--cp-tracking-wide);
}

.cp-field-hint {
    font-size: var(--cp-text-xs);
    color: var(--cp-text-muted);
    margin-top: var(--cp-space-1);
}

.cp-field-error-msg {
    font-size: var(--cp-text-xs);
    color: var(--cp-error-text);
    margin-top: var(--cp-space-1);
    font-weight: var(--cp-weight-medium);
}


/* ============================================================
   10. NAVIGATION BAR
   ============================================================ */

.cp-nav {
    background: var(--cp-navy);
    padding: var(--cp-space-4) var(--cp-space-6);
    display: flex;
    align-items: center;
    gap: var(--cp-space-6);
}

.cp-nav-logo {
    font-size: var(--cp-text-md);
    font-weight: var(--cp-weight-bold);
    color: var(--cp-text-inverse);
    letter-spacing: var(--cp-tracking-tight);
    text-decoration: none;
}

.cp-nav-logo span {
    color: var(--cp-teal-light);
}

.cp-nav-links {
    display: flex;
    gap: var(--cp-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-nav-links a {
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-weight-medium);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color var(--cp-transition);
}

.cp-nav-links a:hover,
.cp-nav-links a.cp-active {
    color: var(--cp-text-inverse);
}

.cp-nav-cta {
    margin-left: auto;
    background: var(--cp-teal);
    color: var(--cp-text-inverse);
    padding: 8px var(--cp-space-4);
    border-radius: var(--cp-radius-md);
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-weight-semibold);
    text-decoration: none;
    transition: background var(--cp-transition);
}

.cp-nav-cta:hover {
    background: var(--cp-teal-dark);
}


/* ============================================================
   11. STATUS INDICATORS
   ============================================================ */

.cp-status {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-2);
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-weight-medium);
}

.cp-status::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cp-status-confirmed::before  { background: var(--cp-success); }
.cp-status-pending::before    { background: var(--cp-warning); }
.cp-status-cancelled::before  { background: var(--cp-error); }
.cp-status-completed::before  { background: var(--cp-teal); }
.cp-status-no-show::before    { background: var(--cp-text-muted); }

.cp-status-confirmed  { color: var(--cp-success-text); }
.cp-status-pending    { color: var(--cp-warning-text); }
.cp-status-cancelled  { color: var(--cp-error-text); }
.cp-status-completed  { color: #0A7A68; }
.cp-status-no-show    { color: var(--cp-text-muted); }


/* ============================================================
   12. DIVIDERS & LAYOUT UTILITIES
   ============================================================ */

.cp-divider {
    height: 1px;
    background: var(--cp-border-subtle);
    border: none;
    margin: var(--cp-space-6) 0;
}

.cp-section {
    margin-bottom: var(--cp-space-10);
}

.cp-section-title {
    font-size: var(--cp-text-xs);
    font-weight: var(--cp-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--cp-tracking-wider);
    color: var(--cp-text-muted);
    margin-bottom: var(--cp-space-4);
    padding-bottom: var(--cp-space-3);
    border-bottom: 1px solid var(--cp-border-subtle);
}

.cp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cp-space-4); }
.cp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cp-space-4); }
.cp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cp-space-4); }

@media (max-width: 768px) {
    .cp-grid-3, .cp-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cp-grid-2, .cp-grid-3, .cp-grid-4 { grid-template-columns: 1fr; }
}


/* ============================================================
   13. ADMIN-SPECIFIC OVERRIDES
   ============================================================ */

.cp-admin-wrap {
    font-family: var(--cp-font) !important;
}

.cp-admin-wrap h1,
.cp-admin-wrap h2,
.cp-admin-wrap h3 {
    font-family: var(--cp-font) !important;
    color: var(--cp-text-primary) !important;
    font-weight: var(--cp-weight-semibold) !important;
}

.cp-admin-page-title {
    font-size: var(--cp-text-xl);
    font-weight: var(--cp-weight-bold);
    color: var(--cp-text-primary);
    margin-bottom: var(--cp-space-6);
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
}

.cp-admin-page-title .cp-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cp-teal);
    display: none;
}

/* ============================================================
   14. PRO UPGRADE PROMPT
   ============================================================ */

.cp-pro-gate {
    background: var(--cp-teal-mist);
    border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-coral);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-4) var(--cp-space-5);
    margin-bottom: var(--cp-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-4);
}

.cp-pro-gate-text {
    font-size: var(--cp-text-sm);
    color: var(--cp-text-body);
    font-weight: var(--cp-weight-medium);
}

.cp-pro-gate-text strong {
    color: var(--cp-text-primary);
    font-weight: var(--cp-weight-semibold);
}


/* ============================================================
   15. TOAST NOTIFICATIONS
   ============================================================ */

.cp-toast {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-3);
    padding: var(--cp-space-3) var(--cp-space-5);
    border-radius: var(--cp-radius-md);
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-weight-medium);
    font-family: var(--cp-font);
}

.cp-toast-success { background: var(--cp-success-tint); color: var(--cp-success-text); border: 1px solid var(--cp-success); }
.cp-toast-error   { background: var(--cp-error-tint);   color: var(--cp-error-text);   border: 1px solid var(--cp-error); }
.cp-toast-warning { background: var(--cp-warning-tint); color: var(--cp-warning-text); border: 1px solid var(--cp-warning); }
.cp-toast-info    { background: var(--cp-info-tint);    color: var(--cp-info-text);    border: 1px solid var(--cp-teal); }