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

/* ─── Container ─────────────────────────────────────── */
.sms-wrap {
/*     max-width: 980px !important; */
	width: 100% !important;
    margin: 2rem auto !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07) !important;
    overflow: hidden !important;
    color: #111827 !important;
}

/* #sms-booking-form{
	width : 400px !important;
} */

@media screen and (max-width: 768px) {
    #sms-booking-form{
		width : 100% !important;
	}
	
	#sms-step-2{
		min-width : 305px !important;
	}
/* 	.sms-btn-primary{
		margin-left: 10px !important;
	} */
    
}

/* .sms-gap{
	gap: 10px !important;
} */
/* ─── Progress Bar ───────────────────────────────────── */
.sms-progress-bar-wrap {
    padding: 1.6rem 2rem 1.2rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.sms-progress-meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    margin-bottom: .6rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.sms-step-label {
    color: #6b7280 !important;
}

.sms-step-pct {
    color: #f97316 !important;
}

.sms-progress-track {
    height: 6px !important;
    background: #e5e7eb !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.sms-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #f97316 0%, #ef4444 100%) !important;
    border-radius: 9999px !important;
    transition: width .4s ease !important;
}

/* ─── Content area ───────────────────────────────────── */
.sms-content {
    padding: 2rem !important;
}

.sms-title {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 .4rem !important;
    line-height: 1.2 !important;
}

.sms-subtitle {
    color: #6b7280 !important;
    font-size: 1rem !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.5 !important;
}

/* ─── What You Get ───────────────────────────────────── */
.sms-wyg {
    background: #fafafa !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
}

.sms-wyg-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 1.2rem !important;
}

.sms-wyg-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.1rem !important;
}

.sms-wyg-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: .85rem !important;
}

.sms-wyg-check {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: 2px !important;
}

.sms-wyg-list li span {
    display: flex !important;
    flex-direction: column !important;
    gap: .15rem !important;
}

.sms-wyg-list li strong {
    font-size: .95rem !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.sms-wyg-list li em {
    font-style: normal !important;
    font-size: .82rem !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

/* ─── Two-column grid (calendar + slots) ────────────── */
.sms-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 1.8rem !important;
    align-items: stretch !important;
}

.sms-cal-wrap,
.sms-slots-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

@media (max-width: 600px) {
    .sms-two-col {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Labels ─────────────────────────────────────────── */
.sms-field-label {
    display: block !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: .65rem !important;
}

.sms-slots-lbl {
    font-size: .72rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #9ca3af !important;
}

/* ─── Calendar ───────────────────────────────────────── */
.sms-calendar {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    background: #fff !important;
}

.sms-cal-hd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: .8rem !important;
}

.sms-cal-month-lbl {
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: #1f2937 !important;
}

.sms-cal-nav {
    background: none !important;
    border: none !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    line-height: 1 !important;
    padding: 0 .3rem !important;
    border-radius: 6px !important;
    transition: color .15s !important;
}

.sms-cal-nav:hover {
    color: #ef4444 !important;
}

.sms-cal-dow {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    text-align: center !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    margin-bottom: .4rem !important;
}

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

.sms-cal-day {
    aspect-ratio: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .82rem !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: #374151 !important;
    transition: background .15s, color .15s !important;
}

.sms-cal-day:not(.sms-cal-empty):not(.sms-cal-past):hover {
    background: rgba(239, 68, 68, .1) !important;
    color: #ef4444 !important;
}

.sms-cal-day.sms-cal-past {
    color: #d1d5db !important;
    cursor: default !important;
}

.sms-cal-day.sms-cal-empty {
    cursor: default !important;
}

.sms-cal-day.sms-cal-selected {
    background: linear-gradient(135deg, #f97316, #ef4444) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, .35) !important;
}

/* Selected datetime preview */
.sms-selected-dt {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    margin-top: .75rem !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    color: #ef4444 !important;
}

/* ─── Time Slots ─────────────────────────────────────── */
#sms-slots-list {
    display: flex !important;
    flex-direction: column !important;
    gap: .6rem !important;
    overflow-y: auto !important;
}

.sms-hint {
    color: #9ca3af !important;
    font-size: .88rem !important;
    margin: 0 !important;
}

.sms-slot {
    padding: .75rem 1rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: #374151 !important;
    background: #fff !important;
    transition: all .2s !important;
}

.sms-slot:hover {
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}

.sms-slot.sms-slot-sel {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background: rgba(239, 68, 68, .04) !important;
}

.sms-slot.sms-slot-taken {
    color: #d1d5db !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}

/* ─── Meeting Type Cards ─────────────────────────────── */
.sms-field-group {
    margin-bottom: 1.5rem !important;
}

.sms-meeting-cards {
    display: flex !important;
    gap: 1rem !important;
}

.sms-meeting-card {
    flex: 1 !important;
    position: relative !important;
    cursor: pointer !important;
}

.sms-meeting-card input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.sms-mc-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    padding: 1rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    color: #4b5563 !important;
    background: #fff !important;
    transition: all .2s !important;
}

.sms-mc-icon {
    width: 20px !important;
    height: 20px !important;
    color: #9ca3af !important;
    transition: color .2s !important;
}

.sms-mc-tick {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
}

.sms-meeting-card input:checked~.sms-mc-inner {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background: rgba(239, 68, 68, .03) !important;
}

.sms-meeting-card input:checked~.sms-mc-inner .sms-mc-icon {
    color: #ef4444 !important;
}

.sms-meeting-card input:checked~.sms-mc-tick {
    opacity: 1 !important;
}

/* ─── Inputs ─────────────────────────────────────────── */
.sms-input {
    width: 100% !important;
    padding: .85rem 1rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    font-family: inherit !important;
    color: #111827 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color .2s, box-shadow .2s !important;
}

.sms-input:focus {
    outline: none !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important;
}

.sms-textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

/* ─── Review Card ────────────────────────────────────── */
.sms-review-card,
.sms-price-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 1.2rem !important;
}

.sms-review-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: .9rem 1.2rem !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
    color: #111827 !important;
}

