/* ── FAB Container ── */
.appt-fab{
    position:fixed;
    z-index:9999;
    font-family:inherit;
    overflow:visible;
    max-width:calc(100vw - 48px)
}

/* ── Main button ── */
.appt-fab__main{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    width:fit-content;
    min-width:60px;
    max-width:60px;
    height:60px;
    padding:0;
    color:#fff;
    border:none;
    border-radius:999px;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,45,115,.35),0 2px 6px rgba(0,45,115,.2);
    transition:max-width .35s cubic-bezier(.4,0,.2,1),
               box-shadow .3s ease,
               transform .2s ease;
}
.appt-fab__main:hover{
    box-shadow:0 12px 32px rgba(0,45,115,.45),0 4px 8px rgba(0,45,115,.25);
    transform:translateY(-2px)
}

/* ── Calendar icon (default) ── */
.appt-fab__ic{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .25s ease,transform .3s ease
}
.appt-fab__ic svg{width:100%;height:100%}

/* ── Text stack (hidden by default) ── */
.appt-fab__txt{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding-left:56px;padding-right:56px;
    opacity:0;white-space:nowrap;
    transition:opacity .25s ease .1s;
    pointer-events:none
}
.appt-fab__txt .t{font-size:15px;font-weight:700;line-height:1.2}
.appt-fab__txt .s{font-size:12px;font-weight:400;opacity:.85;line-height:1.2}

/* ── Close icon (hidden by default) ── */
.appt-fab__close{
    position:absolute;right:18px;top:50%;
    transform:translateY(-50%) rotate(-90deg);
    width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    transition:opacity .2s ease,transform .3s ease
}
.appt-fab__close svg{width:100%;height:100%}

/* ── Menu ── */
.appt-fab__menu{
    position:absolute;
    bottom:calc(100% + 12px);right:0;
    display:flex;flex-direction:column;gap:10px;
    max-width:calc(100vw - 48px);
    opacity:0;
    transform:translateY(10px) scale(.95);
    transform-origin:bottom right;
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease
}

/* ── Menu item ── */
.appt-fab__item{
    display:flex;align-items:center;gap:10px;
    max-width:100%;
    padding:10px 18px 10px 12px;
    background:#fff;
    color:#002D73;
    white-space:nowrap;
    text-decoration:none;
    font-size:14px;font-weight:600;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(0,45,115,.18),0 1px 3px rgba(0,0,0,.08);
    opacity:0;
    transform:translateX(20px);
    transition:opacity .3s ease,transform .3s ease,box-shadow .2s ease,background .2s ease
}
.appt-fab__item:hover{
    background:#F0F6FF;
    box-shadow:0 6px 16px rgba(0,45,115,.25);
    transform:translateX(-2px) !important
}
.appt-fab__item .ic{
    width:32px;height:32px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    border-radius:50%
}
.appt-fab__item .ic svg{width:16px;height:16px}
.appt-fab__item .lbl{line-height:1}

/* ── Open state ── */
.appt-fab.is-open .appt-fab__main{max-width:280px}
.appt-fab.is-open .appt-fab__ic{opacity:0;transform:translate(-50%,-50%) scale(.5)}
.appt-fab.is-open .appt-fab__txt{opacity:1}
.appt-fab.is-open .appt-fab__close{opacity:1;transform:translateY(-50%) rotate(0deg)}
.appt-fab.is-open .appt-fab__menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.appt-fab.is-open .appt-fab__item{opacity:1;transform:translateX(0)}

/* stagger */
.appt-fab.is-open .appt-fab__item:nth-child(1){transition-delay:.05s}
.appt-fab.is-open .appt-fab__item:nth-child(2){transition-delay:.10s}
.appt-fab.is-open .appt-fab__item:nth-child(3){transition-delay:.15s}
.appt-fab.is-open .appt-fab__item:nth-child(4){transition-delay:.20s}
.appt-fab.is-open .appt-fab__item:nth-child(5){transition-delay:.25s}

/* ── Device visibility ───────────────────────────────────────────────────── */
@media(min-width:768px){.sla-hide-desktop{display:none!important}}
@media(max-width:767px){.sla-hide-mobile{display:none!important}}

/* ── Direct mode ─────────────────────────────────────────────────────────── */
.appt-fab--direct{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-end
}
.appt-fab--direct .appt-fab__menu{
    position:static;
    display:flex;
    flex-direction:column;
    gap:10px;
    opacity:1;
    transform:none;
    pointer-events:auto;
    max-width:calc(100vw - 48px);
    padding:4px 6px 4px 0
}
/* entrance animation on page load */
.appt-fab--direct .appt-fab__item{
    opacity:0;
    transform:translateX(20px)
}
.appt-fab--direct.sla-ready .appt-fab__item{
    opacity:1;
    transform:translateX(0)
}
.appt-fab--direct.sla-ready .appt-fab__item:nth-child(1){transition-delay:.05s}
.appt-fab--direct.sla-ready .appt-fab__item:nth-child(2){transition-delay:.10s}
.appt-fab--direct.sla-ready .appt-fab__item:nth-child(3){transition-delay:.15s}
.appt-fab--direct.sla-ready .appt-fab__item:nth-child(4){transition-delay:.20s}
.appt-fab--direct.sla-ready .appt-fab__item:nth-child(5){transition-delay:.25s}
.appt-fab--direct.sla-ready .appt-fab__item:nth-child(6){transition-delay:.30s}

/* ── Mobile ── */
@media(max-width:480px){
    .appt-fab{bottom:16px;right:16px;left:auto}
    .appt-fab.is-open .appt-fab__main{max-width:min(260px,calc(100vw - 32px))}
    .appt-fab__txt .t{font-size:14px}
    .appt-fab__txt .s{font-size:11px}
    /* ไม่ตั้ง overflow บน menu เพื่อให้เงาแสดงได้ปกติ */
    .appt-fab__menu{padding:4px 6px 4px 0}
}