/* ========================================
   GLOBAL DESIGN TOKENS
   (Shared across all pages)
   ======================================== */

:root {
    /* Brand Colors */
    --lapdog-teal: #3586b8;
    --lapdog-teal-light: #7fb4d1;
    --lapdog-teal-dark: #2a6d96;
    --lapdog-navy: #034078;
    --lapdog-navy-light: #0a5294;

    /* Extended Palette */
    --warm-cream: #fefcfb;
    --warm-cream-dark: #f0f4fa;
    --soft-sage: #e8eff6;
    --soft-coral: #FFE5E0;
    --soft-coral-accent: #FF8A7A;
    --text-primary: #1a1a2e;
    --text-secondary: #5A6D73;
    --text-muted: #8FA0A6;
    --border-light: #E5E9EB;
    --border-medium: #C8D1D4;
    --white: #FFFFFF;
    --success-green: #2D9D78;
    --success-bg: #E8F5F0;
    --warning-amber: #E5A84B;
    --warning-bg: #FDF6E8;
    --danger-red: #D64545;
    --danger-bg: #FDE8E8;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04), 0 1px 3px rgba(26, 26, 46, 0.06);
    --shadow-md: 0 4px 6px rgba(26, 26, 46, 0.04), 0 2px 4px rgba(26, 26, 46, 0.06);
    --shadow-lg: 0 10px 20px rgba(26, 26, 46, 0.06), 0 4px 8px rgba(26, 26, 46, 0.04);
    --shadow-xl: 0 20px 40px rgba(26, 26, 46, 0.08), 0 8px 16px rgba(26, 26, 46, 0.04);
    --shadow-teal: 0 4px 14px rgba(53, 134, 184, 0.25);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ========================================
   TOAST MESSAGES (base template)
   ======================================== */

.lapdog-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 700px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.925rem;
    line-height: 1.4;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn 0.3s ease-out;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.lapdog-toast + .lapdog-toast {
    top: 140px;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.lapdog-toast.hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px);
}

.lapdog-toast i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.lapdog-toast span {
    flex: 1;
}

.lapdog-toast span a {
    color: var(--lapdog-teal-dark);
    font-weight: 600;
    text-decoration: underline;
}

.lapdog-toast span a:hover {
    color: var(--lapdog-navy);
}

.lapdog-toast-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.lapdog-toast-close:hover {
    opacity: 1;
}

/* Variants */
.lapdog-toast-success {
    background: var(--success-bg);
    color: var(--success-green);
    border: 1px solid rgba(45, 157, 120, 0.2);
}

.lapdog-toast-success .lapdog-toast-close {
    color: var(--success-green);
}

.lapdog-toast-warning {
    background: var(--warning-bg);
    color: #8a6318;
    border: 1px solid rgba(229, 168, 75, 0.25);
}

.lapdog-toast-warning .lapdog-toast-close {
    color: #8a6318;
}

.lapdog-toast-error,
.lapdog-toast-danger {
    background: var(--danger-bg);
    color: var(--danger-red);
    border: 1px solid rgba(214, 69, 69, 0.2);
}

.lapdog-toast-error .lapdog-toast-close,
.lapdog-toast-danger .lapdog-toast-close {
    color: var(--danger-red);
}

.lapdog-toast-info {
    background: var(--soft-sage);
    color: var(--lapdog-navy);
    border: 1px solid rgba(3, 64, 120, 0.12);
}

.lapdog-toast-info .lapdog-toast-close {
    color: var(--lapdog-navy);
}


/* ========================================
   HELP MODAL - GETTING STARTED TRACKER
   ======================================== */

.help-modal .modal-content {
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.help-modal-header {
    background: var(--soft-sage);
    border-bottom: 1px solid var(--border-light);
    padding: 20px 24px 16px;
}

.help-modal-header .modal-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--lapdog-navy);
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.help-modal-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.help-progress-bar {
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    margin-top: 12px;
    overflow: hidden;
}

.help-progress-fill {
    height: 100%;
    background: var(--lapdog-teal);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.help-modal-body {
    padding: 24px;
}

.help-steps {
    display: flex;
    flex-direction: column;
}

.help-step {
    display: flex;
    gap: 16px;
}

.help-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.help-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--transition-base);
}

