/* ================================================================
   Enquiry Floating Button – Front-end Styles  v2.0
   ================================================================

   3 independent sticky elements:
   1. .popupenquiry        → Enquiry Now  (right side, vertically centered)
   2. .efb-call-wrap       → Call Us      (left side, vertically centered)
   3. .efb-wa-wrap         → WhatsApp     (left side, below call)

   .popupenquiry has NO JS / onclick – only styling class.
================================================================ */

/* ================================================================
   1. ENQUIRY NOW BUTTON  –  right side, center
   ================================================================ */

.efb-enquiry-wrap {
    position: fixed;
    right: 0;
    top: 36%;
    transform: translateY(-50%);
    z-index: 99999;
}

/*
 * .popupenquiry
 * Pure styling class – no JS attached here.
 * Rotated vertically so text reads bottom-to-top on the right edge.
 */
.popupenquiry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 8px 8px 0 0;

    /* Rotate so it sits flush on the right edge */
    transform-origin: bottom right;
    transform: rotate(-90deg) translateX(100%);

    /* Visual */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
    cursor: default;           /* no pointer – no function */
    user-select: none;
    box-shadow: -3px -3px 14px rgba(0, 0, 0, 0.22);
    transition: padding 0.2s ease, box-shadow 0.2s ease;

    /* Colors set inline via PHP */
}

.popupenquiry .efb-enq-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ================================================================
   2 & 3. CALL + WHATSAPP SIDE BUTTONS  –  left side
   ================================================================ */

.efb-side-btn-wrap {
    position: fixed;
    right: 0;
    z-index: 99999;
}

/* Vertical positioning */
.efb-call-wrap {
    top: 50%;
    transform: translateY(-60px);   /* slightly above center */
}

.efb-wa-wrap {
    top: 50%;
    transform: translateY(10px);    /* slightly below center */
}

/* The anchor tag */
.efb-side-btn {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
    box-shadow: 3px 3px 14px rgba(0, 0, 0, 0.22);
    transition: width 0.28s ease, box-shadow 0.28s ease;
    max-width: 52px;               /* collapsed – shows only icon */
}

/* Expand on hover to reveal label */
.efb-side-btn:hover,
.efb-side-btn:focus-visible {
    max-width: 240px;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
    outline: none;
}

/* Icon circle */
.efb-side-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    color: #ffffff;
}

/* Label (hidden until hover) */
.efb-side-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 14px 0 4px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
    line-height: 1.3;
}

.efb-side-btn:hover .efb-side-label,
.efb-side-btn:focus-visible .efb-side-label {
    opacity: 1;
}

.efb-side-label strong {
    font-size: 13px;
    font-weight: 700;
}

.efb-side-label small {
    font-size: 11px;
    opacity: 0.85;
}

/* ── CALL colours ── */
.efb-call-btn {
    background: #1a73e8;
    color: #ffffff;
}

.efb-call-btn .efb-side-icon {
    background: #1558b0;
}

/* ── WHATSAPP colours ── */
.efb-wa-btn {
    background: #25d366;
    color: #ffffff;
}

.efb-wa-btn .efb-side-icon {
    background: #128c7e;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media ( max-width: 480px ) {

    /* Enquiry Now – keep rotated, slightly smaller */
    .popupenquiry {
        font-size: 12px;
        padding: 11px 16px;
    }

    /* Side buttons – always show icon only on mobile */
    .efb-side-btn {
        max-width: 48px;
    }

    .efb-side-btn:hover,
    .efb-side-btn:focus-visible {
        max-width: 48px;
    }

    .efb-side-label {
        display: none;
    }

    .efb-side-icon {
        width: 48px;
        height: 48px;
    }
}