.sms-review-row,
.sms-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: .75rem 1.2rem !important;
    font-size: .9rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #374151 !important;
}

.sms-review-row:last-child,
.sms-price-row:last-child {
    border-bottom: none !important;
}

.sms-review-row span:first-child,
.sms-price-row span:first-child {
    color: #6b7280 !important;
}

.sms-review-row span:last-child,
.sms-price-row span:last-child {
    font-weight: 600 !important;
}

.sms-price-total {
    font-size: 1.05rem !important;
    background: #fafafa !important;
}

.sms-price-total span:last-child {
    color: #ef4444 !important;
    font-size: 1.2rem !important;
}

/* ─── Buttons ────────────────────────────────────────── */
.sms-step-actions {
    display: flex !important;
    align-items: center !important;
    margin-top: 1.5rem !important;
}

.sms-right-align {
    justify-content: flex-end !important;
}

.sms-space-between {
    justify-content: space-between !important;
	gap:10px  !important;
}

.sms-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #e4573d, #e7a34a) !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 10px !important;

    padding: 14px 28px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
    transition: all .25s ease !important;
}

.sms-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, .4) !important;
}

.sms-btn-primary:active {
    transform: none !important;
}

.sms-btn-primary:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.sms-btn-pay {
    padding: .85rem 2.2rem !important;
    font-size: 1.05rem !important;
}

.sms-btn-ghost {
    background: none !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0 1.4rem !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background .2s, border-color .2s !important;
}

.sms-btn-ghost:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* ─── Secure note ────────────────────────────────────── */
.sms-secure-note {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    margin-top: .85rem !important;
    font-size: .8rem !important;
    color: #9ca3af !important;
    text-align: center !important;
    justify-content: center !important;
}

/* ─── Form messages ──────────────────────────────────── */
#sms-form-msg .sms-error-msg {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
    border-radius: 8px !important;
    padding: .85rem 1rem !important;
    font-size: .9rem !important;
    margin-bottom: 1rem !important;
}

#sms-form-msg .sms-success-msg {
    background: #ecfdf5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
    border-radius: 8px !important;
    padding: .85rem 1rem !important;
    font-size: .9rem !important;
    margin-bottom: 1rem !important;
}

/* ─── Notices (Stripe return) ────────────────────────── */
.sms-notice {
    border-radius: 10px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    font-weight: 500 !important;
}

.sms-notice-success {
    background: #ecfdf5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
}

.sms-notice-cancel {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

/* ─── Responsive tweaks ──────────────────────────────── */
@media (max-width: 520px) {
    .sms-meeting-cards {
        flex-direction: column !important;
    }

    .sms-btn-pay {
        font-size: .92rem !important;
        padding: .8rem 1.2rem !important;
    }
}

/* ─── Thank You Page ─────────────────────────────────── */
.sms-thankyou-wrap {
    max-width: 620px !important;
    margin: 3rem auto !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .09) !important;
    padding: 3rem 2.5rem !important;
    text-align: center !important;
    color: #111827 !important;
}

/* Animated check ring */
.sms-ty-icon-ring {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto 1.8rem !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, .12), rgba(239, 68, 68, .12)) !important;
}

.sms-ty-check {
    width: 52px !important;
    height: 52px !important;
    color: #ef4444 !important;
}

.sms-ty-circle {
    stroke-dasharray: 157 !important;
    stroke-dashoffset: 157 !important;
    animation: sms-draw-circle .6s ease forwards !important;
}

.sms-ty-tick {
    stroke-dasharray: 40 !important;
    stroke-dashoffset: 40 !important;
    animation: sms-draw-tick .4s ease .55s forwards !important;
}

@keyframes sms-draw-circle {
    to {
        stroke-dashoffset: 0 !important;
    }
}

@keyframes sms-draw-tick {
    to {
        stroke-dashoffset: 0 !important;
    }
}

.sms-ty-heading {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 0 0 .75rem !important;
    line-height: 1.2 !important;
}

.sms-ty-sub {
    color: #6b7280 !important;
    font-size: 1rem !important;
    margin: 0 0 2rem !important;
    line-height: 1.65 !important;
}

/* Info Cards Grid */
.sms-ty-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    text-align: left !important;
}

@media (max-width: 500px) {
    .sms-ty-info-grid {
        grid-template-columns: 1fr !important;
    }
}

.sms-ty-info-item {
    display: flex !important;
    flex-direction: column !important;
    gap: .35rem !important;
    background: #f9fafb !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 1.1rem 1.2rem !important;
}

.sms-ty-info-icon {
    font-size: 1.4rem !important;
    line-height: 1 !important;
    margin-bottom: .15rem !important;
}

.sms-ty-info-label {
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #374151 !important;
}

.sms-ty-info-val {
    font-size: .88rem !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
}

/* Back button */
.sms-ty-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    background: linear-gradient(135deg, #f97316, #ef4444) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    padding: .85rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, .3) !important;
    transition: transform .2s, box-shadow .2s !important;
}

.sms-ty-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, .4) !important;
    color: #fff !important;
}