/* ==========================================
   GetDocSlot Frontend Booking Form CSS
   Matches the design in screenshot exactly
   ========================================== */

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

/* ==========================================
   CSS Variables
   ========================================== */
:root {
    --gds-f-primary:        #0D6E6E;
    --gds-f-primary-light:  #E6FFFA;
    --gds-f-primary-hover:  #0A5A5A;
    --gds-f-border:         #E2E8F0;
    --gds-f-text:           #1A202C;
    --gds-f-text-secondary: #718096;
    --gds-f-bg:             #F7F9FC;
    --gds-f-white:          #FFFFFF;
    --gds-f-required:       #E53E3E;
    --gds-f-success:        #38A169;
    --gds-f-error:          #E53E3E;
    --gds-f-radius:         12px;
    --gds-f-radius-sm:      8px;
    --gds-f-radius-btn:     50px;
    --gds-f-shadow:         0 2px 8px rgba(0,0,0,0.06);
    --gds-f-shadow-hover:   0 4px 16px rgba(0,0,0,0.1);
}

/* ==========================================
   Booking Wrap — Main Container
   ========================================== */
.gds-booking-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    font-family: 'Inter', sans-serif;
    color: var(--gds-f-text);
    background: var(--gds-f-white);
}

/* ==========================================
   Sections
   ========================================== */
.gds-booking-section {
    padding: 28px 0;
}

/* Divider between sections */
.gds-booking-divider {
    height: 1px;
    background: var(--gds-f-border);
    margin: 0;
}

/* ==========================================
   Section Headers
   — Icon circle + Title
   ========================================== */
.gds-booking-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* Icon circle */
.gds-booking-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gds-booking-section-icon svg {
    width: 22px;
    height: 22px;
}

/* Person icon — teal bg */
.gds-icon-person {
    background: var(--gds-f-primary-light);
    color: var(--gds-f-primary);
}

/* Stethoscope icon — warm bg */
.gds-icon-stethoscope {
    background: #FFF8E6;
    color: #D4830A;
}

/* Calendar icon — teal bg */
.gds-icon-calendar {
    background: var(--gds-f-primary-light);
    color: var(--gds-f-primary);
}

/* Notes icon — warm bg */
.gds-icon-notes {
    background: #FFF8E6;
    color: #D4830A;
}

/* Section title */
.gds-booking-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gds-f-text);
    margin: 0;
}

/* ==========================================
   Form Rows — 2 column grid
   ========================================== */
.gds-booking-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 10px;
}

/* Full width field */
.gds-field-full {
    margin-bottom: 10px;
}

/* ==========================================
   Form Fields
   ========================================== */
.gds-booking-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Labels */
.gds-booking-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gds-f-text);
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Required asterisk */
.gds-required {
    color: var(--gds-f-required);
    font-size: 13px;
}

/* Input fields */
.gds-booking-input,
.gds-booking-select,
.gds-booking-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gds-f-border);
    border-radius: var(--gds-f-radius-sm);
    font-size: 14px;
    color: var(--gds-f-text);
    background: var(--gds-f-white);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.gds-booking-input:focus,
.gds-booking-select:focus,
.gds-booking-textarea:focus {
    border-color: var(--gds-f-primary);
    box-shadow: 0 0 0 3px rgba(13,110,110,0.1);
}

/* Placeholder */
.gds-booking-input::placeholder,
.gds-booking-textarea::placeholder {
    color: #A0AEC0;
}

/* Select arrow */
.gds-booking-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.gds-booking-select:disabled {
    background-color: #F7F9FC;
    color: #A0AEC0;
    cursor: not-allowed;
}

/* Textarea */
.gds-booking-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Field error message */
.gds-field-error {
    font-size: 12px;
    color: var(--gds-f-error);
    min-height: 16px;
    display: block;
}

/* Input error state */
.gds-booking-input.gds-error,
.gds-booking-select.gds-error {
    border-color: var(--gds-f-error);
}

/* ==========================================
   Appointment Type Cards
   — In-Person / Virtual
   ========================================== */
.gds-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

/* Hide actual radio input */
.gds-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Card label */
.gds-type-card {
    cursor: pointer;
}

/* Card inner */
.gds-type-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--gds-f-border);
    border-radius: var(--gds-f-radius-sm);
    transition: all 0.2s ease;
    background: var(--gds-f-white);
}

