/* ------------------------------
   Floating Tabs Container
--------------------------------*/
.floating-tabs {
    position: fixed;
    top: 120px;               /* Starting vertical position */
    right: -100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9998;            /* Below modal, above everything else */
    pointer-events: auto;

    width: 135px;
    transform: translateY(0);
    /*transition: transform 0.5s ease;*/ /* smooth slide */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Attention-draw motion */
.floating-tabs.attention {
    transform: translateY(30px); /* slide down */
}

/* ------------------------------
   Individual Tab Button
--------------------------------*/
.floating-tab {
    background: rgba(255, 153, 2, 1);   /*#D4AF37;*/       /* Luxury gold, adjust as needed */
    color: #fff; 

    /* color: #000; */
    /* padding: 12px 18px; */
    padding: 5px 10px;
    border-radius: 6px 0 0 6px; /* Rounded left side */
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.35);
    white-space: nowrap;
    user-select: none;

    transition: background 0.3s ease, transform 0.2s ease;

    font-size: 12px;
    line-height: 20px;
}

.floating-tab:hover {
    background: rgb(255, 174, 51); /* #f5d372; */
    color: rgba(255,255,255,0.8);

    /*transform: translateX(-4px);*/ /* Slide slightly left on hover */
    transform: translateX(-100px);
}
.tab-al {   /* AnguillaListings : default */
    /* background: rgba(255, 153, 2, 1); */
}
.tab-qd {   /* QuickDelivery */
    /* background: linear-gradient(90deg, rgba(119, 0, 116, 1) 0%, rgba(0, 139, 255, 1) 50%);  */
    background: linear-gradient(to right, #fa1515 0%, #e702ae 51%, #e6330f 100%);
}
.tab-qd:hover {
    background: linear-gradient(to right, #fb3838 0%, #ec48c3 51%, #e45f45 100%);
}

/* ------------------------------
   Modal Overlay
--------------------------------*/
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 10000;             /* Higher than floating tabs */
}

/* ------------------------------
   Modal Content Container
--------------------------------*/
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 420px;
    max-width: 95%;
    background: #111;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 25px;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 10001;
    color: #fff;
}

/* Close button */
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
    color: #fff;
}