/**
 * Hano Booking Widget — Stylesheet v1.0.4
 *
 * All rules are scoped under .hano-booking-wrapper to prevent
 * WordPress theme styles from bleeding in. Critical button/calendar
 * rules use !important to override theme button resets.
 */

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

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
    --hano-accent:          #2c2525;
    --hano-accent-hover:    #1a1515;
    --hano-card-bg:         #ffffff;
    --hano-border:          #e5e7eb;
    --hano-text-primary:    #111827;
    --hano-text-secondary:  #6B7280;
    --hano-text-meta:       #9ca3af;
    --hano-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hano-transition:      0.16s ease;
}

/* ============================================================
   Wrapper — transparent, centres the card
   ============================================================ */
.hano-booking-wrapper {
    font-family:            var(--hano-font) !important;
    color:                  var(--hano-text-primary);
    background:             transparent !important;
    padding:                0;
    box-sizing:             border-box;
    -webkit-font-smoothing: antialiased;
    display:                flex;
    justify-content:        center;
}

/* Reset ALL button elements inside the wrapper so theme styles cannot bleed in */
.hano-booking-wrapper button,
.hano-booking-wrapper button:focus,
.hano-booking-wrapper button:active {
    all:             unset;
    box-sizing:      border-box;
    cursor:          pointer;
    font-family:     var(--hano-font);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}

/* ============================================================
   Card — always 540px wide
   ============================================================ */
.hano-booking-wrapper .hano-card {
    background:    var(--hano-card-bg);
    border-radius: 20px;
    box-shadow:    0 4px 32px rgba(0,0,0,0.10);
    width:         540px;
    min-width:     540px;
    max-width:     540px;
    box-sizing:    border-box;
    overflow:      hidden;
    position:      relative;
}

/* ============================================================
   Progress Bar
   ============================================================ */
.hano-booking-wrapper .hano-progress-wrapper {
    padding: 22px 28px 0;
}

.hano-booking-wrapper .hano-progress-track {
    height:        3px;
    background:    var(--hano-border);
    border-radius: 99px;
    overflow:      hidden;
}

.hano-booking-wrapper .hano-progress-fill {
    height:        100%;
    background:    var(--hano-accent);
    border-radius: 99px;
    transition:    width 0.4s ease;
}

/* ============================================================
   Step Container
   ============================================================ */
.hano-booking-wrapper .hano-step {
    padding: 8px 28px 20px;
}

/* Headings: Inter 600, 20px, #111827 */
.hano-booking-wrapper .hano-step-title {
    font-family: var(--hano-font);
    font-size:   20px;
    font-weight: 600;
    color:       #111827;
    text-align:  center;
    margin:      12px 0 6px;
    line-height: 1.3;
}

/* Subtitles: Inter 400, 14px, #6B7280 */
.hano-booking-wrapper .hano-step-subtitle {
    font-family: var(--hano-font);
    font-size:   14px;
    font-weight: 400;
    color:       #6B7280;
    text-align:  center;
    margin:      0 0 20px;
}

/* ============================================================
   Circular Back Button (top-left of step)
   Hidden on .hano-step--datetime
   ============================================================ */
.hano-booking-wrapper .hano-back-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           34px !important;
    height:          34px !important;
    border:          1.5px solid var(--hano-border) !important;
    background:      transparent !important;
    font-size:       18px !important;
    color:           var(--hano-text-primary) !important;
    cursor:          pointer !important;
    border-radius:   50% !important;
    padding:         0 !important;
    line-height:     1 !important;
    margin-bottom:   4px;
    transition:      background var(--hano-transition);
}

.hano-booking-wrapper .hano-back-btn:hover {
    background: #f3f4f6 !important;
}

/* Hide on date/time step */
.hano-booking-wrapper .hano-step--datetime .hano-back-btn {
    display: none !important;
}

/* ============================================================
   List Items (categories, services, resources)
   ============================================================ */
.hano-booking-wrapper .hano-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  8px;
}

.hano-booking-wrapper .hano-list-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 16px;
    border:        1.5px solid var(--hano-border);
    border-radius: 16px;
    background:    var(--hano-card-bg);
    cursor:        pointer;
    transition:    border-color var(--hano-transition);
}

.hano-booking-wrapper .hano-list-item:hover {
    border-color: var(--hano-accent);
}