/* Radio dot */
.gds-type-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--gds-f-border);
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

/* Type icon */
.gds-type-icon {
    color: var(--gds-f-text-secondary);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

/* Type text */
.gds-type-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gds-type-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--gds-f-text);
}

.gds-type-text small {
    font-size: 12px;
    color: var(--gds-f-text-secondary);
}

/* Selected state */
.gds-type-card input[type="radio"]:checked + .gds-type-card-inner {
    border-color: var(--gds-f-primary);
    background: var(--gds-f-primary-light);
}

.gds-type-card input[type="radio"]:checked + .gds-type-card-inner .gds-type-radio-dot {
    border-color: var(--gds-f-primary);
    background: var(--gds-f-primary);
    box-shadow: inset 0 0 0 3px white;
}

.gds-type-card input[type="radio"]:checked + .gds-type-card-inner .gds-type-icon {
    color: var(--gds-f-primary);
}

/* ==========================================
   Virtual Platform Cards
   — Zoom / Google Meet
   ========================================== */
.gds-virtual-platforms {
    margin-top: 12px;
    padding: 16px;
    background: var(--gds-f-bg);
    border-radius: var(--gds-f-radius-sm);
    border: 1px solid var(--gds-f-border);
}

.gds-platform-cards {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Hide radio */
.gds-platform-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gds-platform-card {
    cursor: pointer;
    flex: 1;
}

.gds-platform-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1.5px solid var(--gds-f-border);
    border-radius: var(--gds-f-radius-sm);
    background: var(--gds-f-white);
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    color: var(--gds-f-text);
}

.gds-platform-card-inner:hover {
    border-color: var(--gds-f-primary);
    box-shadow: var(--gds-f-shadow);
}

/* Selected platform */
.gds-platform-card input[type="radio"]:checked + .gds-platform-card-inner {
    border-color: var(--gds-f-primary);
    background: var(--gds-f-primary-light);
}

/* ==========================================
   Previous Patient Radio Options
   ========================================== */
.gds-radio-options {
    display: flex;
    gap: 24px;
    margin-top: 4px;
}

.gds-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gds-f-text);
}

/* Hide actual radio */
.gds-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio dot */
.gds-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--gds-f-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.gds-radio-option input[type="radio"]:checked ~ .gds-radio-dot {
    border-color: var(--gds-f-primary);
    background: var(--gds-f-primary);
    box-shadow: inset 0 0 0 3px white;
}

/* ==========================================
   Date & Time Row
   — Calendar left, Time slots right
   ========================================== */
.gds-datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ==========================================
   Calendar
   ========================================== */
.gds-calendar {
    border: 1.5px solid var(--gds-f-border);
    border-radius: var(--gds-f-radius-sm);
    overflow: hidden;
    background: var(--gds-f-white);
}

/* Calendar header — month nav */
.gds-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gds-f-border);
}

.gds-cal-month-year {
    font-size: 15px;
    font-weight: 600;
    color: var(--gds-f-text);
}

/* Nav arrows */
.gds-cal-nav {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--gds-f-text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}

.gds-cal-nav:hover {
    background: var(--gds-f-bg);
    color: var(--gds-f-primary);
}

/* Day names header */
.gds-cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 12px;
    border-bottom: 1px solid var(--gds-f-border);
}

.gds-cal-days-header span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gds-f-text-secondary);
}

/* Calendar grid */
.gds-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 12px;
    gap: 2px;
}

/* Each day cell */
.gds-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 400;
    color: var(--gds-f-text);
}

.gds-cal-day:hover {
    background: var(--gds-f-primary-light);
    color: var(--gds-f-primary);
}

/* Today */
.gds-cal-day.gds-cal-today {
    font-weight: 700;
    color: var(--gds-f-primary);
}

/* Selected day */
.gds-cal-day.gds-cal-selected {
    background: var(--gds-f-primary);
    color: white;
    font-weight: 600;
}

/* Past / disabled days */
.gds-cal-day.gds-cal-disabled {
    color: #CBD5E0;
    cursor: not-allowed;
    pointer-events: none;
}

/* Empty cells */
.gds-cal-day.gds-cal-empty {
    cursor: default;
    pointer-events: none;
}

