/* TA Booking Widget — v1.2 */

.ta-booking-wrap {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 24px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
    max-width: 440px !important
}

/* Header */
.ta-booking-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid #f1f3f5 !important
}

.ta-booking-header__icon {
    font-size: 28px !important;
    line-height: 1 !important
}

.ta-booking-header h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important
}

.ta-booking-header h4::before,
.ta-booking-header h4::after {
    display: none !important;
    content: none !important
}

.ta-booking-header p {
    font-size: 12px !important;
    color: #888 !important;
    margin: 2px 0 0 !important
}

.ta-booking-free {
    color: #53C598 !important;
    font-weight: 600 !important
}

.ta-booking-message {
    font-size: 12px !important;
    color: #666 !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 0 0 16px !important;
    line-height: 1.5 !important;
    border: 1px solid #f1f3f5 !important
}

.ta-booking-step__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important
}

.ta-booking-step__label span {
    font-weight: 500 !important;
    color: #53C598 !important;
    text-transform: none !important
}

/* ================================================================
   SERVICE CARDS
================================================================ */
.ta-booking-services {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 0 8px !important
}

.ta-book-service {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all .2s !important;
    font-family: 'DM Sans', sans-serif !important;
    text-align: left !important;
    width: 100% !important
}

.ta-book-service:hover {
    border-color: #53C598 !important;
    background: #f0fdf6 !important
}

.ta-book-service--selected {
    border-color: #53C598 !important;
    background: #f0fdf6 !important;
    box-shadow: 0 0 0 2px rgba(83, 197, 152, .15) !important
}

.ta-book-service__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important
}

.ta-book-service__name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important
}

.ta-book-service__meta {
    font-size: 11px !important;
    color: #999 !important
}

.ta-book-service__price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important
}

.ta-book-service__price--free {
    color: #53C598 !important
}

/* TYPE CARDS */
.ta-booking-types {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 12px !important
}

.ta-book-type {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all .2s !important;
    font-family: 'DM Sans', sans-serif !important;
    text-align: left !important;
    width: 100% !important
}

.ta-book-type:hover {
    border-color: #53C598 !important;
    background: #f0fdf6 !important
}

.ta-book-type--selected {
    border-color: #53C598 !important;
    background: #f0fdf6 !important;
    box-shadow: 0 0 0 2px rgba(83, 197, 152, .15) !important
}

.ta-book-type__icon {
    font-size: 24px !important;
    flex-shrink: 0 !important
}

.ta-book-type__label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    flex: 1 !important
}

.ta-book-type__detail {
    font-size: 11px !important;
    color: #999 !important;
    flex-shrink: 0 !important
}

/* Calendar */
.ta-booking-cal-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important
}

.ta-booking-nav-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #f3f5f8 !important;
    border: 1px solid #e5e7eb !important;
    color: #333 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .2s !important
}

.ta-booking-nav-btn:hover {
    background: #e8eaed !important
}

.ta-booking-nav-title {
    flex: 1 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    text-transform: capitalize !important
}

.ta-booking-cal-head {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    margin: 0 0 4px !important
}

.ta-booking-cal-head span {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #aaa !important;
    text-align: center !important;
    padding: 4px 0 !important
}

.ta-booking-cal-body {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 3px !important
}

.ta-book-day {
    aspect-ratio: 1 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ccc !important;
    cursor: default !important;
    transition: all .15s !important;
    border: 1px solid transparent !important;
    background: none !important
}

.ta-book-day--other {
    opacity: .3 !important
}

.ta-book-day--available {
    color: #1a1a2e !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    background: #f0fdf6 !important;
    border-color: #d1fae5 !important
}

.ta-book-day--available:hover {
    background: #53C598 !important;
    color: #fff !important;
    border-color: #53C598 !important;
    transform: scale(1.05) !important
}

.ta-book-day--selected {
    background: #53C598 !important;
    color: #fff !important;
    border-color: #53C598 !important;
    font-weight: 700 !important
}

.ta-book-day--today {
    border-color: #53C598 !important
}

.ta-book-day--past {
    opacity: .3 !important
}

/* Slots */
.ta-booking-slots {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 0 0 14px !important
}

.ta-book-slot {
    padding: 10px 8px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #333 !important;
    transition: all .15s !important;
    font-family: 'DM Sans', sans-serif !important
}

.ta-book-slot:hover {
    border-color: #53C598 !important;
    background: #f0fdf6 !important;
    color: #53C598 !important
}

.ta-book-slot--selected {
    background: #53C598 !important;
    color: #fff !important;
    border-color: #53C598 !important
}