.hano-booking-wrapper .hano-list-item--selected {
    border-color: var(--hano-accent);
    background:   rgba(44,37,37,0.03);
}

.hano-booking-wrapper .hano-list-item__text {
    flex:      1;
    min-width: 0;
}

.hano-booking-wrapper .hano-list-item__name {
    font-size:   15px;
    font-weight: 600;
    color:       var(--hano-text-primary);
    display:     flex;
    align-items: center;
    gap:         8px;
}

.hano-booking-wrapper .hano-list-item__name-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             8px;
}

.hano-booking-wrapper .hano-list-item__price {
    font-size:   14px;
    font-weight: 600;
    color:       var(--hano-text-primary);
    white-space: nowrap;
}

.hano-booking-wrapper .hano-list-item__desc {
    font-size:   13px;
    color:       var(--hano-text-secondary);
    margin-top:  3px;
    line-height: 1.45;
}

.hano-booking-wrapper .hano-list-item__meta {
    font-size:  12px;
    color:      var(--hano-text-meta);
    margin-top: 5px;
}

.hano-booking-wrapper .hano-list-item__arrow {
    font-size:   20px;
    color:       var(--hano-text-meta);
    flex-shrink: 0;
}

/* ============================================================
   Badge
   ============================================================ */
.hano-booking-wrapper .hano-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    background:      var(--hano-accent);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    border-radius:   50%;
    flex-shrink:     0;
}

/* ============================================================
   Circle (radio indicator on service/resource items)
   ============================================================ */
.hano-booking-wrapper .hano-circle {
    width:           22px;
    height:          22px;
    border:          2px solid var(--hano-border);
    border-radius:   50%;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      border-color var(--hano-transition), background var(--hano-transition);
}

.hano-booking-wrapper .hano-circle--checked {
    background:   var(--hano-accent);
    border-color: var(--hano-accent);
    color:        #fff;
}

.hano-booking-wrapper .hano-circle--checked svg {
    width:  12px;
    height: 12px;
}

/* ============================================================
   Avatar (therapist / resource)
   ============================================================ */
.hano-booking-wrapper .hano-avatar {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    font-weight:     700;
    overflow:        hidden;
}

.hano-booking-wrapper .hano-avatar--initials {
    background: #f0f0f2;
    color:      var(--hano-text-secondary);
}

.hano-booking-wrapper .hano-avatar--icon {
    background: var(--hano-accent);
    color:      #fff;
}

.hano-booking-wrapper .hano-avatar--icon svg {
    width:  24px;
    height: 24px;
}

.hano-booking-wrapper .hano-avatar--image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ============================================================
   Service Banner (shown at top of date/time step)
   ============================================================ */
.hano-booking-wrapper .hano-service-banner {
    background:    #f5f5f7;
    border-radius: 16px;
    padding:       14px 18px;
    text-align:    center;
    margin-bottom: 18px;
}

.hano-booking-wrapper .hano-service-banner__label {
    font-size:     12px;
    font-weight:   400;
    color:         #6B7280;
    margin-bottom: 2px;
}

.hano-booking-wrapper .hano-service-banner__name {
    font-size:   15px;
    font-weight: 700;
    color:       #111827;
}

/* ============================================================
   Calendar
   ============================================================ */
.hano-booking-wrapper .hano-calendar {
    border:        1.5px solid var(--hano-border);
    border-radius: 16px;
    padding:       20px 18px 16px;
    margin-bottom: 16px;
}

.hano-booking-wrapper .hano-calendar__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   18px;
}

.hano-booking-wrapper .hano-calendar__month {
    font-size:   16px;
    font-weight: 700;
    color:       #111827;
}

/* Calendar prev/next nav arrows */
.hano-booking-wrapper .hano-calendar__nav {
    width:           32px !important;
    height:          32px !important;
    border:          none !important;
    background:      transparent !important;
    font-size:       20px !important;
    cursor:          pointer !important;
    color:           var(--hano-text-secondary) !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         0 !important;
    line-height:     1 !important;
    transition:      background var(--hano-transition);
}

.hano-booking-wrapper .hano-calendar__nav:hover:not(:disabled) {
    background: #f3f4f6 !important;
}

.hano-booking-wrapper .hano-calendar__nav:disabled {
    opacity: 0.3 !important;
    cursor:  default !important;
}

