/* Extracted from style_reservation.css for Property Sticky Footer Alignment */

:root {
    /* Brand Colors - ensuring usage if not already defined */
    --color-primary: #5CB7AC;
    --color-primary-hover: #6ed4c8;
    --color-navy: #173156;
}

/* ==================== GLOBAL STICKY SETTINGS ==================== */
/* ==================== GLOBAL STICKY SETTINGS ==================== */

/* ==================== GLOBAL STICKY SETTINGS ==================== */
.sticky-bar-wrapper {
    font-family: 'Inter', sans-serif !important;
}

/* ==================== CONTENT TYPOGRAPHY (High Specificity) ==================== */
/* We use .sticky-bar-wrapper prefix to override generic .amount/.unit in other files */

/* Price Label */
.sticky-bar-wrapper .label,
.sticky-bar-wrapper .price-info .label {
    display: block;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
    line-height: normal !important;
}

/* Amount (Big Price) */
.sticky-bar-wrapper .amount,
.sticky-bar-wrapper .price-info .amount,
.sticky-bar-wrapper .value-grp .amount {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: white !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
}

/* Currency / Unit (AUD) */
.sticky-bar-wrapper .unit,
.sticky-bar-wrapper .price-info .unit,
.sticky-bar-wrapper .value-grp .unit {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.1em !important;
    margin-left: 2px !important;
    text-transform: uppercase !important;
}

/* Non-Refundable Legend */
.sticky-bar-wrapper .non-refundable-label,
.sticky-bar-wrapper .mobile-sticky-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 4px !important;
    width: auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
    line-height: normal !important;
    letter-spacing: normal !important;
}

.sticky-bar-wrapper .non-refundable-label i,
.sticky-bar-wrapper .mobile-sticky-label i {
    font-size: 10px !important;
    color: white !important;
}

/* Expanded View Override */
.sticky-bar-wrapper.expanded .non-refundable-label {
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    gap: 8px !important;
    color: white !important;
    width: 100% !important;
}

/* ==================== BUTTONS (CTA) ==================== */
/* Wrapper for alignment */
.sticky-actions-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center button horizontally if needed, or stretch */
    justify-content: center;
}

/* Button Styles */
.sticky-bar-wrapper .cta-btn {
    /* Dimensions */
    height: 52px !important;
    /* Fixed height for consistency */
    min-height: 52px !important;
    width: auto !important;
    min-width: 140px;
    /* Minimum clickable width */

    /* Spacing */
    padding: 0 24px !important;
    margin: 0 !important;
    /* Override any mt-6 */

    /* Typography */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    color: white !important;

    /* Visuals */
    background-color: var(--color-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    /* Consistent pill shape */
    box-shadow: 0 10px 20px -5px rgba(92, 183, 172, 0.4) !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    cursor: pointer;
    transition: all 0.2s;
}

.sticky-bar-wrapper .cta-btn:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-2px);
}

.sticky-bar-wrapper .cta-btn:active {
    transform: translateY(0);
}

/* Icons inside button */
.sticky-bar-wrapper .cta-btn i {
    font-size: 14px !important;
}

/* ==================== STRUCTURE & LAYOUT ==================== */
.sticky-bar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: block;
    /* Fill the home-indicator gap with navy — works in both Safari & Chrome iOS.
       The wrapper's padding area gets the background color, the content stays the same height. */
    background-color: var(--color-navy);
    padding-bottom: 0px;
    /* fallback for browsers without env() support */
    padding-bottom: env(safe-area-inset-bottom);

    /* GPU layer promotion: prevents the sticky bar from visually detaching
       from the screen edge when the mobile browser UI (address bar / bottom bar)
       animates in/out during scroll. By placing the element on its own
       compositor layer, the browser can slide the bar with its own UI
       instead of triggering a full layout repaint that causes the gap. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;

    /* Backface visibility: extra hint for Safari to keep the layer stable */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media (min-width: 1024px) {
    .sticky-bar-wrapper {
        display: none;
    }
}

.sticky-bar-content {
    background-color: var(--color-navy);
    color: white;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border: 1px solid rgba(92, 183, 172, 0.2);
    border-bottom: none;
    transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.bar-collapsed {
    padding: 12px 24px;
    width: 100%;

}


.collapsed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Price Info Container */
.price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.value-grp {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* ==================== NEW STICKY HANDLE (Refactor) ==================== */
.sticky-handle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
    /* Reduced from 16px */
    margin-top: -18px;
    /* Pulled up more (was -12px) */
}

/* The Button itself */
.close-sticky-centered {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 32px;
    /* Reduced vertical padding (was 8px) */
    transition: transform 0.2s;
    width: 100%;
}

.close-sticky-centered:active {
    transform: scale(0.95);
}

/* The Icon (Chevron) styled as a dash-like arrow */
.close-sticky-centered i {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
}

.close-sticky-centered:hover i {
    color: white;
}

/* Adjust Expanded Header since button is gone */
.sticky-bar-wrapper.expanded .expanded-header {
    margin-bottom: 24px;
    justify-content: flex-start;
    /* Align property info to left */
}