/* ===========================================
   TMATCH THERAPIST PROFILE - RESPONSIVE CSS
   Converting Fixed Figma CSS to Responsive Grid
   =========================================== */

/* ===== RESET & VARIABLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --primary-teal: #447569;
    --primary-light: #699187;
    --primary-dark: #03494B;
    --secondary-orange: #F99522;
    --secondary-yellow: #FEE478;
    --background: #FFFEFD;
    --white: #FFFFFF;
    --text-dark: #0E2A2E;
    --text-gray: #728B96;
    --border: #D9D9D9;
    
    /* Landing page color aliases */
    --color-primary: #447569;
    --color-primary-dark: #03494B;
    --color-accent: #1F9A73;
    --color-accent-teal: #229085;
    --color-orange-gradient: linear-gradient(180deg, #F99522 0%, #FEE478 100%);
    --color-bg-light: #EBF3F1;
    --color-bg-chat: rgba(215, 230, 227, 0.5);
    --color-text-dark: #03494B;
    --color-text-gray: #6D6F75;
    --color-text-light-gray: rgba(88, 85, 94, 0.5);
    --color-text-muted: rgba(3, 73, 75, 0.6);
    --color-border: rgba(3, 73, 75, 0.5);
    --color-border-light: #D9D9D9;
    --color-white: #FFFFFF;
    --color-black: #212121;
    
    /* Gradients */
    --gradient-hero: linear-gradient(360deg, #FDFDF4 0%, #E3F1EC 100.67%, #DAF2E8 129.02%);
    --gradient-orange: linear-gradient(94.07deg, #F99522 9.45%, #FEE478 135.58%);
    --gradient-spec-label: linear-gradient(90deg, #DAF2E8 0%, #E3F1EC 100%);
    --gradient-spec-desc: linear-gradient(90deg, #E3F1EC 0%, #FDFDF4 55.89%, #E5F6FF 100%);
    
    /* Layout */
    --sidebar-width: 379px;
    --main-max-width: 750px;
    --container-max: 1440px;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 50px;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, sans-serif;
    --font-brand: 'Comfortaa', cursive;
    --font-logo: 'Comfortaa', cursive;
    
    /* Font Sizes - Fluid Typography */
    --fs-hero: clamp(48px, 6vw, 90px);
    --fs-section-title: clamp(40px, 4.5vw, 65px);
    --fs-card-title: clamp(22px, 2vw, 26px);
    --fs-body: clamp(18px, 1.5vw, 26px);
    --fs-small: clamp(14px, 1.2vw, 20px);
    --fs-nav: clamp(18px, 1.5vw, 24px);
    
    /* Border Radius */
    --radius-sm: 13px;
    --radius-md: 20px;
    --radius-lg: 50px;
    --radius-full: 99px;
}

body {
    font-family: var(--font-primary);
    background: var(--background);
    color: var(--text-dark);
    line-height: 1.5;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 77px;
}

/* ===== HEADER ===== */
/* ========================================
   HEADER SECTION
   ======================================== */
.header {
    padding: var(--spacing-md) 0;
    position: relative;
}

.header .container {
    max-width: 1400px;
    padding: 0 clamp(20px, 1vw, 20px);;
}

.header-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-logo {
    font-family: var(--font-logo);
    font-size: 32px;
    font-weight: 500;
    color: var(--color-primary);
}

.header-logo a {
    font-family: var(--font-logo);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-nav a {
    font-size: var(--fs-nav);
    font-weight: 400;
    color: var(--color-text-dark);
    transition: color 0.3s ease;
    text-decoration: none;
}

.header-nav a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.header-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.header-nav-buttons {
    display: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--color-primary-dark);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* ===== BUTTONS ===== */
.btn {
    padding: 12px 30px;
    font-size: 22px;
    font-weight: 500;
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 150px;
    border: none;
    outline: none;
}

.btn-primary {
    background: var(--color-orange-gradient);
    color: var(--color-white);
    border: none;
}

.btn-outline {
    background: transparent;
    border: 1.6px solid var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn:focus {
    outline: none;
    border: none;
}

.btn-book {
    background: var(--gradient-orange);
    color: var(--white);
    box-shadow: inset 0px -4px 10px rgba(255, 214, 93, 0.7);
    min-width: 200px;
    border-radius: 137px;
}

.btn-save {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    min-width: 200px;
    border-radius: 100px;
}

.btn-full {
    width: 100%;
}

.btn-centered {
    display: block;
    margin: var(--spacing-lg) auto 0;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* ===== HERO CARD ===== */
.hero-wrapper {
    background: var(--gradient-hero);
    padding: calc(var(--spacing-2xl) * 0.8) calc(77px * 0.8);
}

.hero-card {
    max-width: var(--container-max);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: calc(48px * 0.8) calc(50px * 0.8);
    display: grid;
    grid-template-columns: calc(393px * 0.8) 1fr;
    gap: calc(var(--spacing-2xl) * 0.8);
    position: relative;
    transform: scale(0.8);
    transform-origin: top center;
    width: 125%;
    margin-left: -12.5%;
}

.hero-photo-container {
    width: calc(393px * 0.8);
    height: auto;
}

.hero-photo {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: contain;
}

.hero-info h1 {
    font-size: calc(52px * 0.8);
    font-weight: 800;
    line-height: 1.47;
    color: var(--primary-teal);
    margin-bottom: calc(-8px * 0.8);
}

.hero-info .subtitle {
    font-size: calc(24px * 0.8);
    font-weight: 500;
    line-height: 1.55;
    color: var(--primary-light);
    margin-bottom: calc(var(--spacing-lg) * 0.8);
}

.tags {
    display: flex;
    gap: calc(13px * 0.8);
    margin-bottom: calc(var(--spacing-lg) * 0.8);
    flex-wrap: wrap;
}

.tag {
    padding: calc(6px * 0.8) calc(12px * 0.8);
    background: #F8FBF9;
    border-radius: 100px;
    font-size: calc(18px * 0.8);
    font-weight: 400;
}

.details {
    display: flex;
    flex-direction: column;
    gap: calc(12px * 0.8);
    margin-bottom: calc(var(--spacing-md) * 0.8);
}

.details p {
    font-size: calc(18px * 0.8);
    line-height: 1.55;
    display: flex;
    align-items: center;
    gap: calc(4px * 0.8);
}

.supervision {
    font-size: calc(18px * 0.8);
    line-height: 1.55;
    margin-bottom: calc(var(--spacing-lg) * 0.8);
}

.hero-buttons {
    display: flex;
    gap: calc(var(--spacing-md) * 0.8);
}

.matching-score {
    position: absolute;
    top: 10px;
    right: 0;
    width: 98px;
    height: 192px;
    background: var(--primary-teal);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 14px;
    transform: rotate(90deg);
    transform-origin: top right;
}

.matching-score .score-label {
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.08;
    color: var(--white);
    margin-bottom: 6px;
}

.matching-score .score-value {
    font-style: italic;
    font-weight: 600;
    font-size: 50px;
    line-height: 1.08;
    letter-spacing: -0.05em;
    color: var(--white);
}

/* ===== TWO-COLUMN LAYOUT ===== */
.page-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 55px 77px 0;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

/* ===== SIDEBAR ===== */
.sidebar {
    display: flex;
    flex-direction: column;
}

.sidebar-card {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 40px 30px;
}

.sidebar-card h3 {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 0;
}

.nav-separator {
    height: 1px;
    background: #E5E5E5;
    margin: 30px 0;
}

.sidebar-nav-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: calc(57px * 0.8) calc(73px * 0.8);
}

.card h2 {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
}

.card h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

/* Session Card */
.session-card {
    /* Sticky positioning now on parent .sidebar */
}

.session-card h3 {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: var(--spacing-lg);
    margin-top: 0;
}

.session-item {
    display: flex;
    gap: 13px;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--text-gray);
}

.session-item:first-of-type {
    padding-top: 0;
}

.session-item:last-of-type {
    border-bottom: none;
}

.session-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.session-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.session-content h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 4px;
}

.session-content p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-gray);
}

/* Sidebar Navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: 41px 37px;
    /* Sticky positioning now on parent .sidebar */
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--primary-teal);
    text-decoration: none;
    transition: all 0.3s;
}

.nav-link.active {
    font-weight: 700;
}

.nav-link .arrow {
    display: inline-block;
    transition: transform 0.3s;
    width: 0;
    overflow: hidden;
    font-style: normal;
}

.nav-link.active .arrow {
    width: auto;
}

.nav-link:hover {
    transform: translateX(4px);
}

/* ===== MAIN CONTENT ===== */
.main-content {
    max-width: var(--main-max-width);
}

.content-section {
    margin-bottom: var(--spacing-lg);
}

.content-section p {
    font-size: 16px;
    line-height: 1.5;
}

/* ===== SPECIALTIES ===== */
.specialty-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: var(--spacing-xl);
}

.specialty-item {
    display: grid;
    grid-template-columns: auto 1fr;
    height: 41px;
    border-radius: 8px;
    overflow: hidden;
}

.spec-label {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--gradient-spec-label);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.spec-desc {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--gradient-spec-desc);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
}