/* Day-of-week labels */
.hano-booking-wrapper .hano-calendar__labels {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom:         6px;
}

.hano-booking-wrapper .hano-calendar__day-label {
    text-align:  center;
    font-size:   13px;
    font-weight: 500;
    color:       var(--hano-text-secondary);
    padding:     4px 0;
}

/* Date grid */
.hano-booking-wrapper .hano-calendar__grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   2px;
}

/* ── BASE CELL — completely transparent, no radius, no background ── */
.hano-booking-wrapper .hano-calendar__cell {
    aspect-ratio:    1 !important;
    border:          none !important;
    background:      transparent !important;
    background-color:transparent !important;
    border-radius:   0 !important;
    font-size:       14px !important;
    font-weight:     400 !important;
    color:           transparent !important;
    cursor:          default !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         0 !important;
    width:           100% !important;
    position:        relative;
    outline:         none !important;
    box-shadow:      none !important;
    transition:      background var(--hano-transition), color var(--hano-transition), border-radius var(--hano-transition);
}

/* ── Other-month dates: barely visible ── */
.hano-booking-wrapper .hano-calendar__cell--other-month {
    color:            #e0e0e0 !important;
    background:       transparent !important;
    background-color: transparent !important;
    border-radius:    0 !important;
    cursor:           default !important;
}

/* ── Past / fully-booked dates: grey text only, no background ── */
.hano-booking-wrapper .hano-calendar__cell--current-month {
    color:            #c0c4cc !important;
    background:       transparent !important;
    background-color: transparent !important;
    border-radius:    0 !important;
    cursor:           default !important;
}

/* ── Available dates: dark bold text, light grey background ── */
.hano-booking-wrapper .hano-calendar__cell--available {
    color:            #111827 !important;
    font-weight:      700 !important;
    background:       #ebebeb !important;
    background-color: #ebebeb !important;
    border-radius:    8px !important;
    cursor:           pointer !important;
}

/* ── Available hover: slightly darker background ── */
.hano-booking-wrapper .hano-calendar__cell--available:hover:not(.hano-calendar__cell--selected) {
    background:       #d8d8d8 !important;
    background-color: #d8d8d8 !important;
    border-radius:    8px !important;
}

/* ── Skeleton cells (shimmer while loading) ── */
.hano-booking-wrapper .hano-calendar__cell--skeleton {
    background:       #f0f0f0 !important;
    background-color: #f0f0f0 !important;
    border-radius:    8px !important;
    animation:        hano-shimmer 1.4s ease-in-out infinite;
}

@keyframes hano-shimmer {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

.hano-booking-wrapper .hano-skeleton-block {
    background:       #f0f0f0 !important;
    animation:        hano-shimmer 1.4s ease-in-out infinite;
}

.hano-booking-wrapper .hano-calendar__loading-hint {
    text-align:  center;
    font-size:   13px;
    color:       #9ca3af;
    margin:      12px 0 0;
}

/* ── Today dot ── */
.hano-booking-wrapper .hano-calendar__cell--today:not(.hano-calendar__cell--selected)::after {
    content:       '';
    position:      absolute;
    bottom:        4px;
    left:          50%;
    transform:     translateX(-50%);
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--hano-accent);
}

/* ── Selected date: dark rounded square, white text ── */
.hano-booking-wrapper .hano-calendar__cell--selected {
    background:       var(--hano-accent) !important;
    background-color: var(--hano-accent) !important;
    color:            #fff !important;
    font-weight:      700 !important;
    border-radius:    8px !important;
    cursor:           pointer !important;
}

/* ============================================================
   Time Slots
   ============================================================ */
.hano-booking-wrapper .hano-timeslots {
    margin-bottom: 16px;
}

.hano-booking-wrapper .hano-timeslots__label {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     13px;
    font-weight:   400;
    color:         #6B7280;
    margin-bottom: 12px;
}

.hano-booking-wrapper .hano-timeslots__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   8px;
}

/* ── Standard pill: light grey bg, grey text ── */
.hano-booking-wrapper .hano-timeslot {
    padding:          11px 8px !important;
    border:           none !important;
    border-radius:    16px !important;
    background:       #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    font-size:        14px !important;
    font-weight:      500 !important;
    color:            #6B7280 !important;
    cursor:           pointer !important;
    text-align:       center !important;
    font-family:      var(--hano-font) !important;
    box-shadow:       none !important;
    transition:       background var(--hano-transition), color var(--hano-transition);
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    width:            100% !important;
}

