/*
 * Component : Button (np-btn)
 * File      : css/mobile/components/buttons.css
 * Loaded by : np_register_component('button', 'mobile', ...)
 *
 * Usage (PHP):
 *   echo np_m_button([
 *       'text'     => 'Book a Pandit',
 *       'onclick'  => 'openGeneralBookingModal()',
 *       'icon'     => 'fas fa-arrow-right',            // optional
 *       'variant'  => 'filled',                        // filled | outline | ghost | gradient
 *       'color'    => 'saffron',                       // saffron | green | white | dark
 *       'size'     => 'md',                            // sm | md | lg
 *       'pill'     => true,                            // rounded-full shape
 *       'icon_pos' => 'end',                           // start | end
 *   ]);
 *
 * Icon-end design matches .np-m-hero__cta-btn visual:
 *   <button class="np-btn np-btn--filled np-btn--saffron np-btn--md np-btn--pill np-btn--icon-end">
 *       <span class="np-btn__label">Book Now</span>
 *       <span class="np-btn__icon np-btn__icon--bubble"><i class="fas fa-arrow-right"></i></span>
 *   </button>
 */


/* ═══════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════ */

.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--np-font, 'Noto Sans', sans-serif);
    font-weight: 600;
    text-decoration: none !important;
    border: none !important;
    outline: none;
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
    /* iOS touch-target minimum */
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.20s ease,
        color 0.20s ease,
        border-color 0.20s ease;
    vertical-align: middle;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.np-btn:focus-visible {
    outline: 2px solid var(--np-saffron, #F37420);
    outline-offset: 3px;
}

/* Prevent anchor underline */
a.np-btn,
a.np-btn:hover,
a.np-btn:visited {
    text-decoration: none;
}


/* ═══════════════════════════════════════════════
   SIZE
   ═══════════════════════════════════════════════ */

.np-btn--sm {
    font-size: 12px;
    padding: 8px 14px;
    min-height: 36px;
    gap: 6px;
}

.np-btn--md {
    font-size: 14px;
    padding: 10px 20px;
}

.np-btn--lg {
    font-size: 15px;
    padding: 13px 24px;
    gap: 10px;
}


/* ═══════════════════════════════════════════════
   SHAPE
   ═══════════════════════════════════════════════ */

.np-btn--pill {
    border-radius: var(--np-radius-pill, 999px);
}

.np-btn--rounded {
    border-radius: var(--np-radius, 10px);
}


/* ═══════════════════════════════════════════════
   FULL WIDTH
   ═══════════════════════════════════════════════ */

.np-btn--block {
    display: flex;
    width: 100%;
}


/* ═══════════════════════════════════════════════
   VARIANT × COLOR : FILLED
   ═══════════════════════════════════════════════ */

.np-btn--filled.np-btn--saffron {
    background: var(--np-saffron, #F37420) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(243, 116, 32, 0.28);
}

.np-btn--filled.np-btn--saffron:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.np-btn--filled.np-btn--green {
    background: var(--np-green, #059669) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
}

.np-btn--filled.np-btn--green:active {
    transform: scale(0.97);
}

.np-btn--filled.np-btn--white {
    background: #fff !important;
    color: var(--np-saffron, #F37420) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.np-btn--filled.np-btn--white:active {
    transform: scale(0.97);
}

.np-btn--filled.np-btn--dark {
    background: var(--np-text-dark, #3E2723) !important;
    color: #fff !important;
}

.np-btn--filled.np-btn--dark:active {
    transform: scale(0.97);
}


/* ═══════════════════════════════════════════════
   VARIANT × COLOR : OUTLINE
   ═══════════════════════════════════════════════ */

.np-btn--outline.np-btn--saffron {
    background: #fff !important;
    color: var(--np-saffron, #F37420) !important;
    border: 2px solid var(--np-saffron, #F37420) !important;
    transition: all 0.3s ease;
}

.np-btn--outline.np-btn--saffron:hover {
    background: var(--np-saffron, #F37420) !important;
    color: #fff !important;
    border-color: var(--np-saffron, #F37420) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(243, 116, 32, 0.25);
}

.np-btn--outline.np-btn--saffron:hover .np-btn__icon,
.np-btn--outline.np-btn--saffron:hover .np-btn__label {
    color: #fff;
}

.np-btn--outline.np-btn--saffron:hover .np-btn__icon--bubble {
    background: rgba(255, 255, 255, 0.25);
}

.np-btn--outline.np-btn--saffron:active {
    transform: scale(0.97);
    box-shadow: none;
}

.np-btn--outline.np-btn--green {
    background: transparent !important;
    color: var(--np-green, #059669) !important;
    border: 1.5px solid var(--np-green, #059669) !important;
}

.np-btn--outline.np-btn--green .np-icon-svg svg {
    fill: var(--np-green, #059669) !important;
}

.np-btn--outline.np-btn--green:active {
    transform: scale(0.97);
    background: var(--np-green-bg, rgba(5, 150, 105, 0.08));
}

.np-btn--outline.np-btn--white {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.80) !important;
}

.np-btn--outline.np-btn--white:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

.np-btn--outline.np-btn--dark {
    background: transparent !important;
    color: var(--np-text-dark, #3E2723) !important;
    border: 1.5px solid var(--np-text-dark, #3E2723) !important;
}

.np-btn--outline.np-btn--dark:active {
    transform: scale(0.97);
}


/* ═══════════════════════════════════════════════
   VARIANT × COLOR : GHOST
   ═══════════════════════════════════════════════ */

.np-btn--ghost.np-btn--saffron {
    background: var(--np-saffron-bg, rgba(243, 116, 32, 0.08)) !important;
    color: var(--np-saffron, #F37420) !important;
    border: none !important;
    border-radius: 5px;
}

.np-btn--ghost.np-btn--saffron:active {
    background: rgba(243, 116, 32, 0.16);
    transform: scale(0.97);
}

.np-btn--ghost.np-btn--green {
    background: var(--np-green-bg, rgba(5, 150, 105, 0.08)) !important;
    color: var(--np-green, #059669) !important;
    border: none !important;
}

.np-btn--ghost.np-btn--green:active {
    background: rgba(5, 150, 105, 0.16);
    transform: scale(0.97);
}

.np-btn--ghost.np-btn--white {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: none !important;
}

.np-btn--ghost.np-btn--white:active {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(0.97);
}

.np-btn--ghost.np-btn--dark {
    background: rgba(62, 39, 35, 0.07) !important;
    color: var(--np-text-dark, #3E2723) !important;
    border: none !important;
}


/* ═══════════════════════════════════════════════
   VARIANT × COLOR : GRADIENT
   ═══════════════════════════════════════════════ */

.np-btn--gradient.np-btn--saffron {
    background: var(--np-grad-saffron, linear-gradient(135deg, #e05515, #f7971e));
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(243, 116, 32, 0.30);
}

.np-btn--gradient.np-btn--saffron:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.np-btn--gradient.np-btn--green {
    background: var(--np-grad-green, linear-gradient(135deg, #059669, #10B981));
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.30);
}

.np-btn--gradient.np-btn--green:active {
    transform: scale(0.97);
}

/* Festival CTA — reads festival token with saffron-gradient fallback */
.np-btn--gradient.np-btn--festival {
    background: var(--np-festival-btn, var(--np-grad-saffron, linear-gradient(135deg, #e05515, #f7971e)));
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(243, 116, 32, 0.30);
}


/* ═══════════════════════════════════════════════
   ICON WRAPPER
   ═══════════════════════════════════════════════ */

.np-btn__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1;
}

/* Size overrides for icon */
.np-btn--sm .np-btn__icon {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

.np-btn--lg .np-btn__icon {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

/* Material Symbol icons inside buttons — scale with button text */
.np-btn .material-symbols-outlined {
    font-size: 1em;
    vertical-align: -0.15em;
    line-height: 1;
}

.np-btn--sm .material-symbols-outlined { font-size: 14px; }
.np-btn--md .material-symbols-outlined { font-size: 16px; }
.np-btn--lg .material-symbols-outlined { font-size: 18px; }

/* Icon inside bubble wrapper — fixed small size */
.np-btn__icon .material-symbols-outlined {
    font-size: 14px;
    vertical-align: 0;
}

/*
 * Icon bubble — translucent circle (matches hero CTA arrow visual).
 * Applied when icon_bubble: true (default when icon is set).
 */
.np-btn__icon--bubble {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

/* On outline / ghost, bubble needs a different tint (no white background) */
.np-btn--outline .np-btn__icon--bubble,
.np-btn--ghost .np-btn__icon--bubble {
    background: rgba(0, 0, 0, 0.07);
}

/* On white-filled, bubble is tinted saffron-faint */
.np-btn--filled.np-btn--white .np-btn__icon--bubble {
    background: rgba(243, 116, 32, 0.10);
}


/* ═══════════════════════════════════════════════
   DISABLED
   ═══════════════════════════════════════════════ */

.np-btn:disabled,
.np-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════
   POSITION WRAPPER — align='left'|'center'|'right'
   ═══════════════════════════════════════════════ */

.np-btn-wrap {
    display: flex;
    width: 100%;
}

.np-btn-wrap--left   { justify-content: flex-start; }
.np-btn-wrap--center { justify-content: center; }
.np-btn-wrap--right  { justify-content: flex-end; }