.help-step-circle--completed {
    background: var(--success-green);
    color: var(--white);
}

.help-step-circle--active {
    background: var(--lapdog-teal);
    color: var(--white);
    box-shadow: var(--shadow-teal);
}

.help-step-circle--waiting {
    background: var(--warning-bg);
    color: var(--warning-amber);
    border: 2px solid var(--warning-amber);
}

.help-step-circle--pending {
    background: var(--white);
    color: var(--text-muted);
    border: 2px solid var(--border-light);
}

.help-step-circle--locked {
    background: var(--border-light);
    color: var(--text-muted);
}

.help-step-line {
    width: 2px;
    flex: 1;
    min-height: 16px;
    transition: background var(--transition-base);
}

.help-step-line--completed {
    background: var(--success-green);
}

.help-step-line--active {
    background: var(--lapdog-teal);
}

.help-step-line--waiting {
    background: var(--warning-amber);
}

.help-step-line--pending,
.help-step-line--locked {
    background: var(--border-light);
}

.help-step-content {
    flex: 1;
    padding-bottom: 20px;
}

.help-step:last-child .help-step-content {
    padding-bottom: 0;
}

.help-step-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-step-label i {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
}

.help-step--completed .help-step-label {
    color: var(--success-green);
}

.help-step--pending .help-step-label,
.help-step--locked .help-step-label {
    color: var(--text-muted);
}

.help-step-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 4px 0 8px;
    line-height: 1.4;
}

.help-step--pending .help-step-desc,
.help-step--locked .help-step-desc {
    color: var(--text-muted);
}

.help-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-base);
}

.help-step-btn--primary {
    background: linear-gradient(135deg, var(--lapdog-teal) 0%, var(--lapdog-teal-dark) 100%);
    color: var(--white);
    box-shadow: var(--shadow-teal);
}

.help-step-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(53, 134, 184, 0.35);
    color: var(--white);
    text-decoration: none;
}

.help-step-btn--secondary {
    background: var(--white);
    color: var(--text-secondary);
    border: 2px solid var(--border-medium);
}

.help-step-btn--secondary:hover {
    border-color: var(--lapdog-navy);
    color: var(--lapdog-navy);
    text-decoration: none;
}

.help-waiting-banner {
    background: var(--warning-bg);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-left: 3px solid var(--warning-amber);
    margin: 4px 0 8px;
}

.help-waiting-banner i {
    color: var(--warning-amber);
    font-size: 1.1rem;
    margin-top: 2px;
}

.help-waiting-banner strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.help-waiting-banner p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.help-section-divider {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 4px 0 12px;
    padding-left: 48px;
}

.help-modal .modal-footer {
    border-top: 1px solid var(--border-light);
    padding: 12px 24px;
}

.help-modal .modal-footer .btn {
    font-family: 'DM Sans', sans-serif;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 24px;
    background: var(--white);
    color: var(--text-secondary);
    border: 2px solid var(--border-medium);
    transition: all var(--transition-base);
}

.help-modal .modal-footer .btn:hover {
    border-color: var(--lapdog-navy);
    color: var(--lapdog-navy);
}


#headerborder {
    background:#fff;
    overflow:auto;
    border-bottom:3px solid #034078;
}

.center {
  margin: auto;

  padding: 70px 0;
  text-align: center;


}