/* ── Hover ── */
.hano-booking-wrapper .hano-timeslot:hover:not(.hano-timeslot--selected) {
    background:       #e5e7eb !important;
    background-color: #e5e7eb !important;
    color:            #111827 !important;
}

/* ── Selected pill: dark bg, white text ── */
.hano-booking-wrapper .hano-timeslot--selected {
    background:       var(--hano-accent) !important;
    background-color: var(--hano-accent) !important;
    color:            #fff !important;
    font-weight:      600 !important;
}

/* ── "Se flere timer" pill ── */
.hano-booking-wrapper .hano-timeslot--show-more {
    background:       #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color:            #6B7280 !important;
    font-weight:      500 !important;
}

.hano-booking-wrapper .hano-timeslot--show-more:hover {
    background:       #e5e7eb !important;
    background-color: #e5e7eb !important;
    color:            #111827 !important;
}

/* ============================================================
   Customer Information Form
   ============================================================ */
.hano-booking-wrapper .hano-form {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.hano-booking-wrapper .hano-form__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
}

.hano-booking-wrapper .hano-form__group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.hano-booking-wrapper .hano-form__label {
    font-size:   13px;
    font-weight: 500;
    color:       #111827;
    font-family: var(--hano-font);
}

.hano-booking-wrapper .hano-form__required {
    color: #dc2626;
}

.hano-booking-wrapper .hano-form__input-wrap {
    position: relative;
}

.hano-booking-wrapper .hano-form__icon {
    position:       absolute;
    left:           14px;
    top:            50%;
    transform:      translateY(-50%);
    color:          var(--hano-text-meta);
    display:        flex;
    align-items:    center;
    pointer-events: none;
}

.hano-booking-wrapper .hano-form__input-wrap:has(textarea) .hano-form__icon {
    top:       14px;
    transform: none;
}

/* Input: border #e5e7eb, 16px radius */
.hano-booking-wrapper .hano-form__input {
    width:         100%;
    padding:       12px 16px;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    font-size:     14px;
    font-family:   var(--hano-font);
    color:         #111827;
    background:    #fff !important;
    box-sizing:    border-box;
    outline:       none;
    transition:    border-color var(--hano-transition), box-shadow var(--hano-transition);
}

.hano-booking-wrapper .hano-form__input::placeholder {
    color: var(--hano-text-meta);
}

.hano-booking-wrapper .hano-form__input--icon {
    padding-left: 40px;
}

.hano-booking-wrapper .hano-form__input:focus {
    border-color: var(--hano-accent) !important;
    box-shadow:   0 0 0 3px rgba(44,37,37,0.08);
}

/* Textarea: border #e5e7eb, 16px radius */
.hano-booking-wrapper .hano-form__textarea {
    width:         100%;
    padding:       12px 16px 12px 40px;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    font-size:     14px;
    font-family:   var(--hano-font);
    color:         #111827;
    background:    #fff !important;
    box-sizing:    border-box;
    resize:        vertical;
    outline:       none;
    min-height:    90px;
    transition:    border-color var(--hano-transition);
}

.hano-booking-wrapper .hano-form__textarea::placeholder {
    color: var(--hano-text-meta);
}

.hano-booking-wrapper .hano-form__textarea:focus {
    border-color: var(--hano-accent) !important;
    box-shadow:   0 0 0 3px rgba(44,37,37,0.08);
}

/* Select: border #e5e7eb, 16px radius */
.hano-booking-wrapper .hano-form__select {
    width:         100%;
    padding:       12px 16px;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    font-size:     14px;
    font-family:   var(--hano-font);
    color:         #111827;
    background:    #fff !important;
    box-sizing:    border-box;
    cursor:        pointer;
    outline:       none;
    appearance:    auto;
}

.hano-booking-wrapper .hano-form__select:focus {
    border-color: var(--hano-accent) !important;
}

.hano-booking-wrapper .hano-form__birthdate-row {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   10px;
}

.hano-booking-wrapper .hano-form__terms {
    font-size:  12px;
    color:      var(--hano-text-secondary);
    text-align: center;
    margin:     0;
}