/* Selected date text below calendar */
.gds-cal-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 05px 05px;
    border-top: 1px solid var(--gds-f-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--gds-f-success);
}

.gds-cal-selected svg {
    color: var(--gds-f-success);
    flex-shrink: 0;
}

/* ==========================================
   Time Slots Grid
   ========================================== */
.gds-timeslots-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gds-timeslots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Placeholder text */
.gds-timeslots-placeholder {
    font-size: 13px;
    color: var(--gds-f-text-secondary);
    text-align: center;
    padding: 20px 0;
    grid-column: 1 / -1;
}

/* Each time slot */
.gds-time-slot {
    padding: 10px 8px;
    border: 1.5px solid var(--gds-f-border);
    border-radius: var(--gds-f-radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--gds-f-white);
    color: var(--gds-f-text);
    user-select: none;
}

.gds-time-slot:hover {
    border-color: var(--gds-f-primary);
    color: var(--gds-f-primary);
    background: var(--gds-f-primary-light);
}

/* Selected time slot */
.gds-time-slot.gds-slot-selected {
    background: var(--gds-f-primary);
    border-color: var(--gds-f-primary);
    color: white;
}

/* Booked / unavailable slot */
.gds-time-slot.gds-slot-booked {
    background: var(--gds-f-bg);
    color: #CBD5E0;
    cursor: not-allowed;
    text-decoration: line-through;
    border-color: var(--gds-f-border);
}

/* ==========================================
   Book Appointment Button
   ========================================== */
.gds-booking-footer {
    padding: 24px 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Main book button */
.gds-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 32px;
    background: var(--gds-f-primary);
    color: white;
    border: none;
    border-radius: var(--gds-f-radius-btn);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
}

.gds-book-btn:hover {
    background: var(--gds-f-primary-hover);
    box-shadow: 0 4px 16px rgba(13,110,110,0.3);
    transform: translateY(-1px);
}

.gds-book-btn:active {
    transform: translateY(0);
}

/* Loading state */
.gds-book-btn.gds-loading {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none;
}

/* Outline variant */
.gds-btn-outline {
    background: transparent;
    border: 2px solid var(--gds-f-primary);
    color: var(--gds-f-primary);
    width: auto;
    padding: 14px 32px;
}

.gds-btn-outline:hover {
    background: var(--gds-f-primary);
    color: white;
}

/* Terms text */
.gds-booking-terms {
    font-size: 13px;
    color: var(--gds-f-text-secondary);
    text-align: center;
    margin: 0;
}

.gds-terms-link {
    color: var(--gds-f-primary);
    text-decoration: none;
}

.gds-terms-link:hover {
    text-decoration: underline;
}

/* ==========================================
   Success / Confirmation Screen
   ========================================== */
.gds-booking-success {
    text-align: center;
    padding: 48px 24px;
}

/* Success icon circle */
.gds-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #C6F6D5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: gdsSuccessPop 0.4s ease;
}

.gds-success-icon svg {
    width: 40px;
    height: 40px;
    color: var(--gds-f-success);
}

.gds-booking-success h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gds-f-text);
    margin: 0 0 8px 0;
}

.gds-booking-success p {
    font-size: 15px;
    color: var(--gds-f-text-secondary);
    margin: 0 0 20px 0;
}

/* Booking reference badge */
.gds-booking-ref {
    display: inline-block;
    background: var(--gds-f-primary-light);
    color: var(--gds-f-primary);
    font-size: 16px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 30px;
    margin-bottom: 24px;
    border: 1px solid rgba(13,110,110,0.2);
}

/* Success pop animation */
@keyframes gdsSuccessPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================
   Utility Classes
   ========================================== */
.gds-mt-12 { margin-top: 12px; }
.gds-mt-16 { margin-top: 16px; }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 640px) {

    /* Stack 2 col rows to 1 col */
    .gds-booking-row,
    .gds-datetime-row,
    .gds-type-cards {
        grid-template-columns: 1fr;
    }

    /* Platform cards stacked */
    .gds-platform-cards {
        flex-direction: column;
    }

    /* Section title smaller */
    .gds-booking-section-title {
        font-size: 18px;
    }

    /* Time slots 2 col on mobile */
    .gds-timeslots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}