/*
#header .logo {
    text-decoration:none;
    font-family:'Roboto', sans-serif;
    font-weight:5000;

    font-size:24px;
    color:#fff;
    float:left;
}

#header a {
    color:#36454f;
}

#header .menu {
    list-style:none;
    float:right;
    margin:0;
    padding:0;
}

.contents {
    width:20%;
    padding:10px;
    float:left;
    background:#333;
    color: #fff;
    font-family:'Roboto', sans-serif;
}

.contents ul {
    list-style:none;
    margin:0;
    padding:0;
}

.contents ul li {
    margin:0 0 10px 0;
    padding:4px 10px 10px;
    overflow:auto;
}

.contents ul li.selected {
    background:#3f3f3f;
}

.contents ul li:hover {
    background:#3f3f3f;
    cursor:move;
}

.contents ul span {
    text-transform:uppercase;
    color:#bbb;
    font-size:14px;
}

.contents ul a {
    display:block;
    color:#fff;
    text-decoration:none;
}

.contents ul a:hover {
    color:#4dcc43;
}

ul.content-types li {
    list-style:none;
    float:left;
    margin:10px;
    background:#efefef;
    padding:8px 14px;
}

.hidden {
    display:none;
}

form p {
    overflow:auto;
}

.errorlist {
    color:#ae2c2c;
    margin:0;
}

label {
    float:left;
    clear:both;
    margin:0 0 8px 0;
}

input, select, textarea {
    border:1px solid #ccc;
    border-bottom:3px solid #ccc;
    padding:8px 12px;
    font-size:16px;
    font-family:'Roboto', sans-serif;
    float:left;
    clear:both;
    width:300px;
}

textarea {
    height:80px;
}

select {
    width:324px;
}

input[type=submit], a.button {
    border-radius:5px;
    background:#3586b8;
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    border:none;
    padding:10px 20px;
    margin:20px 0;
}

a.secondary-button {
    border:3px solid #4dcc43;
    padding:10px 20px;
    margin:10px 0;
}

input[type=submit]:hover, a.button:hover {
    background:#2a6d96;
}

ul#course-modules {
    list-style:none;
    overflow:auto;
}

ul#course-modules textarea {
    width:600px;
    height:120px;
}

ul#course-modules li {
    padding:20px;
    overflow:auto;
}

ul#course-modules li:nth-child(even) {
    background:#efefef;
}

ul#course-modules li:hover {
    background:#ccc;
    cursor:move;
}

#module-contents div {
    padding:10px 20px;
    border:1px solid #ccc;
    background:#fff
}

#module-contents form {
    margin:0;
    padding:0;
}

#module-contents input[type=submit] {
    color:#3fad37;
    background:none;
    margin:-20px 0 0;
    padding:0;
    float:left;
    text-transform:none;
}

#module-contents div:hover {
    cursor:move;
}

.course-info {
    border:1px solid #ccc;
    padding:0 20px;
    margin-bottom:10px;
    width:400px;
    overflow:auto;
}

.course-info a {
    margin-right:10px;
}


.booking-info {
    border:1px solid #ccc;
    border-radius: 10px;
    padding:0 20px;
    margin-bottom:10px;
    width:600px;
    overflow:auto;
}

.booking-info a {
    margin-right:10px;
}

.petprofile-info {
    border:1px solid #ccc;
    border-radius: 10px;
    padding:0 20px;
    margin-bottom:10px;
    width:400px;
    overflow:auto;
}

.petprofile-info a {
    margin-right:10px;
}

.helptext {
    color:#ccc;
    padding-left:20px;
} */

/* ============================================================
   APP-WIDE BUTTONS (.btn-lapdog*)
   Moved from clinics.css for LAP-151 so pages outside the
   clinics module (calendar, dashboard, etc.) can use the same
   styling without loading the clinics stylesheet.
   ============================================================ */

.btn-lapdog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1;
}

.btn-lapdog:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-lapdog-primary {
    background: linear-gradient(135deg, var(--lapdog-teal) 0%, var(--lapdog-teal-dark) 100%);
    color: var(--white);
    box-shadow: var(--shadow-teal);
}

.btn-lapdog-primary:hover {
    color: var(--white);
    box-shadow: 0 6px 20px rgba(53, 134, 184, 0.35);
}

.btn-lapdog-secondary {
    background: var(--white);
    color: var(--text-secondary);
    border: 2px solid var(--border-medium);
}

.btn-lapdog-secondary:hover {
    color: var(--lapdog-navy);
    border-color: var(--lapdog-teal);
}

.btn-lapdog-success {
    background: var(--success-green);
    color: var(--white);
}

.btn-lapdog-success:hover {
    color: var(--white);
    background: #248a69;
}

.btn-lapdog-danger {
    background: transparent;
    color: var(--danger-red);
    border: 2px solid var(--danger-red);
}

.btn-lapdog-danger:hover {
    background: var(--danger-bg);
    color: var(--danger-red);
}

.btn-lapdog-sm {
    padding: 8px 16px;
    font-size: 0.82rem;
}