/* ==============================================
   Custom Button Plugin — button.css
   ============================================== */

/* ── Base Reset ── */
.cbp-btn-wrap {
    display: block;
    line-height: 1;
}

.cbp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    border: 2px solid transparent;
    outline: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* Default fallback */
    padding: 14px 30px;
    border-radius: 50px;
    background-color: #1a2952;
    color: #ffffff;
    font-size: 14px;
}

/* ── Icon ── */
.cbp-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.cbp-btn-icon i {
    font-size: 14px;
    line-height: 1;
    display: block;
}

.cbp-btn-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
}

/* ── Text ── */
.cbp-btn-text {
    display: inline-block;
    line-height: 1;
}

/* ── Dot indicator (Enquire Now style) ── */
.cbp-btn-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e74c3c;
    flex-shrink: 0;
    animation: cbp-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes cbp-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ==============================================
   PRESETS
   ============================================== */

/* Filled (default) */
.cbp-preset-filled {
    background-color: #1a2952;
    color: #ffffff;
    border-color: transparent;
    text-transform: uppercase;
}
.cbp-preset-filled:hover {
    background-color: #c0392b;
    border-color: transparent;
    transform: translateY(-2px);
}

/* Outline */
.cbp-preset-outline {
    background-color: transparent;
    color: #1a2952;
    border-color: #1a2952;
}
.cbp-preset-outline:hover {
    background-color: #1a2952;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Ghost */
.cbp-preset-ghost {
    background-color: transparent;
    color: #1a2952;
    border-color: transparent;
}
.cbp-preset-ghost:hover {
    background-color: rgba(26, 41, 82, 0.08);
    transform: translateY(-2px);
}

/* Pill — extra rounded, slight shadow */
.cbp-preset-pill {
    background-color: #1a2952;
    color: #ffffff;
    border-color: transparent;
    border-radius: 999px;
    padding: 14px 36px;
}
.cbp-preset-pill:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

/* Dot-Icon (matches "Enquire Now" in screenshot) */
.cbp-preset-dot-icon {
    border-radius: 50px;
	padding-left:20px;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter:blur(8px);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==============================================
   ELEMENTOR HOVER ANIMATIONS (pass-through)
   ============================================== */
.cbp-btn.elementor-animation-grow:hover         { transform: scale(1.05); }
.cbp-btn.elementor-animation-shrink:hover        { transform: scale(0.95); }
.cbp-btn.elementor-animation-pulse:hover         { animation: cbp-pulse 0.5s ease; }
.cbp-btn.elementor-animation-wobble-horizontal:hover { animation: cbp-wobble-h 0.5s ease; }
.cbp-btn.elementor-animation-buzz:hover          { animation: cbp-buzz 0.15s linear infinite; }

@keyframes cbp-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}
@keyframes cbp-wobble-h {
    16.65%  { transform: translateX(8px); }
    33.3%   { transform: translateX(-6px); }
    49.95%  { transform: translateX(4px); }
    66.6%   { transform: translateX(-2px); }
    83.25%  { transform: translateX(1px); }
    100%    { transform: translateX(0); }
}
@keyframes cbp-buzz {
    50%  { transform: translateX(3px) rotate(2deg); }
    100% { transform: translateX(-3px) rotate(-2deg); }
}