.ta-booking-back {
    background: none !important;
    border: none !important;
    color: #888 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
    font-family: 'DM Sans', sans-serif !important
}

.ta-booking-back:hover {
    color: #53C598 !important
}

.ta-booking-summary {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 0 0 14px !important;
    font-size: 12px !important;
    color: #555 !important;
    line-height: 1.6 !important
}

.ta-booking-summary strong {
    color: #1a1a2e !important
}

/* Form */
.ta-booking-field {
    margin: 0 0 10px !important
}

.ta-booking-field input,
.ta-booking-field textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #333 !important;
    font-family: 'DM Sans', sans-serif !important;
    outline: none !important;
    background: #fff !important;
    box-sizing: border-box !important
}

.ta-booking-field input:focus,
.ta-booking-field textarea:focus {
    border-color: #53C598 !important
}

.ta-booking-field textarea {
    resize: vertical !important
}

.ta-booking-submit {
    width: 100% !important;
    padding: 12px !important;
    background: #53C598 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: 'DM Sans', sans-serif !important;
    transition: background .2s !important;
    margin: 6px 0 0 !important;
    text-decoration: none !important;
    text-align: center !important
}

.ta-booking-submit:hover {
    background: #45b088 !important
}

.ta-booking-submit:disabled {
    background: #ccc !important;
    cursor: not-allowed !important
}

.ta-booking-confirm {
    text-align: center !important;
    padding: 30px 10px !important
}

.ta-booking-confirm__icon {
    font-size: 48px !important;
    margin: 0 0 12px !important
}

.ta-booking-confirm h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 8px !important
}

.ta-booking-confirm p {
    font-size: 13px !important;
    color: #888 !important
}

.ta-booking-expiry-warn {
    font-size: 12px !important;
    color: #f59e0b !important;
    background: rgba(245, 158, 11, .06) !important;
    border: 1px solid rgba(245, 158, 11, .15) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    line-height: 1.5 !important
}

.ta-booking-loader {
    display: none;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, .85) !important;
    z-index: 10 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important
}

.ta-booking-loader--active {
    display: flex !important
}

.ta-booking-spinner {
    width: 28px !important;
    height: 28px !important;
    border: 3px solid #e5e7eb !important;
    border-top-color: #53C598 !important;
    border-radius: 50% !important;
    animation: ta-book-spin .7s linear infinite !important
}

@keyframes ta-book-spin {
    to {
        transform: rotate(360deg)
    }
}

/* ================================================================
   AVOCAT SETTINGS (dark theme)
================================================================ */
.ta-booking-settings {
    background: linear-gradient(135deg, #0f172a 0%, #1a2742 100%) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    border: 1px solid rgba(83, 197, 152, .12) !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, .18) !important;
    font-family: 'DM Sans', sans-serif !important
}

.ta-bset-row {
    margin: 0 0 14px !important
}

.ta-bset-row>label:not(.ta-bset-toggle) {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .9) !important;
    margin: 0 0 5px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important
}

.ta-bset-row input[type="text"],
.ta-bset-row input[type="number"],
.ta-bset-row select,
.ta-bset-row textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-family: 'DM Sans', sans-serif !important;
    outline: none !important;
    box-sizing: border-box !important
}

.ta-bset-row select option {
    background: #1a2742 !important;
    color: #fff !important
}

.ta-bset-row textarea {
    resize: vertical !important
}

.ta-bset-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important
}

.ta-bset-price {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important
}

.ta-bset-price input {
    flex: 1 !important
}

.ta-bset-price span {
    color: rgba(255, 255, 255, .4) !important;
    font-size: 14px !important;
    font-weight: 600 !important
}

.ta-bset-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    user-select: none !important
}

.ta-bset-toggle input {
    display: none !important
}

.ta-bset-toggle__slider {
    width: 42px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, .1) !important;
    border-radius: 12px !important;
    position: relative !important;
    transition: background .2s !important;
    flex-shrink: 0 !important
}

.ta-bset-toggle__slider::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: transform .2s !important
}

.ta-bset-toggle input:checked+.ta-bset-toggle__slider {
    background: #53C598 !important
}

.ta-bset-toggle input:checked+.ta-bset-toggle__slider::after {
    transform: translateX(18px) !important
}

.ta-bset-toggle__label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important
}

.ta-bset-toggle--sm .ta-bset-toggle__slider {
    width: 34px !important;
    height: 20px !important
}

.ta-bset-toggle--sm .ta-bset-toggle__slider::after {
    width: 14px !important;
    height: 14px !important
}

.ta-bset-toggle--sm input:checked+.ta-bset-toggle__slider::after {
    transform: translateX(14px) !important
}

