/* ═══════════════════════════════════════════
   Royal Buttons — Frontend CSS
   ═══════════════════════════════════════════ */

/* ── Group wrapper ──────────────────────────── */
.rb-group {
    z-index: 9999;
    pointer-events: none;
    align-items: flex-end;
}
.rb-group.rb-pos-bottom-left,
.rb-group.rb-pos-top-left,
.rb-group.rb-pos-middle-left  { align-items: flex-start; }
.rb-group.rb-pos-bottom-center,
.rb-group.rb-pos-top-center,
.rb-group.rb-pos-middle-center { align-items: center; }

/* ── Children container ─────────────────────── */
.rb-children {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: all;
}
.rb-children-collapsed {
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Base button ────────────────────────────── */
.rb-btn {
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1),
                box-shadow .25s ease,
                filter .25s ease;
    cursor: pointer;
    position: relative;
    overflow: visible;
}
.rb-toggle-btn { z-index: 2; }

/* ── Toggle icons ───────────────────────────── */
.rb-toggle-icon { display: flex; align-items: center; justify-content: center; transition: transform .3s ease, opacity .2s ease; }
.rb-toggle-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.5); }
.rb-group.rb-open .rb-toggle-open  { opacity: 0; transform: rotate(90deg) scale(0.5); }
.rb-group.rb-open .rb-toggle-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* ── Hover Effects ──────────────────────────── */
.rb-fx-scale:hover  { transform: scale(1.18); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.rb-fx-bounce:hover { animation: rb-bounce .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes rb-bounce {
    0%  { transform: scale(1); }
    40% { transform: scale(1.22) translateY(-6px); }
    70% { transform: scale(0.95) translateY(2px); }
    100%{ transform: scale(1.1); }
}
.rb-fx-pulse::after { content:''; position:absolute; inset:0; border-radius:50%; border:3px solid currentColor; opacity:0; }
.rb-fx-pulse:hover::after { animation: rb-pulse-ring .6s ease-out forwards; }
@keyframes rb-pulse-ring { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.7);opacity:0} }
.rb-fx-pulse:hover  { transform:scale(1.1); }
.rb-fx-shake:hover  { animation: rb-shake .4s ease both; }
@keyframes rb-shake {
    0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg) scale(1.1)}
    40%{transform:rotate(15deg) scale(1.1)} 60%{transform:rotate(-10deg) scale(1.1)}
    80%{transform:rotate(10deg) scale(1.1)}
}
.rb-fx-glow:hover   { transform:scale(1.1); box-shadow:0 0 0 4px rgba(255,255,255,.3),0 0 20px 6px currentColor,0 6px 20px rgba(0,0,0,.3); }
.rb-fx-spin:hover   { transform:scale(1.1) rotate(360deg); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.rb-fx-flip:hover   { transform:scale(1.1) rotateY(180deg); transition:transform .5s ease; }
.rb-fx-rubber:hover { animation: rb-rubber .5s ease both; }
@keyframes rb-rubber {
    0%{transform:scale(1,1)} 30%{transform:scale(1.25,.75)} 50%{transform:scale(.75,1.25)}
    65%{transform:scale(1.15,.85)} 80%{transform:scale(.95,1.05)} 100%{transform:scale(1.1,1.1)}
}

/* ── Label tooltip ──────────────────────────── */
.rb-label {
    position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.78); color: #fff; padding: 5px 11px; border-radius: 6px;
    white-space: nowrap; font-size: 13px; font-family: sans-serif;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.rb-label-right { right: auto; left: calc(100% + 10px); }
.rb-btn:hover .rb-label { opacity: 1; }

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

/* ═══════════════════════════════════════════
   EXPAND ANIMATIONS
   All animations target .rb-child inside .rb-children
   and are activated when parent .rb-group gets .rb-open
   ═══════════════════════════════════════════ */

/* Shared: collapsed state */
.rb-children-collapsed .rb-child {
    opacity: 0;
    pointer-events: none;
}

/* ── fan-up: slide up one by one ── */
.rb-anim-fan-up .rb-child {
    transform: translateY(20px) scale(0.7);
    opacity: 0;
    transition: transform .35s cubic-bezier(.34,1.4,.64,1), opacity .25s ease;
}
.rb-anim-fan-up.rb-open .rb-child {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── pop: scale from center ── */
.rb-anim-pop .rb-child {
    transform: scale(0.3);
    opacity: 0;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.rb-anim-pop.rb-open .rb-child {
    transform: scale(1);
    opacity: 1;
}

/* ── slide-left: come in from right ── */
.rb-anim-slide-left .rb-child {
    transform: translateX(60px) scale(0.8);
    opacity: 0;
    transition: transform .3s cubic-bezier(.34,1.3,.64,1), opacity .25s ease;
}
.rb-anim-slide-left.rb-open .rb-child {
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* ── stagger: fan-up but with per-child delay (set via JS) ── */
.rb-anim-stagger .rb-child {
    transform: translateY(24px) scale(0.75);
    opacity: 0;
    transition: transform .38s cubic-bezier(.34,1.4,.64,1), opacity .28s ease;
}
.rb-anim-stagger.rb-open .rb-child {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── bounce: overshoot spring ── */
.rb-anim-bounce .rb-child {
    transform: scale(0.2) translateY(30px);
    opacity: 0;
    transition: transform .4s cubic-bezier(.34,2,.64,1), opacity .2s ease;
}
.rb-anim-bounce.rb-open .rb-child {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── spin-in: rotate + scale ── */
.rb-anim-spin-in .rb-child {
    transform: rotate(-180deg) scale(0.3);
    opacity: 0;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.rb-anim-spin-in.rb-open .rb-child {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

/* ── flip: Y-axis flip ── */
.rb-anim-flip .rb-child {
    transform: rotateY(90deg) scale(0.7);
    opacity: 0;
    transition: transform .35s cubic-bezier(.34,1.3,.64,1), opacity .25s ease;
    transform-origin: right center;
}
.rb-anim-flip.rb-open .rb-child {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
}

/* ── fan-arc: rotate out in a quarter arc ── */
.rb-anim-fan-arc .rb-child {
    transform: rotate(60deg) translateX(40px) scale(0.4);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform .38s cubic-bezier(.34,1.4,.64,1), opacity .25s ease;
}
.rb-anim-fan-arc.rb-open .rb-child {
    transform: rotate(0deg) translateX(0) scale(1);
    opacity: 1;
}

/* ── Stagger delays (apply to first 8 children) ── */
.rb-group[data-anim="stagger"] .rb-child:nth-child(1) { transition-delay: 0s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(2) { transition-delay: .06s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(3) { transition-delay: .12s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(4) { transition-delay: .18s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(5) { transition-delay: .24s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(6) { transition-delay: .30s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(7) { transition-delay: .36s; }
.rb-group[data-anim="stagger"] .rb-child:nth-child(8) { transition-delay: .42s; }
/* Reverse on close */
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(1) { transition-delay: .42s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(2) { transition-delay: .36s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(3) { transition-delay: .30s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(4) { transition-delay: .24s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(5) { transition-delay: .18s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(6) { transition-delay: .12s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(7) { transition-delay: .06s; }
.rb-group[data-anim="stagger"]:not(.rb-open) .rb-child:nth-child(8) { transition-delay: 0s; }

/* ══ Chat Widget ══════════════════════════════ */
.rb-chat-widget {
    position: fixed;
    z-index: 10000;
    bottom: 90px;
    right: 24px;
    width: 300px;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    transition: transform .28s cubic-bezier(.34,1.3,.64,1), opacity .28s ease;
    transform-origin: bottom right;
}
.rb-chat-widget.rb-chat-open { transform: scale(1) translateY(0); opacity: 1; }

.rb-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; color: #fff;
}
.rb-chat-header-left { display: flex; align-items: center; gap: 10px; }
.rb-chat-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rb-chat-header-text { display: flex; flex-direction: column; gap: 2px; }
.rb-chat-title    { font-size: 14px; font-weight: 700; line-height: 1.2; }
.rb-chat-subtitle { font-size: 12px; opacity: .85; }
.rb-chat-close {
    background: none; border: none; cursor: pointer; color: #fff;
    font-size: 22px; line-height: 1; opacity: .8; padding: 0 0 2px; flex-shrink: 0;
    transition: opacity .15s;
}
.rb-chat-close:hover { opacity: 1; }

.rb-chat-body {
    background: #f0f0f0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 14px 12px; min-height: 120px;
}
.rb-chat-date-label { text-align: center; font-size: 11px; color: #999; margin-bottom: 10px; font-weight: 500; }
.rb-chat-bubble {
    background: #fff; border-radius: 0 10px 10px 10px;
    padding: 10px 12px 8px; max-width: 85%;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
[dir="rtl"] .rb-chat-bubble { border-radius: 10px 0 10px 10px; margin-left: auto; }
.rb-chat-bubble-name { font-size: 12px; font-weight: 700; color: #2b7fbb; margin-bottom: 4px; }
.rb-chat-bubble-text { font-size: 13px; color: #222; line-height: 1.5; white-space: pre-line; }
.rb-chat-bubble-time { font-size: 10px; color: #aaa; text-align: right; margin-top: 4px; }
[dir="rtl"] .rb-chat-bubble-time { text-align: left; }

.rb-chat-footer {
    background: #fff; display: flex; align-items: center;
    padding: 10px 12px; gap: 8px; border-top: 1px solid #eee;
}
.rb-chat-input {
    flex: 1; border: 1px solid #e0e0e0; border-radius: 20px;
    padding: 8px 14px; font-size: 13px; outline: none; color: #333;
    transition: border-color .2s; background: #f8f8f8;
}
.rb-chat-input:focus  { border-color: #2b7fbb; background: #fff; }
.rb-chat-input::placeholder { color: #bbb; }
.rb-chat-send {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: filter .2s, transform .15s;
}
.rb-chat-send:hover { filter: brightness(1.1); transform: scale(1.08); }

.rb-wa-footer { flex-direction: column; gap: 10px; padding: 12px; }
.rb-wa-footer .rb-chat-input { width: 100%; box-sizing: border-box; border-radius: 8px; }
.rb-wa-send-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 16px; border-radius: 8px; border: none;
    color: #fff !important; font-size: 14px; font-weight: 700;
    text-decoration: none !important; cursor: pointer;
    transition: filter .2s, transform .15s; box-sizing: border-box;
}
.rb-wa-send-btn:hover { filter: brightness(1.1); transform: scale(1.02); }

/* Empty input shake */
@keyframes rb-input-shake {
    0%,100% { transform: translateX(0); border-color: #e74c3c; }
    20%     { transform: translateX(-6px); border-color: #e74c3c; }
    40%     { transform: translateX(6px);  border-color: #e74c3c; }
    60%     { transform: translateX(-4px); border-color: #e74c3c; }
    80%     { transform: translateX(4px);  border-color: #e74c3c; }
}
.rb-input-shake {
    animation: rb-input-shake 0.4s ease both;
    border-color: #e74c3c !important;
    background: #fff5f5 !important;
}

/* ── Number Picker Widget ──────────────────────── */
.rb-picker-widget {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 280px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    overflow: hidden;
    z-index: 9998;
    opacity: 0;
    transform: scale(0.85) translateY(12px);
    transform-origin: bottom right;
    transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.4,.64,1);
    pointer-events: none;
}
.rb-picker-widget.rb-picker-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.rb-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
}
.rb-picker-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.rb-picker-close {
    background: rgba(255,255,255,.2);
    border: none;
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
    flex-shrink: 0;
}
.rb-picker-close:hover { background: rgba(255,255,255,.35); }
.rb-picker-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rb-picker-prompt {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 4px;
    font-weight: 500;
}
.rb-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    transition: filter .15s, transform .15s;
}
.rb-picker-option:hover { filter: brightness(1.1); transform: scale(1.02); }
.rb-picker-option svg { flex-shrink: 0; }
.rb-picker-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rb-picker-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.rb-picker-sub  { font-size: 14px; opacity: .9; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .rb-picker-widget { right: auto; left: 24px; transform-origin: bottom left; }