.hano-booking-wrapper .hano-form__terms a {
    color:           var(--hano-accent);
    text-decoration: underline;
}

/* ============================================================
   Summary Card (step 6 & 7)
   ============================================================ */
.hano-booking-wrapper .hano-summary__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           72px;
    height:          72px;
    background:      #f5f5f7;
    border-radius:   50%;
    margin:          20px auto 0;
    color:           var(--hano-text-primary);
}

.hano-booking-wrapper .hano-summary-card {
    border:        1.5px solid var(--hano-border);
    border-radius: 16px;
    padding:       16px;
    margin-bottom: 12px;
}

.hano-booking-wrapper .hano-summary-card__label {
    font-size:      11px;
    font-weight:    600;
    color:          var(--hano-text-meta);
    letter-spacing: 0.08em;
    margin-bottom:  10px;
    text-transform: uppercase;
}

.hano-booking-wrapper .hano-summary-card__service {
    padding-bottom: 12px;
    margin-bottom:  12px;
    border-bottom:  1px solid var(--hano-border);
}

.hano-booking-wrapper .hano-summary-card__service:last-of-type {
    border-bottom:  none;
    margin-bottom:  0;
    padding-bottom: 0;
}

.hano-booking-wrapper .hano-summary-card__name-price {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             8px;
    margin-bottom:   6px;
}

.hano-booking-wrapper .hano-summary-card__price {
    font-size:   14px;
    font-weight: 600;
    white-space: nowrap;
}

.hano-booking-wrapper .hano-summary-card__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

.hano-booking-wrapper .hano-summary-card__meta-item {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   12px;
    color:       var(--hano-text-secondary);
}

.hano-booking-wrapper .hano-summary-card__total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     12px;
    border-top:      1.5px solid var(--hano-border);
    margin-top:      8px;
}

.hano-booking-wrapper .hano-summary-card__total-price {
    font-size:   18px;
    font-weight: 700;
}

.hano-booking-wrapper .hano-summary-card__customer-row {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     14px;
    color:         var(--hano-text-primary);
    margin-bottom: 6px;
}

.hano-booking-wrapper .hano-summary-card__customer-row:last-child {
    margin-bottom: 0;
}

.hano-booking-wrapper .hano-summary-card__customer-row svg {
    flex-shrink: 0;
    color:       var(--hano-text-meta);
}

/* ============================================================
   Confirmed Screen
   ============================================================ */
.hano-booking-wrapper .hano-step--confirmed {
    text-align: center;
}

.hano-booking-wrapper .hano-confirmed__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           80px;
    height:          80px;
    background:      var(--hano-accent);
    border-radius:   50%;
    color:           #fff;
    margin:          16px auto 0;
}

/* ============================================================
   Navigation Buttons — 16px border-radius
   ============================================================ */
.hano-booking-wrapper .hano-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px;
    padding:         13px 24px !important;
    border-radius:   16px !important;
    font-size:       15px !important;
    font-weight:     600 !important;
    font-family:     var(--hano-font) !important;
    cursor:          pointer !important;
    border:          none !important;
    text-decoration: none;
    white-space:     nowrap;
    box-sizing:      border-box;
    transition:      background var(--hano-transition), color var(--hano-transition), opacity var(--hano-transition);
}

.hano-booking-wrapper .hano-btn--primary {
    background:       var(--hano-accent) !important;
    background-color: var(--hano-accent) !important;
    color:            #fff !important;
}

.hano-booking-wrapper .hano-btn--primary:hover:not(:disabled) {
    background:       var(--hano-accent-hover) !important;
    background-color: var(--hano-accent-hover) !important;
}

.hano-booking-wrapper .hano-btn--outline {
    background:       transparent !important;
    background-color: transparent !important;
    color:            var(--hano-text-primary) !important;
    border:           1.5px solid var(--hano-border) !important;
}

.hano-booking-wrapper .hano-btn--outline:hover {
    background:       #f3f4f6 !important;
    background-color: #f3f4f6 !important;
}

/* Grey back button in date/time nav row */
.hano-booking-wrapper .hano-btn--back-grey {
    background:       #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color:            var(--hano-text-primary) !important;
    border:           none !important;
}

.hano-booking-wrapper .hano-btn--back-grey:hover {
    background:       #e5e7eb !important;
    background-color: #e5e7eb !important;
}