/* Service cards in settings */
.ta-bset-svc-card {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 0 0 6px !important
}

.ta-bset-svc-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important
}

.ta-bset-svc-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    flex: 1 !important
}

.ta-bset-svc-meta {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .99) !important;
    flex-shrink: 0 !important
}

.ta-bset-svc-del {
    background: rgba(239, 68, 68, .1) !important;
    border: none !important;
    color: #ef4444 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important
}

.ta-bset-svc-del:hover {
    background: rgba(239, 68, 68, .2) !important
}

/* Suggestion buttons */
.ta-bset-suggest-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important
}

.ta-bset-suggest-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .02) !important;
    color: rgba(255, 255, 255, .6) !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    cursor: pointer !important;
    transition: all .2s !important;
    width: 100% !important;
    text-align: left !important
}

.ta-bset-suggest-btn:hover:not(:disabled) {
    border-color: rgba(83, 197, 152, .3) !important;
    background: rgba(83, 197, 152, .05) !important;
    color: #53C598 !important
}

.ta-bset-suggest-btn span {
    color: rgba(255, 255, 255, .3) !important;
    font-size: 11px !important
}

.ta-bset-suggest-btn--added {
    opacity: .4 !important;
    cursor: default !important;
    border-color: transparent !important
}

.ta-bset-suggest-btn--added:hover {
    border-color: transparent !important;
    background: rgba(255, 255, 255, .02) !important
}

/* Type cards */
.ta-bset-type-card {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    margin: 0 0 8px !important
}

.ta-bset-type-detail {
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .04) !important
}

.ta-bset-type-detail input {
    width: 100% !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    outline: none !important;
    box-sizing: border-box !important
}

.ta-bset-section {
    margin: 20px 0 12px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important
}

.ta-bset-section h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 4px !important
}

.ta-bset-hint {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .99) !important;
    margin: 0 !important
}

/* Visio badge + advanced */
.ta-bset-visio-badge {
    font-size: 12px !important;
    color: #53C598 !important;
    background: rgba(83, 197, 152, .08) !important;
    border: 1px solid rgba(83, 197, 152, .15) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important
}

.ta-bset-advanced {
    margin-top: 10px !important
}

.ta-bset-advanced summary {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .80) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    list-style: none !important;
    transition: color .2s !important
}

.ta-bset-advanced summary:hover {
    color: rgba(255, 255, 255, .99) !important
}

.ta-bset-advanced summary::-webkit-details-marker {
    display: none !important
}

.ta-bset-advanced__content {
    margin-top: 8px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, .02) !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 8px !important
}

/* Availability */
.ta-bset-avail {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 20px !important
}

.ta-bset-day {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important
}

.ta-bset-day__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 6px !important
}

.ta-bset-day__name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .7) !important
}

.ta-bset-day__add {
    background: none !important;
    border: none !important;
    color: #53C598 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'DM Sans', sans-serif !important
}

.ta-bset-day__add:hover {
    text-decoration: underline !important
}

.ta-bset-day__slots {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important
}

.ta-bset-slot {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important
}

.ta-bset-slot input[type="time"] {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    outline: none !important
}

.ta-bset-slot span {
    color: rgba(255, 255, 255, .3) !important;
    font-size: 12px !important
}

.ta-bset-slot__del {
    background: rgba(239, 68, 68, .1) !important;
    border: none !important;
    color: #ef4444 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important
}

.ta-bset-slot__del:hover {
    background: rgba(239, 68, 68, .2) !important
}

.ta-bset-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important
}

.ta-agenda-btn {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    transition: all .2s !important;
    line-height: 1.3 !important
}

.ta-agenda-btn--primary {
    background: #53C598 !important;
    color: #fff !important
}

.ta-agenda-btn--primary:hover {
    background: #45b088 !important
}

.ta-bset-saved {
    font-size: 12px !important;
    color: #53C598 !important;
    font-weight: 600 !important
}

@media(max-width:767px) {
    .ta-booking-wrap {
        padding: 16px !important
    }

    .ta-booking-slots {
        grid-template-columns: repeat(2, 1fr) !important
    }

    .ta-bset-grid {
        grid-template-columns: 1fr !important
    }

    .ta-booking-settings {
        padding: 20px 16px !important
    }
}

/* ═══ Placeholders dark mode — Booking Settings ═══ */
.ta-booking-settings input::placeholder,
.ta-booking-settings textarea::placeholder,
.ta-booking-settings select option[value=""] {
    color: rgba(255, 255, 255, .3) !important;
    opacity: 1 !important;
}

.ta-booking-settings select option {
    background: #1a2742 !important;
    color: #fff !important;
}