.therapy-tags {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

.therapy-tag {
    padding: 20px 24px;
    background: #F8FBF9;
    border: 1px solid #85A79E;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
}

/* ===== EVALUATION LAYOUT (SIDE-BY-SIDE) ===== */
.eval-layout {
    display: grid;
    grid-template-columns: 244px 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.eval-categories {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.eval-cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    height: 39px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.eval-cat:hover {
    opacity: 0.8;
}

.eval-cat.selected {
    border: 2px solid #000;
}

/* Base colors for unselected categories */
.eval-empathy { background: #FAEFEC; }
.eval-listening { background: #9BA6EE; }
.eval-feedback { background: #FAE9F4; }
.eval-reflection { background: #EDF2E9; }
.eval-professional { background: #E6E5EF; }

/* Darker shades when selected */
.eval-empathy.selected { background: #F5D5CB; }
.eval-listening.selected { background: #7B8BE0; }
.eval-feedback.selected { background: #F5D4E9; }
.eval-reflection.selected { background: #D8E7CF; }
.eval-professional.selected { background: #D4D1E3; }

.eval-cat .score {
    font-size: 22px;
    font-weight: 500;
}

.eval-detail-container {
    position: relative;
    min-height: 200px;
}

.eval-detail {
    display: none;
    padding: var(--spacing-md);
    border-radius: 8px;
    min-height: 150px;
}

.eval-detail.active {
    display: block;
}

/* Lighter shades for detail box (lighter than unselected category) */
.eval-detail.eval-empathy { background: #FDF7F5; }
.eval-detail.eval-listening { background: #E8EBFA; }
.eval-detail.eval-feedback { background: #FDF6FB; }
.eval-detail.eval-reflection { background: #F6FAF4; }
.eval-detail.eval-professional { background: #F5F4FA; }

.eval-detail h4 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: var(--spacing-sm);
}

.eval-detail p {
    font-size: 16px;
    line-height: 1.5;
    color: #727272;
}


/* ===== RADAR CHART ===== */
.radar-chart {
    padding: var(--spacing-xl);
    background: linear-gradient(180deg, #F3F9F1 0%, #EAF4EE 78.37%, #DCF2E9 100%);
    border-radius: 10px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.chart-placeholder {
    color: var(--text-gray);
    font-size: 18px;
}

/* ===== TRANSCRIPT ===== */
.transcript {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: linear-gradient(180deg, #F3F9F1 0%, #EAF4EE 78.37%, #DCF2E9 100%);
    border-radius: 10px;
    position: relative;
}

/* Vertical timeline line */
.transcript::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        #C5D9D3 10%, 
        #C5D9D3 90%, 
        transparent 100%);
    border-left: 2px dashed #C5D9D3;
}

.message {
    margin-bottom: var(--spacing-xl);
    position: relative;
}

.message:last-child {
    margin-bottom: 0;
}

/* USER MESSAGES (RIGHT SIDE) */
.message-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 50%;
}

.message-user .msg-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.message-user .name {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-dark);
}

.message-user .user-avatar {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    object-fit: cover;
}

.message-user .msg-bubble-user {
    background: rgba(68, 117, 105, 0.6);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 12px 12px 2px 12px;
    font-size: 13.66px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 4px;
}

.message-user .msg-time {
    font-size: 10px;
    color: #7C9992;
    text-align: right;
}

/* AI MESSAGES (LEFT SIDE) */
.message-ai {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 50%;
}

.message-ai .msg-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.message-ai .avatar-ai {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--primary-teal);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.message-ai .name {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-dark);
}

.message-ai .msg-bubble-ai {
    background: rgba(213, 228, 224, 0.6);
    color: #394441;
    padding: 12px 20px;
    border-radius: 12px 12px 12px 2px;
    font-size: 11.96px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 4px;
}

.message-ai .msg-time {
    font-size: 10px;
    color: #7C9992;
    text-align: left;
}

/* ===== PRACTICE DETAILS ===== */
.practice-box {
    padding: 20px 24px;
    background: #F2FBFF;
    border: 1px solid #799CC6;
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
}

.practice-box p {
    font-weight: 400;
    font-size: 15.6px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.practice-box p:first-child {
    margin-bottom: 12px;
}

.practice-box p strong {
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

/* ===== BOOKING ===== */
.booking-layout {
    display: grid;
    grid-template-columns: 2fr auto 1fr;
    gap: 45px;
    margin-bottom: var(--spacing-lg);
    align-items: start;
    max-width: 100%;
}

.divider {
    width: 1px;
    height: 100%;
    background: #D5DFDF;
    border-right: 1px dashed #D5DFDF;
}

/* Calendar */
.calendar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 100%;
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.cal-nav {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #044343;
    border: none;
    color: var(--white);
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.2s;
}

.cal-nav:hover {
    transform: scale(1.1);
}

.cal-month {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.36px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    max-width: 100%;
}

.cal-day-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    line-height: 14px;
    color: #3C413F;
    text-align: center;
    padding: 14px 0;
}

.cal-date {
    aspect-ratio: 1;
    max-width: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    letter-spacing: -0.26px;
    color: #263238;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.cal-date.disabled {
    color: #BFC9C9;
    cursor: default;
}

.cal-date.available {
    background: rgba(4, 67, 67, 0.09);
}

.cal-date.selected {
    background: var(--primary-teal);
    color: var(--white);
}

.cal-date:not(.disabled):hover {
    background: rgba(4, 67, 67, 0.15);
}

/* Time Slots */
.time-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 280px;
}

.time-slots h4 {
    font-size: 14px;
    font-weight: 500;
    color: #192020;
    margin-bottom: 10px;
    text-align: center;
}

.time-slot {
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid rgba(4, 67, 67, 0.32);
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.time-slot:hover {
    border-color: var(--primary-teal);
    background: rgba(4, 67, 67, 0.05);
}

.time-slot.selected {
    background: var(--primary-teal);
    color: var(--white);
    border-color: var(--primary-teal);
}


/* ===== FOOTER ===== */
/* ========================================
   FOOTER SECTION
   ======================================== */
.footer {
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-lg) 0;
}

.footer .container {
    max-width: 1400px;
    padding: 0 clamp(20px, 2vw, 40px);
}

.footer-grid {
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(30px, 6vw, 80px);
}

.footer-main {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: clamp(30px, 3vw, 50px);
}

.footer-brand {
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(10px, 1vw, 15px);
    margin-right: clamp(60px, 12vw, 160px);
}

.footer-logo {
    font-family: var(--font-logo);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
}

.footer-social {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 32px;
    height: 32px;
}

.social-icon img {
    width: 100%;
    height: 100%;
}

.footer-column h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 20px;
}

.footer-column a {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-column a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: var(--color-border-light);
}

.footer-divider-full {
    width: 100%;
    height: 1px;
    background: var(--color-border-light);
    margin: var(--spacing-lg) 0;
}

.footer-bottom {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.footer-copyright {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-primary-dark);
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.footer-links a {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-gray);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-disclaimer {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
    text-align: left;
}


/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 1200px) {
    .container {
        padding: 0 30px;
    }
    
    .hero-wrapper {
        padding: var(--spacing-xl) 30px;
    }
    
    .page-layout {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .sidebar {
        order: 1;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    
    .main-content {
        order: 2;
        max-width: 100%;
    }
    
    .session-card {
        position: static;
    }
    
    .sidebar-nav {
        position: static;
    }
    
    .hero-card {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 30px;
    }
    
    .hero-photo-container {
        width: 100%;
        max-width: 393px;
        height: auto;
        margin: 0 auto;
    }
    
    .hero-info {
        text-align: center;
    }
    
    .tags {
        justify-content: center;
    }
    
    .details {
        align-items: center;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .matching-score {
        position: static;
        transform: none;
        width: 120px;
        height: 120px;
        margin: 0 auto;
        border-radius: 12px;
        padding-top: 20px;
    }
    
    /* Booking responsive - tablet */
    .booking-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .divider {
        display: none;
    }
    
    .calendar,
    .time-slots {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .calendar {
        max-width: 600px;
    }
    
    .time-slots {
        max-width: 400px;
    }
}

@media (max-width: 1024px) {
    .header-nav {
        gap: var(--spacing-md);
    }

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

    .footer-brand {
        grid-column: 1 / -1;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* Mobile Header - Compact Layout */
    .header-grid {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        justify-items: initial;
        text-align: left;
        gap: var(--spacing-sm);
    }

    .header-logo {
        font-size: 24px;
    }

    .menu-toggle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        grid-column: 1 / -1;
    }

    .header-nav.active {
        display: flex;
    }

    .header-nav-buttons {
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--border);
        margin-top: var(--spacing-sm);
        width: 100%;
    }

    .header-nav-buttons .btn {
        flex: 1;
        padding: 10px 20px;
        font-size: 16px;
        min-width: auto;
        max-width: 200px;
    }

    .header-buttons {
        display: none;
    }
    
    .card {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .hero-info h1 {
        font-size: 36px;
    }
    
    .hero-info .subtitle {
        font-size: 20px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .eval-layout {
        grid-template-columns: 1fr;
    }
    
    .eval-categories {
        order: 1;
    }
    
    .eval-detail-container {
        order: 2;
        margin-top: var(--spacing-md);
    }
    
    .booking-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .divider {
        display: none;
    }
    
    /* Booking mobile adjustments */
    .cal-grid {
        gap: 8px;
    }
    
    .cal-date {
        max-width: 50px;
        font-size: 16px;
    }
    
    .cal-nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .cal-month {
        font-size: 18px;
    }
    
    .cal-day-label {
        font-size: 12px;
        padding: 10px 0;
    }
    
    .time-slot {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .footer-disclaimer {
        text-align: center;
    }
    
    .sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-wrapper {
        padding: 20px 15px;
    }
    
    .page-layout {
        padding: 20px 15px;
    }
    
    .hero-card {
        padding: 20px;
    }
    
    .hero-info h1 {
        font-size: 28px;
    }
    
    .tags {
        flex-wrap: wrap;
    }
    
    .tag {
        font-size: 14px;
        padding: 4px 8px;
    }
    
    .nav-link {
        font-size: 18px;
    }
    
    /* Booking small mobile */
    .card.content-section {
        padding: 20px 15px;
    }
    
    .cal-grid {
        gap: 6px;
    }
    
    .cal-date {
        max-width: 40px;
        font-size: 14px;
    }
    
    .cal-nav {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .cal-month {
        font-size: 16px;
    }
    
    .cal-day-label {
        font-size: 11px;
        padding: 8px 0;
    }
    
    .time-slots h4 {
        font-size: 13px;
    }
    
    .time-slot {
        padding: 9px 14px;
        font-size: 12px;
    }
}
/* Scale factor - 100% (original size) */
:root {
    --scale: 1.0;
}

/* ===== HERO CARD (80% SCALED) ===== */
.hero-wrapper {
    padding: calc(var(--spacing-2xl) * var(--scale)) calc(77px * var(--scale));
}

.hero-card {
    padding: calc(48px * var(--scale)) calc(50px * var(--scale));
    grid-template-columns: calc(393px * var(--scale)) 1fr;
    gap: calc(var(--spacing-2xl) * var(--scale));
}

.hero-photo-container {
    width: calc(393px * var(--scale));
    height: auto;
}

.hero-info h1 {
    font-size: calc(52px * var(--scale));
    margin-bottom: calc(-8px * var(--scale));
}

.hero-info .subtitle {
    font-size: calc(24px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.tags {
    gap: calc(13px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.tag {
    padding: calc(6px * var(--scale)) calc(12px * var(--scale));
    font-size: calc(18px * var(--scale));
}

.details {
    gap: calc(12px * var(--scale));
    margin-bottom: calc(var(--spacing-md) * var(--scale));
}

.details p {
    font-size: calc(18px * var(--scale));
    gap: calc(4px * var(--scale));
}

.detail-icon {
    width: calc(20px * var(--scale));
    height: calc(20px * var(--scale));
    object-fit: contain;
}

.supervision {
    font-size: calc(18px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.hero-buttons {
    gap: calc(var(--spacing-md) * var(--scale));
}

.hero-buttons .btn {
    padding: calc(16px * var(--scale)) calc(24px * var(--scale));
    font-size: calc(18px * var(--scale));
    min-width: calc(200px * var(--scale));
}

/* Matching score badge - side positioned on desktop */
.matching-score {
    right: calc(-70px * var(--scale));
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: calc(140px * var(--scale));
    height: calc(140px * var(--scale));
    border-radius: 12px;
    padding: calc(14px * var(--scale));
    justify-content: center;
}

.matching-score .score-label {
    font-size: calc(11px * var(--scale));
    margin-bottom: calc(6px * var(--scale));
}

.matching-score .score-value {
    font-size: calc(50px * var(--scale));
}

/* Session icon images */
.session-icon-img {
    width: calc(20px * var(--scale));
    height: calc(20px * var(--scale));
    object-fit: contain;
    flex-shrink: 0;
}

/* Scale session card */
.session-card {
    padding: calc(57px * var(--scale)) calc(73px * var(--scale));
}

.session-card h3 {
    font-size: calc(20px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.session-item {
    gap: calc(13px * var(--scale));
    padding: calc(var(--spacing-md) * var(--scale)) 0;
}

.session-content h4 {
    font-size: calc(16px * var(--scale));
}

.session-content p {
    font-size: calc(14px * var(--scale));
}

/* Scale sidebar nav */
.sidebar-nav {
    padding: calc(41px * var(--scale)) calc(37px * var(--scale));
    gap: calc(var(--spacing-lg) * var(--scale));
}

.nav-link {
    gap: calc(var(--spacing-lg) * var(--scale));
    font-size: calc(20px * var(--scale));
}

/* Scale main content */
.main-content {
    max-width: calc(var(--main-max-width) * var(--scale));
}

.content-section {
    padding: calc(57px * var(--scale)) calc(73px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.content-section h2 {
    font-size: calc(20px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.content-section h3 {
    font-size: calc(16px * var(--scale));
    margin: calc(var(--spacing-lg) * var(--scale)) 0 calc(var(--spacing-md) * var(--scale));
}

.content-section p {
    font-size: calc(16px * var(--scale));
}

/* Scale specialty items */
.specialty-list {
    gap: calc(9px * var(--scale));
    margin-bottom: calc(var(--spacing-xl) * var(--scale));
}

.specialty-item {
    height: calc(41px * var(--scale));
}

.spec-label {
    padding: calc(12px * var(--scale)) calc(20px * var(--scale));
    font-size: calc(14px * var(--scale));
}

.spec-desc {
    padding: calc(12px * var(--scale)) calc(20px * var(--scale));
    font-size: calc(12px * var(--scale));
}

.therapy-tags {
    gap: calc(11px * var(--scale));
}

.therapy-tag {
    padding: calc(20px * var(--scale)) calc(24px * var(--scale));
    font-size: calc(16px * var(--scale));
}

/* Scale evaluation */
.eval-layout {
    grid-template-columns: calc(244px * var(--scale)) 1fr;
    gap: calc(var(--spacing-lg) * var(--scale));
    margin-bottom: calc(var(--spacing-xl) * var(--scale));
}

.eval-categories {
    gap: calc(9px * var(--scale));
}

.eval-cat {
    padding: calc(12px * var(--scale)) calc(18px * var(--scale));
    height: calc(39px * var(--scale));
    font-size: calc(14px * var(--scale));
}

.eval-cat .score {
    font-size: calc(22px * var(--scale));
}

.eval-detail {
    padding: calc(var(--spacing-md) * var(--scale));
    min-height: calc(150px * var(--scale));
}

.eval-detail h4 {
    font-size: calc(16px * var(--scale));
    margin-bottom: calc(var(--spacing-sm) * var(--scale));
}

.eval-detail p {
    font-size: calc(16px * var(--scale));
}

/* Scale radar chart */
.radar-chart {
    padding: calc(var(--spacing-xl) * var(--scale));
    min-height: calc(300px * var(--scale));
    margin-bottom: calc(var(--spacing-xl) * var(--scale));
}

.radar-chart svg {
    width: calc(400px * var(--scale));
    height: calc(300px * var(--scale));
}

/* Scale transcript */
.transcript {
    padding: calc(var(--spacing-xl) * var(--scale)) calc(var(--spacing-lg) * var(--scale));
}

.message {
    margin-bottom: calc(var(--spacing-xl) * var(--scale));
}

.message-user .user-avatar,
.message-ai .avatar-ai {
    width: calc(27px * var(--scale));
    height: calc(27px * var(--scale));
}

.message-user .name,
.message-ai .name {
    font-size: calc(12px * var(--scale));
}

.message-user .msg-bubble-user {
    padding: calc(12px * var(--scale)) calc(20px * var(--scale));
    font-size: calc(13.66px * var(--scale));
}

.message-ai .msg-bubble-ai {
    padding: calc(12px * var(--scale)) calc(20px * var(--scale));
    font-size: calc(11.96px * var(--scale));
}

.message-user .msg-time,
.message-ai .msg-time {
    font-size: calc(10px * var(--scale));
}

/* Scale practice details */
.practice-box {
    padding: calc(20px * var(--scale)) calc(24px * var(--scale));
    margin-bottom: calc(var(--spacing-md) * var(--scale));
}

.practice-box p {
    font-size: calc(15.6px * var(--scale));
    margin-bottom: calc(8px * var(--scale));
}

/* Scale booking */
.booking-layout {
    grid-template-columns: calc(360px * var(--scale)) auto 1fr;
    gap: calc(45px * var(--scale));
    margin-bottom: calc(var(--spacing-lg) * var(--scale));
}

.cal-nav {
    width: calc(34px * var(--scale));
    height: calc(34px * var(--scale));
    font-size: calc(16px * var(--scale));
}

.cal-month {
    font-size: calc(19px * var(--scale));
}

.cal-grid {
    gap: calc(7.5px * var(--scale));
}

.cal-day-label {
    font-size: calc(13px * var(--scale));
    padding: calc(var(--spacing-sm) * var(--scale)) 0;
}

.cal-date {
    font-size: calc(16px * var(--scale));
}

.time-slots h4 {
    font-size: calc(15px * var(--scale));
    margin-bottom: calc(var(--spacing-sm) * var(--scale));
}

.time-slots {
    gap: calc(15px * var(--scale));
}

.time-slot {
    padding: calc(15px * var(--scale)) calc(60px * var(--scale));
    font-size: calc(14px * var(--scale));
}

/* Responsive adjustments for matching score */
@media (max-width: 1400px) {
    /* Move badge back inside card if screen is too narrow */
    .matching-score {
        right: 0;
        top: 0;
        transform: rotate(90deg);
        transform-origin: top right;
        width: calc(98px * var(--scale));
        height: calc(192px * var(--scale));
        border-radius: 0 12px 12px 0;
        padding-top: calc(14px * var(--scale));
    }
}

@media (max-width: 1200px) {
    .matching-score {
        position: static;
        transform: none;
        width: calc(120px * var(--scale));
        height: calc(120px * var(--scale));
        margin: 0 auto;
        border-radius: 12px;
        padding: calc(20px * var(--scale));
    }
}
/* ===== FINAL FIXES ===== */

/* Updated Tag Styling - Clean look without brackets */
.tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: calc(13px * 0.8);
    flex-wrap: wrap;
    margin-bottom: calc(var(--spacing-lg) * 0.8);
}

.tag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: calc(6px * 0.8) calc(12px * 0.8);
    gap: calc(6px * 0.8);
    background: #F8FBF9;
    border-radius: 100px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: calc(18px * 0.8);
    line-height: calc(22px * 0.8);
    color: #000000;
    flex: none;
    height: calc(34px * 0.8);
}

/* Arrow/Chevron Matching Score Badge */
.matching-score {
    position: absolute;
    right: calc(-100px * 0.8);
    top: calc(50px * 0.8);
    width: calc(192px * 0.8);
    height: calc(98px * 0.8);
    background: #447569;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: calc(24px * 0.8);
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    transform: none;
}

.matching-score .score-label {
    font-style: italic;
    font-weight: 400;
    font-size: calc(12px * 0.8);
    line-height: 1.2;
    color: var(--white);
    margin-bottom: calc(4px * 0.8);
    text-align: left;
}

.matching-score .score-value {
    font-style: italic;
    font-weight: 600;
    font-size: calc(48px * 0.8);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    text-align: left;
}

/* Insurance Section Styling */
.insurance-section {
    padding: calc(30px * 0.8) calc(40px * 0.8);
}

.insurance-section h2 {
    font-style: italic;
    font-weight: 700;
    font-size: calc(20px * 0.8);
    margin-bottom: calc(12px * 0.8);
}

.insurance-section p {
    font-weight: 400;
    font-size: calc(16px * 0.8);
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .matching-score {
        right: 0;
        top: 0;
        width: calc(98px * 0.8);
        height: calc(192px * 0.8);
        padding-left: 0;
        padding-top: calc(14px * 0.8);
        align-items: center;
        transform: rotate(90deg);
        transform-origin: top right;
        clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    }
    
    .matching-score .score-label,
    .matching-score .score-value {
        text-align: center;
    }
}

@media (max-width: 1200px) {
    .matching-score {
        position: static;
        transform: none;
        width: calc(140px * 0.8);
        height: calc(140px * 0.8);
        margin: 0 auto;
        clip-path: none;
        border-radius: 12px;
        align-items: center;
        padding: calc(20px * 0.8);
    }
    
    .matching-score .score-label,
    .matching-score .score-value {
        text-align: center;
    }
}
/* ===== FINAL FINAL FIXES ===== */

/* Pill-style Tags with White Background */
.tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: calc(13px * 0.8);
    flex-wrap: wrap;
    margin-bottom: calc(var(--spacing-lg) * 0.8);
}

.tag {
    display: inline-block;
    padding: calc(8px * 0.8) calc(20px * 0.8);
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
    text-decoration: none;
    border-radius: 25px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: calc(18px * 0.8);
    line-height: calc(22px * 0.8);
    border: 1px solid #E0E0E0;
    cursor: default;
}

/* Matching Score Badge - Arrow Pointing LEFT */
.matching-score {
    position: absolute;
    right: calc(20px * 0.8);
    top: calc(60px * 0.8);
    width: calc(180px * 0.8);
    height: calc(100px * 0.8);
    background: #447569;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: calc(20px * 0.8);
    /* Arrow pointing LEFT */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
    transform: none;
}

.matching-score .score-label {
    font-style: italic;
    font-weight: 400;
    font-size: calc(12px * 0.8);
    line-height: 1.2;
    color: var(--white);
    margin-bottom: calc(4px * 0.8);
    text-align: center;
}

.matching-score .score-value {
    font-style: italic;
    font-weight: 600;
    font-size: calc(52px * 0.8);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    text-align: center;
}

/* Responsive adjustments for matching score */
@media (max-width: 1400px) {
    .matching-score {
        right: 0;
        top: 0;
        width: calc(98px * 0.8);
        height: calc(192px * 0.8);
        padding-right: 0;
        padding-top: calc(14px * 0.8);
        align-items: center;
        transform: rotate(90deg);
        transform-origin: top right;
        /* Arrow pointing down when rotated */
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
    }
}

@media (max-width: 1200px) {
    .matching-score {
        position: static;
        transform: none;
        width: calc(140px * 0.8);
        height: calc(140px * 0.8);
        margin: 0 auto;
        clip-path: none;
        border-radius: 12px;
        align-items: center;
        padding: calc(20px * 0.8);
    }
}

/* Insurance Section - Keep the styling */
.insurance-section {
    padding: calc(30px * 0.8) calc(40px * 0.8);
}

.insurance-section h2 {
    font-style: italic;
    font-weight: 700;
    font-size: calc(20px * 0.8);
    margin-bottom: calc(12px * 0.8);
}

.insurance-section p {
    font-weight: 400;
    font-size: calc(16px * 0.8);
    line-height: 1.5;
}

/* ===== SPECIALTY ITEMS - SINGLE LINE LAYOUT ===== */
.specialty-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(20px * 0.8);
    align-items: center;
    min-height: auto;
    height: auto;
    border-radius: 8px;
    overflow: visible;
    padding: calc(12px * 0.8) calc(20px * 0.8);
    background: linear-gradient(90deg, #E3F1EC 0%, #FDFDF4 30%, #E5F6FF 100%);
}

.spec-label {
    padding: 0;
    background: none;
    font-weight: 600;
    font-size: calc(16px * 0.8);
    line-height: 1.2;
    white-space: nowrap;
    color: #03494B;
}

.spec-desc {
    padding: 0;
    background: none;
    font-weight: 400;
    font-size: calc(14px * 0.8);
    line-height: 1.4;
    color: #0E2A2E;
}

/* ===== SPECIALTY ITEMS - FINAL SINGLE LINE LAYOUT ===== */
.specialty-list {
    display: flex;
    flex-direction: column;
    gap: calc(12px * 0.8);
    margin-bottom: calc(var(--spacing-xl) * 0.8);
}

.specialty-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: calc(30px * 0.8);
    align-items: center;
    min-height: auto;
    height: auto;
    border-radius: 8px;
    overflow: visible;
    padding: calc(16px * 0.8) calc(24px * 0.8);
    background: #E8F4EF;
}

.spec-label {
    padding: 0;
    background: none;
    font-weight: 600;
    font-size: calc(16px * 0.8);
    line-height: 1.3;
    white-space: nowrap;
    color: #03494B;
    text-align: left;
}

.spec-desc {
    padding: 0;
    background: none;
    font-weight: 400;
    font-size: calc(15px * 0.8);
    line-height: 1.5;
    color: #000000;
}

/* ===== SPECIALTY ITEMS - SMALLER FONT SIZE ===== */
.spec-label {
    font-weight: 600;
    font-size: calc(14px * 0.8);  /* Reduced from 16px to 14px = 11.2px */
    line-height: 1.3;
    white-space: nowrap;
    color: #03494B;
    text-align: left;
}

.spec-desc {
    font-weight: 400;
    font-size: calc(13px * 0.8);  /* Reduced from 15px to 13px = 10.4px */
    line-height: 1.5;
    color: #000000;
}
/* ===== FINAL LAYOUT FIXES ===== */

/* 1. Match section widths to header width */
.hero-wrapper {
    padding: calc(var(--spacing-2xl) * 0.8) 0;
}

.hero-card {
    max-width: 100%;
    margin: 0 calc(77px * 0.8);
}

.page-layout {
    max-width: 100%;
    margin: 0 auto;
    padding: calc(55px * 0.8) calc(77px * 0.8) calc(100px * 0.8);
}

/* 2. Sidebar Insurance/License Grid (No heading) */
.sidebar-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16px * 0.8);
    margin-bottom: calc(var(--spacing-lg) * 0.8);
}

.sidebar-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(16px * 0.8);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    text-align: center;
}

.sidebar-icon {
    width: calc(32px * 0.8);
    height: calc(32px * 0.8);
    margin-bottom: calc(8px * 0.8);
}

.sidebar-detail-content h4 {
    font-size: calc(14px * 0.8);
    font-weight: 600;
    margin-bottom: calc(4px * 0.8);
    color: #0E2A2E;
}

.sidebar-detail-content p {
    font-size: calc(12px * 0.8);
    font-weight: 400;
    color: #728B96;
    line-height: 1.4;
}

/* Remove Session Details heading */
.session-card h3 {
    display: none;
}

/* 3. Matching Score - Connected to Card Edge */
.matching-score {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(160px * 0.8);
    height: calc(90px * 0.8);
    background: #447569;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: calc(16px * 0.8);
    border-radius: 0 12px 12px 0;
    /* Arrow pointing LEFT */
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
}

/* 4. AI Transcript Layout - Like Screenshot */
.transcript {
    padding: calc(24px * 0.8);
    background: #F5F5F5;
    border-radius: 12px;
}

.message {
    margin-bottom: calc(20px * 0.8);
    display: flex;
    flex-direction: column;
}

/* Remove timeline line */
.transcript::before {
    display: none;
}

/* USER MESSAGES (RIGHT) */
.message-user {
    align-items: flex-end;
    padding-left: 0;
    padding-right: 0;
}

.message-user .msg-header {
    display: flex;
    align-items: center;
    gap: calc(8px * 0.8);
    margin-bottom: calc(8px * 0.8);
    flex-direction: row-reverse;
}

.message-user .user-avatar {
    width: calc(40px * 0.8);
    height: calc(40px * 0.8);
    border-radius: 50%;
}

.message-user .name {
    font-size: calc(14px * 0.8);
    font-weight: 500;
    color: #0E2A2E;
}

.message-user .msg-bubble-user {
    background: #5F9B8D;
    color: #FFFFFF;
    padding: calc(16px * 0.8) calc(20px * 0.8);
    border-radius: 16px 16px 4px 16px;
    font-size: calc(14px * 0.8);
    line-height: 1.5;
    max-width: 80%;
    margin-bottom: calc(4px * 0.8);
}

.message-user .msg-time {
    font-size: calc(11px * 0.8);
    color: #7C9992;
}

/* AI MESSAGES (LEFT) */
.message-ai {
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
}

.message-ai .msg-header {
    display: flex;
    align-items: center;
    gap: calc(8px * 0.8);
    margin-bottom: calc(8px * 0.8);
}

.message-ai .avatar-ai {
    width: calc(40px * 0.8);
    height: calc(40px * 0.8);
    border-radius: 50%;
    background: #447569;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(14px * 0.8);
    font-weight: 600;
}

.message-ai .name {
    font-size: calc(14px * 0.8);
    font-weight: 500;
    color: #0E2A2E;
}

.message-ai .msg-bubble-ai {
    background: #FFFFFF;
    color: #0E2A2E;
    padding: calc(16px * 0.8) calc(20px * 0.8);
    border-radius: 16px 16px 16px 4px;
    font-size: calc(14px * 0.8);
    line-height: 1.5;
    max-width: 80%;
    margin-bottom: calc(4px * 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.message-ai .msg-time {
    font-size: calc(11px * 0.8);
    color: #7C9992;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .hero-card {
        margin: 0 calc(30px * 0.8);
    }
    
    .page-layout {
        padding: calc(30px * 0.8);
    }
    
    .sidebar-details-grid {
        grid-template-columns: 1fr;
    }
    
    .matching-score {
        position: static;
        transform: none;
        margin: 0 auto;
        border-radius: 12px;
        clip-path: none;
    }
}

/* ===== SESSION DETAILS - MATCH SCREENSHOT ===== */
/* Re-enable Session Details heading */
.session-card h3 {
    display: block !important;
    font-style: italic;
    font-weight: 700;
    font-size: calc(20px * 0.8);
    margin-bottom: calc(24px * 0.8);
    margin-top: 0;
}

/* Session items styling */
.session-item {
    display: flex;
    gap: calc(16px * 0.8);
    padding: calc(20px * 0.8) 0;
    border-bottom: 1px solid #E8E8E8;
    align-items: flex-start;
}

.session-item:first-of-type {
    padding-top: 0;
}

.session-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.session-icon-img {
    width: calc(24px * 0.8);
    height: calc(24px * 0.8);
    flex-shrink: 0;
    margin-top: calc(2px * 0.8);
}

.session-content {
    flex: 1;
}

.session-content h4 {
    font-size: calc(16px * 0.8);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: calc(4px * 0.8);
    color: #0E2A2E;
}

.session-content p {
    font-size: calc(14px * 0.8);
    font-weight: 400;
    line-height: 1.5;
    color: #728B96;
    margin: 0;
}

/* Remove the old grid layout styles */
.sidebar-details-grid {
    display: none;
}

/* ===== FINAL WIDTH & LAYOUT FIXES ===== */

/* Match all widths to hero card */
.hero-wrapper {
    padding: calc(var(--spacing-2xl) * 0.8) calc(77px * 0.8);
}

.hero-card {
    max-width: 100%;
    margin: 0;
}

.page-layout {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 calc(77px * 0.8);
    padding-top: 0;
    padding-bottom: calc(100px * 0.8);
}

/* Remove gap between session details and nav */
.sidebar {
    gap: 0;
}

.session-card {
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.sidebar-nav {
    border-radius: 0 0 12px 12px;
    padding-top: calc(32px * 0.8);
    margin-top: 0;
}

/* Make Book Session button match nav link width */
.sidebar-nav .btn-full {
    width: 100%;
    margin-top: calc(24px * 0.8);
}

/* Ensure main content matches width */
.main-content {
    max-width: none;
}

/* Fix card margins in main content */
.content-section {
    margin-bottom: calc(var(--spacing-lg) * 0.8);
}
/* ===== RESPONSIVE 100% FONT SIZE VERSION ===== */
/* Remove all 0.8 scaling - everything at 100% */

:root {
    --scale: 1.0;  /* 100% instead of 80% */
}

/* All font sizes and spacing now 100% */
/* This overrides all previous calc(X * 0.8) rules */

/* Hero Card - 100% sizing */
.hero-wrapper {
    padding: 50px 77px;
}

.hero-card {
    padding: 48px 50px;
    grid-template-columns: 393px 1fr;
    gap: 50px;
}

.hero-photo-container {
    width: 393px;
    height: auto;
}

.hero-info h1 {
    font-size: 52px;
}

.hero-info .subtitle {
    font-size: 24px;
}

.tags {
    gap: 13px;
}

.tag {
    padding: 8px 20px;
    font-size: 18px;
}

.details {
    gap: 12px;
}

.details p {
    font-size: 18px;
}

.detail-icon {
    width: 20px;
    height: 20px;
}

.supervision {
    font-size: 18px;
}

.hero-buttons {
    gap: 20px;
}

.hero-buttons .btn {
    padding: 16px 24px;
    font-size: 18px;
    min-width: 200px;
}

/* Matching Score - 100% sizing */
.matching-score {
    width: 160px;
    height: 90px;
    padding-right: 16px;
}

.matching-score .score-label {
    font-size: 12px;
    margin-bottom: 4px;
}

.matching-score .score-value {
    font-size: 52px;
}

/* Sidebar - 100% sizing */
.page-layout {
    grid-template-columns: 379px 1fr;
    gap: 50px;
    padding: 55px 77px 100px;
}

.session-card {
    padding: 57px 73px;
}

.session-card h3 {
    font-size: 20px;
    margin-bottom: 24px;
}

.session-item {
    gap: 16px;
    padding: 20px 0;
}

.session-icon-img {
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.session-content h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.session-content p {
    font-size: 14px;
}

.sidebar-nav {
    padding: 41px 37px;
    gap: 30px;
}

.nav-link {
    gap: 30px;
    font-size: 20px;
}

/* Main Content - 100% sizing */
.main-content {
    max-width: 750px;
}

.content-section {
    padding: 57px 73px;
    margin-bottom: 30px;
}

.content-section h2 {
    font-size: 20px;
    margin-bottom: 30px;
}

.content-section h3 {
    font-size: 16px;
    margin: 30px 0 20px;
}

.content-section p {
    font-size: 16px;
}

/* Specialties - 100% sizing */
.specialty-list {
    gap: 12px;
    margin-bottom: 40px;
}

.specialty-item {
    grid-template-columns: 140px 1fr;
    gap: 30px;
    padding: 16px 24px;
}

.spec-label {
    font-size: 14px;
}

.spec-desc {
    font-size: 13px;
}

.therapy-tags {
    gap: 11px;
}

.therapy-tag {
    padding: 20px 24px;
    font-size: 16px;
}

/* Evaluation - 100% sizing */
.eval-layout {
    grid-template-columns: 244px 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.eval-categories {
    gap: 9px;
}

.eval-cat {
    padding: 12px 18px;
    height: 39px;
    font-size: 14px;
}

.eval-cat .score {
    font-size: 22px;
}

.eval-detail {
    padding: 20px;
    min-height: 150px;
}

.eval-detail h4 {
    font-size: 16px;
    margin-bottom: 12px;
}

.eval-detail p {
    font-size: 16px;
}

/* Radar Chart - 100% sizing */
.radar-chart {
    padding: 40px;
    min-height: 300px;
    margin-bottom: 40px;
}

.radar-chart svg {
    width: 400px;
    height: 300px;
}

/* Transcript - 100% sizing */
.transcript {
    padding: 24px;
}

.message {
    margin-bottom: 20px;
}

.message-user .user-avatar,
.message-ai .avatar-ai {
    width: 40px;
    height: 40px;
}

.message-user .name,
.message-ai .name {
    font-size: 14px;
}

.message-user .msg-bubble-user {
    padding: 16px 20px;
    font-size: 14px;
}

.message-ai .msg-bubble-ai {
    padding: 16px 20px;
    font-size: 14px;
}

.message-user .msg-time,
.message-ai .msg-time {
    font-size: 11px;
}

/* Practice Details - 100% sizing */
.practice-box {
    padding: 20px 24px;
    margin-bottom: 20px;
}

.practice-box p {
    font-size: 15.6px;
    margin-bottom: 8px;
}

/* License Section - 100% sizing */
.license-section {
    padding: 30px 40px;
}

.license-section h2 {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 16px;
}

.license-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.license-content::before {
    content: "";
    width: 40px;
    height: 3px;
    background: #F99522;
    display: block;
}

.license-text {
    font-size: 15.6px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
}

/* Booking - 100% sizing */
.booking-layout {
    grid-template-columns: 360px auto 1fr;
    gap: 45px;
    margin-bottom: 30px;
}

.cal-nav {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

.cal-month {
    font-size: 19px;
}

.cal-grid {
    gap: 7.5px;
}

.cal-day-label {
    font-size: 13px;
    padding: 12px 0;
}

.cal-date {
    font-size: 16px;
}

.time-slots h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.time-slots {
    gap: 15px;
}

.time-slot {
    padding: 15px 60px;
    font-size: 14px;
}

/* RESPONSIVE BREAKPOINTS */

/* Tablet: 768px - 1199px */
@media (max-width: 1199px) {
    .page-layout {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .sidebar {
        order: 1;
        position: static;
    }
    
    .main-content {
        order: 2;
        max-width: 100%;
    }
    
    .hero-card {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .hero-photo-container {
        width: 100%;
        max-width: 393px;
        height: auto;
        margin: 0 auto;
    }
    
    .matching-score {
        position: static;
        transform: none;
        width: 140px;
        height: 140px;
        margin: 0 auto;
        clip-path: none;
        border-radius: 12px;
    }
    
    .eval-layout {
        grid-template-columns: 1fr;
    }
    
    .booking-layout {
        grid-template-columns: 1fr;
    }
    
    .divider {
        display: none;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .hero-wrapper {
        padding: 20px 15px;
    }
    
    .page-layout {
        padding: 20px 15px;
    }
    
    .hero-card {
        padding: 20px;
    }
    
    .hero-info h1 {
        font-size: 36px;
    }
    
    .hero-info .subtitle {
        font-size: 20px;
    }
    
    .card {
        padding: 30px 20px;
    }
    
    .content-section {
        padding: 30px 20px;
    }
    
    .session-card {
        padding: 30px 20px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .header-buttons {
        gap: 12px;
    }
    
    .btn-outline, .btn-primary {
        width: 120px;
        font-size: 16px;
        padding: 12px 16px;
    }
}
/* ===== COMPLETE RESPONSIVE REBUILD - 100% FONTS ===== */
/* This file rebuilds all styling with 100% font sizes and full responsiveness */

/* Remove all previous scaling */
:root {
    --scale: 1.0;
}

/* ===== GLOBAL RESETS ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== HERO CARD - 100% & RESPONSIVE ===== */
.hero-wrapper {
    background: var(--gradient-hero);
    padding: 50px 77px;
}

.hero-card {
    max-width: var(--container-max);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 48px 50px;
    display: grid;
    grid-template-columns: 393px 1fr;
    gap: 50px;
    position: relative;
}

.hero-photo-container {
    width: 100%;
    max-width: 393px;
    height: auto;
}

.hero-photo {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: contain;
}

.hero-info h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.47;
    color: var(--primary-teal);
    margin-bottom: -8px;
}

.hero-info .subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--primary-light);
    margin-bottom: 30px;
}

.tags {
    display: flex;
    gap: 13px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    padding: 8px 20px;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
    border-radius: 25px;
    font-size: 18px;
    border: 1px solid #E0E0E0;
}

.details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.details p {
    font-size: 18px;
    line-height: 1.55;
    display: flex;
    align-items: center;
    gap: 4px;
}

.detail-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.supervision {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.hero-buttons .btn {
    padding: 16px 24px;
    font-size: 18px;
    min-width: 200px;
}

/* Matching Score Badge */
.matching-score {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    height: 90px;
    background: #447569;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    border-radius: 0 12px 12px 0;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
}

.matching-score .score-label {
    font-size: 12px;
    line-height: 1.2;
    color: var(--white);
    margin-bottom: 4px;
    text-align: center;
}

.matching-score .score-value {
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    font-weight: 600;
    font-style: italic;
}

/* ===== PAGE LAYOUT - TWO COLUMN ===== */
.page-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 379px 1fr;
    gap: 50px;
    padding: 55px 77px 100px;
}

/* ===== SIDEBAR ===== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sticky only on desktop */
@media (min-width: 1200px) {
    .sidebar {
        position: sticky;
        top: 80px;
        align-self: flex-start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* Session Details Card */
.session-card {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    border-radius: 12px 12px 0 0;
    padding: 57px 73px;
    margin-bottom: 0;
}

.session-card h3 {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 24px;
}

.session-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #E8E8E8;
    align-items: flex-start;
}

.session-item:first-of-type {
    padding-top: 0;
}

.session-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.session-icon-img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.session-content {
    flex: 1;
}

.session-content h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #0E2A2E;
}

.session-content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #728B96;
    margin: 0;
}

/* Sidebar Navigation */
.sidebar-nav {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
    padding: 41px 37px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 20px;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--primary-teal);
}

.nav-link.active {
    color: var(--primary-teal);
    font-weight: 600;
}

/* Book Session Button - Full Width */
.sidebar-nav .btn-full {
    width: 100%;
    padding: 16px 24px;
    font-size: 18px;
    margin-top: 24px;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    max-width: 750px;
}

.content-section {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 57px 73px;
    margin-bottom: 30px;
}

.content-section h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}

.content-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 30px 0 20px;
}

.content-section p {
    font-size: 16px;
    line-height: 1.6;
}

/* Specialties - Single Line */
.specialty-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.specialty-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 30px;
    align-items: center;
    padding: 16px 24px;
    background: #E8F4EF;
    border-radius: 8px;
}

.spec-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    color: #03494B;
}

.spec-desc {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #000000;
}

/* Therapy Tags */
.therapy-tags {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

.therapy-tag {
    padding: 20px 24px;
    background: #F8FBF9;
    border-radius: 8px;
    font-size: 16px;
}

/* Evaluation Grid */
.eval-layout {
    display: grid;
    grid-template-columns: 244px 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.eval-categories {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.eval-cat {
    padding: 12px 18px;
    height: 39px;
    background: #F8FBF9;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.eval-cat.selected {
    border: 2px solid #000;
}

.eval-cat .score {
    font-size: 22px;
    font-weight: 600;
}

.eval-detail {
    padding: 20px;
    background: #F8FBF9;
    border-radius: 8px;
    min-height: 150px;
}

.eval-detail h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.eval-detail p {
    font-size: 16px;
    line-height: 1.6;
}

/* Radar Chart */
.radar-chart {
    padding: 40px;
    background: #F8FBF9;
    border-radius: 8px;
    min-height: 300px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radar-chart svg {
    max-width: 400px;
    height: auto;
}

/* Transcript */
.transcript {
    padding: 24px;
    background: #F5F5F5;
    border-radius: 12px;
}

.message {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.transcript::before {
    display: none;
}

.message-user {
    align-items: flex-end;
}

.message-user .msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-direction: row-reverse;
}

.message-user .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.message-user .name {
    font-size: 14px;
    font-weight: 500;
    color: #0E2A2E;
}

.message-user .msg-bubble-user {
    background: #5F9B8D;
    color: #FFFFFF;
    padding: 16px 20px;
    border-radius: 16px 16px 4px 16px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 80%;
    margin-bottom: 4px;
}

.message-user .msg-time {
    font-size: 11px;
    color: #7C9992;
}

.message-ai {
    align-items: flex-start;
}

.message-ai .msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.message-ai .avatar-ai {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #447569;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.message-ai .name {
    font-size: 14px;
    font-weight: 500;
    color: #0E2A2E;
}

.message-ai .msg-bubble-ai {
    background: #FFFFFF;
    color: #0E2A2E;
    padding: 16px 20px;
    border-radius: 16px 16px 16px 4px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 80%;
    margin-bottom: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.message-ai .msg-time {
    font-size: 11px;
    color: #7C9992;
}

/* Practice Details */
.practice-box {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
}

.practice-box p {
    font-size: 15.6px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.practice-box p strong {
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

/* License Section */
.license-section {
    padding: 30px 40px;
}

.license-section h2 {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 16px;
}

.license-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.license-content::before {
    content: "";
    width: 40px;
    height: 3px;
    background: #F99522;
    display: block;
}

.license-text {
    font-size: 15.6px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
}

/* Booking Calendar */
.booking-layout {
    display: grid;
    grid-template-columns: 360px auto 1fr;
    gap: 45px;
    margin-bottom: 30px;
}

.calendar {
    display: flex;
    flex-direction: column;
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cal-nav {
    width: 34px;
    height: 34px;
    background: #044343;
    border: none;
    color: var(--white);
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
}

.cal-month {
    font-weight: 400;
    font-size: 19px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7.5px;
}

.cal-day-label {
    font-size: 13px;
    color: #3C413F;
    text-align: center;
    padding: 12px 0;
}

.cal-date {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #263238;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.cal-date.disabled {
    color: #BFC9C9;
    cursor: default;
}

.cal-date.available {
    background: rgba(4, 67, 67, 0.09);
}

.cal-date.selected {
    background: #447569;
    color: var(--white);
}

.divider {
    width: 1px;
    background: #E0E0E0;
}

.time-slots {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.time-slots h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.time-slot {
    padding: 15px 60px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.time-slot:hover {
    background: rgba(68, 117, 105, 0.1);
    border-color: var(--primary-teal);
}

.time-slot.selected {
    background: var(--primary-teal);
    color: var(--white);
    border-color: var(--primary-teal);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet: 768px - 1199px */
@media (max-width: 1199px) {
    .hero-wrapper {
        padding: 40px 30px;
    }
    
    .hero-card {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .hero-photo-container {
        max-width: 300px;
        height: auto;
        margin: 0 auto;
    }
    
    .matching-score {
        position: static;
        transform: none;
        width: 140px;
        height: 140px;
        margin: 20px auto 0;
        clip-path: none;
        border-radius: 12px;
        padding: 20px;
    }
    
    .page-layout {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 30px;
    }
    
    .sidebar {
        order: 1;
        position: static;
        max-height: none;
    }
    
    .main-content {
        order: 2;
        max-width: 100%;
    }
    
    .eval-layout {
        grid-template-columns: 1fr;
    }
    
    .specialty-item {
        grid-template-columns: 120px 1fr;
        gap: 20px;
    }
    
    .booking-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .divider {
        display: none;
    }
    
    .session-card {
        border-radius: 12px 12px 0 0;
    }
    
    .sidebar-nav {
        border-radius: 0 0 12px 12px;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .hero-wrapper {
        padding: 20px 15px;
    }
    
    .hero-card {
        padding: 20px;
    }
    
    .hero-info h1 {
        font-size: 36px;
    }
    
    .hero-info .subtitle {
        font-size: 20px;
    }
    
    .tags {
        gap: 8px;
    }
    
    .tag {
        font-size: 16px;
        padding: 6px 16px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
        min-width: 0;
    }
    
    .page-layout {
        padding: 20px 15px;
    }
    
    .content-section {
        padding: 30px 20px;
    }
    
    .session-card {
        padding: 30px 20px;
    }
    
    .sidebar-nav {
        padding: 30px 20px;
    }
    
    .specialty-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }
    
    .spec-label {
        white-space: normal;
    }
    
    .therapy-tags {
        flex-direction: column;
    }
    
    .therapy-tag {
        text-align: center;
    }
    
    .radar-chart {
        padding: 20px;
    }
    
    .radar-chart svg {
        max-width: 100%;
    }
    
    .license-content {
        flex-direction: column;
        text-align: center;
    }
    
    .time-slot {
        padding: 15px 30px;
    }
}

/* ===== REMOVE SESSION DETAILS HEADING ===== */
.session-card h3 {
    display: none !important;
}

/* Adjust padding since heading is removed */
.session-card {
    padding-top: 40px;
}

.session-item:first-of-type {
    padding-top: 0;
}

/* ===== BOOK SESSION BUTTON - ROUNDED PILL STYLE ===== */
.sidebar-nav .btn-full {
    width: 100%;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #F99522 0%, #FDB954 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;  /* Fully rounded pill shape */
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 24px;
    text-align: center;
}

.sidebar-nav .btn-full:hover {
    background: linear-gradient(90deg, #E88512 0%, #F0A844 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 149, 34, 0.3);
}

/* ===== MATCH COLUMN WIDTHS TO HEADER ===== */
/* Ensure all content has consistent max-width matching header */

.hero-wrapper {
    padding: 50px 77px;
}

.hero-card {
    max-width: var(--container-max);
    margin: 0 auto;
}

.page-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 55px 77px 100px;
}

/* Main content matches overall width */
.main-content {
    max-width: 100%;  /* Takes remaining space in grid */
}

/* Ensure consistent alignment */
.content-section {
    width: 100%;
}

/* Footer matches header width */
/* Commented out to match homepage footer styling exactly */
/*
.footer {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 77px;
}
*/

/* RESPONSIVE WIDTH ADJUSTMENTS */

/* Tablet */
@media (max-width: 1199px) {
    .hero-wrapper {
        padding: 40px 30px;
    }
    
    .page-layout {
        padding: 30px;
    }
    
    .footer {
        padding: 0 30px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hero-wrapper {
        padding: 20px 15px;
    }
    
    .page-layout {
        padding: 20px 15px;
    }
    
    .footer {
        padding: 0 15px;
    }
    
    .sidebar-nav .btn-full {
        font-size: 16px;
        padding: 14px 20px;
    }
}

/* ===== FINAL LAYOUT FIXES ===== */

/* 1. WIDER PAGE - Match Alex Jackson Card Width */
/* Remove max-width constraints so layout fills to match hero card */

.page-layout {
    max-width: 100%;  /* Remove container-max constraint */
    margin: 0;
    padding: 55px 77px 100px;
    display: grid;
    grid-template-columns: 379px 1fr;
    gap: 50px;
}

.main-content {
    max-width: 100%;  /* Allow to expand */
    width: 100%;
}

/* Ensure hero card width drives overall width */
.hero-card {
    max-width: 100%;
    width: 100%;
}

/* 2. SMALLER FONT FOR SPECIALTY DESCRIPTIONS */
.spec-desc {
    font-weight: 400;
    font-size: 12px !important;  /* Reduced from 13px */
    line-height: 1.5;
    color: #000000;
}

/* 3. EQUAL WIDTH FOR SPECIALTY LABELS */
.specialty-item {
    display: grid;
    grid-template-columns: 180px 1fr;  /* Fixed wider width for labels */
    gap: 30px;
    align-items: center;
    padding: 16px 24px;
    background: #E8F4EF;
    border-radius: 8px;
}

.spec-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    color: #03494B;
    width: 180px;  /* Fixed width */
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .page-layout {
        padding: 30px;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .page-layout {
        padding: 20px 15px;
    }
    
    .specialty-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .spec-label {
        width: 100%;
        white-space: normal;
    }
    
    .spec-desc {
        font-size: 11px !important;
    }
}

/* ===== SPECIALTY DESCRIPTIONS - ONE LINE ON DESKTOP ===== */

/* Desktop: Smaller font to fit on one line */
@media (min-width: 1200px) {
    .spec-desc {
        font-size: 11px !important;  /* Reduced from 12px */
        line-height: 1.4;
        white-space: nowrap;  /* Force single line */
        overflow: hidden;
        text-overflow: ellipsis;  /* Add ... if still too long */
    }
}

/* Tablet: Allow wrapping, medium font */
@media (min-width: 768px) and (max-width: 1199px) {
    .spec-desc {
        font-size: 12px !important;
        line-height: 1.5;
        white-space: normal;  /* Allow wrapping */
    }
}

/* Mobile: Allow wrapping, smaller font */
@media (max-width: 767px) {
    .spec-desc {
        font-size: 11px !important;
        line-height: 1.5;
        white-space: normal;  /* Allow wrapping */
    }
}

/* Ensure specialty items don't grow in height on desktop */
@media (min-width: 1200px) {
    .specialty-item {
        min-height: auto;
        align-items: center;
    }
}

/* ===== FINAL ADJUSTMENTS ===== */

/* 1. SHRINK BOOK SESSION BUTTON WIDTH */
.sidebar-nav .btn-full {
    width: auto;  /* Not full width */
    padding: 16px 48px;  /* More horizontal padding */
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #F99522 0%, #FDB954 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 24px auto 0;  /* Center it */
    display: block;
}

/* 2. SLIGHTLY BIGGER FONTS FOR SPECIALTY DESCRIPTIONS */
/* Desktop: Increase from 11px to 12px */
@media (min-width: 1200px) {
    .spec-desc {
        font-size: 12px !important;  /* Increased from 11px */
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Tablet: Keep at 12px */
@media (min-width: 768px) and (max-width: 1199px) {
    .spec-desc {
        font-size: 12px !important;
        line-height: 1.5;
        white-space: normal;
    }
}

/* 3. COLOR-CODED EVALUATION CATEGORIES */
/* Different background colors for each category */
.eval-cat {
    padding: 12px 18px;
    height: 39px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

/* Default state - light colors */
.eval-cat[data-category="empathy"] {
    background: #FFE5E5;  /* Light pink */
}

.eval-cat[data-category="listening"] {
    background: #E5E5FF;  /* Light blue */
}

.eval-cat[data-category="feedback"] {
    background: #FFE5F5;  /* Light pink-purple */
}

.eval-cat[data-category="reflection"] {
    background: #F5FFE5;  /* Light yellow-green */
}

.eval-cat[data-category="professional"] {
    background: #E5F5FF;  /* Light cyan */
}

/* Selected state - darker colors with border */
.eval-cat.selected[data-category="empathy"] {
    background: #FFB3B3;  /* Darker pink */
    border-color: #FF6B6B;
}

.eval-cat.selected[data-category="listening"] {
    background: #B3B3FF;  /* Darker blue */
    border-color: #6B6BFF;
}

.eval-cat.selected[data-category="feedback"] {
    background: #FFB3E5;  /* Darker pink-purple */
    border-color: #FF6BC5;
}

.eval-cat.selected[data-category="reflection"] {
    background: #D5FFB3;  /* Darker yellow-green */
    border-color: #9FE66B;
}

.eval-cat.selected[data-category="professional"] {
    background: #B3E5FF;  /* Darker cyan */
    border-color: #6BC5FF;
}

/* Hover effects */
.eval-cat:hover {
    transform: translateX(4px);
}

.eval-cat.selected {
    font-weight: 600;
}

/* ===== EVALUATION COLORS - SAME COLOR, DARKER WHEN SELECTED ===== */

/* Remove previous color scheme, use same-color-darker approach */

/* Empathy - Pink shades */
.eval-cat[data-category="empathy"] {
    background: #FFD4D4 !important;  /* Light pink */
}
.eval-cat.selected[data-category="empathy"] {
    background: #FF9999 !important;  /* Darker pink */
    border-color: #FF6B6B !important;
    font-weight: 600;
}

/* Active Listening - Purple/Blue shades */
.eval-cat[data-category="listening"] {
    background: #E8E0FF !important;  /* Light purple */
}
.eval-cat.selected[data-category="listening"] {
    background: #C5B3FF !important;  /* Darker purple */
    border-color: #9B7FFF !important;
    font-weight: 600;
}

/* Feedback - Pink-Purple shades */
.eval-cat[data-category="feedback"] {
    background: #FFE0F5 !important;  /* Light pink-purple */
}
.eval-cat.selected[data-category="feedback"] {
    background: #FFB3E0 !important;  /* Darker pink-purple */
    border-color: #FF80CC !important;
    font-weight: 600;
}

/* Reflection - Yellow-Green shades */
.eval-cat[data-category="reflection"] {
    background: #F0FFD4 !important;  /* Light yellow-green */
}
.eval-cat.selected[data-category="reflection"] {
    background: #DEFF99 !important;  /* Darker yellow-green */
    border-color: #C5FF66 !important;
    font-weight: 600;
}

/* Professionalism - Cyan/Blue shades */
.eval-cat[data-category="professional"] {
    background: #D4F0FF !important;  /* Light cyan */
}
.eval-cat.selected[data-category="professional"] {
    background: #99D6FF !important;  /* Darker cyan */
    border-color: #66C2FF !important;
    font-weight: 600;
}

/* ============================================
   FINAL CONSOLIDATED FIXES
   Replace everything after line with "COPY THIS TO THE END"
   with this cleaner version
   ============================================ */

/* ===== FIX 1: HERO CARD & PAGE LAYOUT WIDTH MATCHING ===== */
.hero-wrapper {
    padding: 50px 0 !important;
}

.hero-card {
    margin: 0 77px !important;
}

.page-layout {
    margin: 0 77px !important;
    padding: 55px 0 100px !important;
}

/* ===== FIX 2: TAG TEXT CENTERING ===== */
.tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ===== FIX 3: SIDEBAR GAP REMOVAL ===== */
.nav-separator {
    display: none !important;
}

.session-card {
    padding-bottom: 24px !important;
}

.sidebar-nav {
    padding-top: 24px !important;
}

.sidebar-nav-links {
    margin-top: 0 !important;
}

/* ===== FIX 4: FOOTER FULL-WIDTH DIVIDER LINE ===== */
/* Commented out to match homepage footer styling exactly */
/*
.footer-divider-full {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    height: 1px !important;
    background: var(--color-border-light) !important;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
}

.footer-grid {
    gap: 0 !important;
}

.footer-main {
    margin-bottom: 40px !important;
}

.footer-disclaimer {
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.footer-bottom {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
*/

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet: 768px - 1199px */
@media (max-width: 1199px) {
    .hero-wrapper {
        padding: 40px 0 !important;
    }
    
    .hero-card {
        margin: 0 30px !important;
    }
    
    .page-layout {
        margin: 0 30px !important;
        padding: 30px 0 !important;
    }
    
    .footer-main {
        margin-bottom: 40px !important;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .hero-wrapper {
        padding: 20px 0 !important;
    }
    
    .hero-card {
        margin: 0 15px !important;
    }
    
    .page-layout {
        margin: 0 15px !important;
        padding: 20px 0 !important;
    }
    
    .footer-main {
        margin-bottom: 30px !important;
    }
    
    .footer-divider-full {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }
    
    .footer-disclaimer {
        text-align: center;
    }
    
    .footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    
    .footer-links {
        justify-content: center;
    }
}

/* ===========================================
   LOADING SCREEN
   =========================================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFEFD;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #E3F1EC;
    border-top: 4px solid #447569;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #447569;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

/* Under review message (therapist profile not yet verified) - below header, same style as loading text */
.under-review-message {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 80px);
    background: #FFFEFD;
    display: grid;
    place-items: center;
    padding: var(--spacing-xl);
    box-sizing: border-box;
}

.under-review-content {
    text-align: center;
    width: 100%;
    max-width: 520px;
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
}

.under-review-text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #447569;
    text-align: center;
    max-width: 520px;
    line-height: 1.5;
    margin: 0 auto;
}

/* Not found message (therapist profile 404) - same style as under-review */
.not-found-message {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 80px);
    background: #FFFEFD;
    display: grid;
    place-items: center;
    padding: var(--spacing-xl);
    box-sizing: border-box;
}

.not-found-content {
    text-align: center;
    width: 100%;
    max-width: 520px;
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
}

.not-found-text {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #447569;
    text-align: center;
    max-width: 520px;
    line-height: 1.5;
    margin: 0 auto;
}

.main-content-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.main-content-wrapper.visible {
    opacity: 1;
}

/* ============================================
   HERO CARD FIXES - UPDATED
   1. Move matching score to align with "Pre-licensed Therapist"
   2. Make arrow tip pointier
   3. Make pills wider
   ============================================ */

/* FIX 1: Matching Score - Align with Subtitle & Pointier Tip */
.matching-score {
    position: absolute;
    right: 0;
    top: 80px;  /* Adjusted to align arrow tip with "Pre-licensed Therapist" */
    transform: none;
    width: 160px;
    height: 90px;
    background: #447569;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    border-radius: 0 12px 12px 0;
    /* POINTIER ARROW - narrower tip angle */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
    /* Original was: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%) */
    /* Changed from 12% to 20% to make the tip sharper/pointier */
}

/* Alternative: EVEN POINTIER arrow tip */
/*
.matching-score {
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);
}
*/

/* Alternative: SUPER POINTY arrow tip */
/*
.matching-score {
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%);
}
*/

/* FIX 2: Make Pills Wider */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 32px;  /* Increased from: 8px 20px */
    min-width: 120px;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1;
    border: 1px solid #E0E0E0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1400px) {
    .matching-score {
        right: 0;
        top: 0;
        width: 98px;
        height: 192px;
        padding-right: 0;
        padding-top: 14px;
        align-items: center;
        transform: rotate(90deg);
        transform-origin: top right;
        /* Pointier tip for rotated version */
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
    }
}

@media (max-width: 1200px) {
    .matching-score {
        position: static;
        transform: none;
        width: 140px;
        height: 140px;
        margin: 0 auto;
        clip-path: none;
        border-radius: 12px;
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .tag {
        padding: 6px 24px;
        min-width: 100px;
        font-size: 16px;
    }
}

/* ============================================
   FINE-TUNING OPTIONS
   ============================================ */

/* If arrow tip needs adjustment, modify the top value:
   top: 70px;  - Higher (closer to name)
   top: 80px;  - Default (aligned with subtitle)
   top: 90px;  - Lower (below subtitle)
*/

/* Pointiness levels:
   20% = Moderately pointy (default above)
   25% = Very pointy
   30% = Super pointy
   35% = Extremely pointy (may look too sharp)
*/

/* PILL WIDTH FIX */
.tag {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 24px !important;
    min-width: 110px !important;
    height: 34px !important;
    font-size: 18px !important;
    line-height: 22px !important;
    white-space: nowrap !important;
}

.sidebar-nav-links {
    padding-top: 20px !important;
}