/* Disabled */
.hano-booking-wrapper .hano-btn--disabled,
.hano-booking-wrapper .hano-btn:disabled {
    background:       #d1d5db !important;
    background-color: #d1d5db !important;
    color:            #9ca3af !important;
    cursor:           not-allowed !important;
    border:           none !important;
}

/* Bottom bar Fortsett keeps pill shape */
.hano-booking-wrapper .hano-bottom-bar .hano-btn--primary {
    border-radius: 99px !important;
}

/* ============================================================
   Navigation Row (Tilbake + Fortsett)
   ============================================================ */
.hano-booking-wrapper .hano-nav-row {
    display:    flex;
    gap:        10px;
    margin-top: 20px;
}

.hano-booking-wrapper .hano-nav-row .hano-btn--outline,
.hano-booking-wrapper .hano-nav-row .hano-btn--back-grey {
    flex:      0 0 auto;
    min-width: 130px;
}

.hano-booking-wrapper .hano-nav-row .hano-btn--primary {
    flex: 1;
}

/* ============================================================
   Bottom Bar (persistent summary + Fortsett, steps 1–3)
   ============================================================ */
.hano-booking-wrapper .hano-bottom-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 24px;
    border-top:      1.5px solid var(--hano-border);
    background:      var(--hano-card-bg);
    gap:             16px;
}

.hano-booking-wrapper .hano-bottom-bar__summary {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.hano-booking-wrapper .hano-bottom-bar__count {
    font-size: 13px;
    color:     var(--hano-text-secondary);
}

.hano-booking-wrapper .hano-bottom-bar__detail {
    font-size:   14px;
    font-weight: 700;
    color:       var(--hano-text-primary);
}

/* ============================================================
   Loading & Spinner
   ============================================================ */
.hano-booking-wrapper .hano-loading-screen {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         60px 24px;
    gap:             16px;
    color:           var(--hano-text-secondary);
    font-size:       14px;
}

.hano-booking-wrapper .hano-inline-loader {
    display:         flex;
    justify-content: center;
    padding:         32px;
}

.hano-booking-wrapper .hano-spinner {
    display:          inline-block;
    width:            20px;
    height:           20px;
    border:           2.5px solid rgba(44,37,37,0.15);
    border-top-color: var(--hano-accent);
    border-radius:    50%;
    animation:        hano-spin 0.7s linear infinite;
    flex-shrink:      0;
}

.hano-booking-wrapper .hano-spinner--large {
    width:        40px;
    height:       40px;
    border-width: 3.5px;
}

@keyframes hano-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Error Message
   ============================================================ */
.hano-booking-wrapper .hano-error {
    background:    #fef2f2;
    border:        1.5px solid #fecaca;
    border-radius: 16px;
    color:         #dc2626;
    font-size:     13px;
    padding:       12px 16px;
    margin:        0 0 12px;
}

/* ============================================================
   Empty State
   ============================================================ */
.hano-booking-wrapper .hano-empty {
    text-align: center;
    color:      var(--hano-text-secondary);
    font-size:  14px;
    padding:    16px 0;
}

/* ============================================================
   Responsive — mobile (< 560px)
   ============================================================ */
@media (max-width: 560px) {
    .hano-booking-wrapper {
        padding: 0;
    }

    .hano-booking-wrapper .hano-card {
        width:         100% !important;
        min-width:     0 !important;
        max-width:     100% !important;
        border-radius: 0 !important;
        box-shadow:    none !important;
    }

    .hano-booking-wrapper .hano-step {
        padding: 8px 16px 16px;
    }

    .hano-booking-wrapper .hano-form__row {
        grid-template-columns: 1fr;
    }

    .hano-booking-wrapper .hano-form__birthdate-row {
        grid-template-columns: 1fr 1fr;
    }

    .hano-booking-wrapper .hano-timeslots__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hano-booking-wrapper .hano-nav-row {
        flex-direction: column-reverse;
    }

    .hano-booking-wrapper .hano-nav-row .hano-btn {
        width: 100% !important;
    }

    .hano-booking-wrapper .hano-bottom-bar {
        padding: 12px 16px;
    }
}

@media (max-width: 360px) {
    .hano-booking-wrapper .hano-timeslots__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}