*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    overflow-x:clip;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fafafa;
    overflow-x:clip;
    max-width:100%;
    width:100%;
}

#availability{
    overflow-x:clip;
    max-width:100%;
}

header{
    background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url('/resource/room1/room1_feature.jpg');
    background-size:cover;
    background-position:center;
    min-height:85vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    padding:24px 16px;
}

.hero{
    max-width:800px;
    padding:20px;
    width:100%;
}

.hero-controls{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.hero-controls .btn-compact{
    padding:8px 18px;
    font-size:.82rem;
    margin:0;
    border-radius:22px;
}

.hero-inline-toggle{
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:2px;
}

.hero-inline-toggle button{
    color:rgba(255,255,255,.9);
    padding:7px 14px;
    font-size:.78rem;
}

.hero h1{
    font-size:5.5rem;
    margin-bottom:15px;
    font-weight:700;
    letter-spacing:-2px;
}

.hero p{
    font-size:1.3rem;
    margin-bottom:25px;
}

.btn{
    display:inline-block;
    padding:14px 28px;
    text-decoration:none;
    border-radius:30px;
    margin:8px;
    font-weight:600;
    transition:transform 0.2s, box-shadow 0.2s;
}

.btn:active{
    transform:scale(0.98);
}

.primary{
    background:#ff7b00;
    color:white;
}

section{
    max-width:1200px;
    margin:auto;
    padding:70px 20px;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.section-title h2{
    font-size:2.3rem;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    cursor:pointer;
    transition:box-shadow .2s, transform .2s;
    border:2px solid transparent;
}

.card.room-selected{
    border-color:#ff7b00;
    box-shadow:0 12px 32px rgba(255,123,0,.25);
}

.card.room-card-host-hidden{
    opacity:.55;
}

.card:focus-visible{
    outline:2px solid #ff7b00;
    outline-offset:2px;
}

.property-id{
    display:inline-block;
    font-size:.75rem;
    font-weight:600;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:4px;
}

.rooms-hint{
    text-align:center;
    color:#666;
    font-size:.95rem;
    margin:10px auto 0;
    max-width:520px;
    line-height:1.5;
}

.rooms-empty{
    grid-column:1 / -1;
    text-align:center;
    color:#666;
    padding:24px 16px;
    background:#fafafa;
    border-radius:12px;
}

.guest-room-options.hidden{
    display:none !important;
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    background:#eee;
}

.card-content{
    padding:20px;
}

.price{
    color:#ff7b00;
    font-size:1.8rem;
    font-weight:700;
    margin-top:10px;
    line-height:1.2;
}

.price-range{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px;
}

.price-high{
    color:#999;
    font-size:1.25rem;
    font-weight:600;
    text-decoration:line-through;
}

.price-low{
    color:#ff7b00;
    font-size:1.8rem;
    font-weight:700;
}

.amenities-section{
    padding:50px 20px;
}

.amenities-section .section-title{
    margin-bottom:24px;
}

.amenities-section .section-title h2{
    font-size:2rem;
}

.amenities-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px;
    max-width:1000px;
    margin:0 auto;
}

.amenity-category{
    background:white;
    border-radius:12px;
    padding:12px 14px;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
    text-align:left;
}

.amenity-category h3{
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#ff7b00;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid #f0f0f0;
}

.amenity-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.amenity-list li{
    font-size:.74rem;
    line-height:1.3;
    color:#444;
    background:#f7f7f7;
    border-radius:6px;
    padding:4px 8px;
}

.amenities-loading,
.amenities-error{
    text-align:center;
    color:#666;
    font-size:.9rem;
}

.gallery-carousel{
    max-width:920px;
    margin:0 auto;
}

.carousel-viewport{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    background:#1a1a1a;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    touch-action:pan-y;
}

.carousel-slide{
    display:none;
    width:100%;
    aspect-ratio:16/10;
}

.carousel-slide.active{
    display:block;
}

.carousel-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#222;
}

.carousel-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#333;
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.2);
    transition:transform .15s, background .15s;
    z-index:2;
}

.carousel-nav:hover{
    background:#fff;
    transform:translateY(-50%) scale(1.05);
}

.carousel-nav.prev{ left:12px; }
.carousel-nav.next{ right:12px; }

.carousel-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:14px 18px;
    background:linear-gradient(transparent, rgba(0,0,0,.65));
    color:#fff;
    font-size:.95rem;
    text-align:center;
    z-index:1;
}

.carousel-dots{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.carousel-dots button{
    width:10px;
    height:10px;
    border:none;
    border-radius:50%;
    background:#ccc;
    cursor:pointer;
    padding:0;
    transition:background .2s, transform .2s;
}

.carousel-dots button.active{
    background:#ff7b00;
    transform:scale(1.15);
}

.carousel-thumbs{
    display:flex;
    gap:10px;
    margin-top:14px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.carousel-thumbs button{
    flex:0 0 72px;
    width:72px;
    height:54px;
    border:2px solid transparent;
    border-radius:8px;
    overflow:hidden;
    padding:0;
    cursor:pointer;
    opacity:.7;
    scroll-snap-align:start;
    transition:opacity .2s, border-color .2s;
}

.carousel-thumbs button.active,
.carousel-thumbs button:hover{
    opacity:1;
    border-color:#ff7b00;
}

.carousel-thumbs img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.contact{
    text-align:center;
}

.house-rules-section,
.cancellation-section{
    max-width:720px;
    margin:0 auto 40px;
}

.policy-list{
    list-style:disc;
    padding-left:1.4rem;
    margin:0;
    line-height:1.7;
    color:#444;
}

.policy-text p{
    margin:0 0 12px;
    line-height:1.7;
    color:#444;
}

.policy-text p:last-child{
    margin-bottom:0;
}

.guest-field-note{
    margin:-8px 0 16px;
    font-size:0.8rem;
    color:#666;
    line-height:1.4;
}

#availability-calendar{
    max-width:900px;
    margin:0 auto 30px;
    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:visible;
}

#availability-calendar .fc-view-harness{
    min-height:360px;
    height:auto !important;
}

body.mode-guest #availability-calendar .fc-daygrid-day-events,
body.mode-host #availability-calendar .fc-daygrid-day-events{
    display:none !important;
    min-height:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

body.mode-guest #availability-calendar .fc-daygrid-body-unbalanced .fc-daygrid-day-events,
body.mode-host #availability-calendar .fc-daygrid-body-unbalanced .fc-daygrid-day-events{
    min-height:0;
    margin-bottom:0;
}

body.mode-guest #availability-calendar .fc-event,
body.mode-host #availability-calendar .fc-event{
    display:none;
}

.hero-inline-toggle button,
.role-toggle button{
    touch-action:manipulation;
}

.calendar-legend{
    display:flex;
    justify-content:center;
    gap:24px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.calendar-legend span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.95rem;
}

body.mode-guest .legend-blocked{
    display:none;
}

.calendar-legend i{
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:4px;
}

.legend-booked i{
    background:#ff7b00;
}

.legend-available i{
    background:#e8f5e9;
    border:1px solid #c8e6c9;
}

#calendar-status{
    text-align:center;
    color:#666;
    margin-bottom:15px;
    font-size:0.95rem;
}

/* Mobile Calendar Styles */
@media (max-width: 768px) {
    header{
        min-height:60vh;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero p{
        font-size:1rem;
        margin-bottom:18px;
    }

    .hero-controls{
        gap:8px;
    }

    .hero-inline-toggle button{
        padding:7px 12px;
        font-size:.75rem;
    }

    .calendar-legend{
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:center;
        gap:10px 14px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .calendar-legend span{
        font-size:.72rem;
        gap:5px;
        white-space:nowrap;
        flex-shrink:0;
    }

    .calendar-legend i{
        width:12px;
        height:12px;
    }

    body.mode-guest .legend-selected{
        display:none;
    }

    .carousel-nav{
        width:38px;
        height:38px;
        font-size:1.2rem;
    }

    .carousel-nav.prev{ left:8px; }
    .carousel-nav.next{ right:8px; }

    .carousel-slide{
        aspect-ratio:4/3;
    }

    .carousel-thumbs button{
        flex:0 0 64px;
        width:64px;
        height:48px;
    }

    .cards{
        grid-template-columns:1fr;
    }

    .amenities-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }

    .amenity-category{
        padding:10px 12px;
    }

    .amenity-category h3{
        font-size:.78rem;
    }

    .amenity-list li{
        font-size:.7rem;
        padding:3px 7px;
    }

    .amenities-section{
        padding:36px 15px;
    }

    .host-actions{
        grid-template-columns:1fr;
    }

    .availability-header .section-title{
        text-align:center;
        width:100%;
    }

    .section-title h2{
        font-size:1.5rem;
    }

    #availability-calendar{
        padding:12px;
        margin:0 auto 24px;
        max-width:100%;
    }

    #availability-calendar .fc-view-harness{
        min-height:380px;
        height:auto !important;
        max-height:none;
    }

    #availability-calendar .fc-scrollgrid,
    #availability-calendar .fc-scrollgrid-sync-table{
        width:100% !important;
    }

    #availability-calendar .fc-daygrid-day-frame{
        min-height:52px;
        padding-bottom:2px;
    }

    .host-room-toolbar{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .host-room-toolbar select{
        min-width:0;
        width:100%;
        max-width:100%;
        font-size:16px;
    }

    .room-visibility{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        max-width:100%;
    }

    .host-panel{
        padding:16px;
        margin:12px auto;
    }

    .host-panel .host-price-input,
    .pin-modal input{
        font-size:16px;
    }

    .ical-export{
        padding:12px;
        font-size:.82rem;
    }

    .ical-export code{
        font-size:.72rem;
        padding:8px;
    }

    section#availability{
        padding-left:12px;
        padding-right:12px;
    }

    /* FullCalendar mobile optimization */
    .fc{
        font-size:0.85em;
    }

    .fc .fc-button-primary{
        background-color:#ff7b00;
        border-color:#ff7b00;
        font-size:0.8rem;
        padding:4px 8px;
    }

    .fc .fc-button-primary:not(:disabled).fc-button-active{
        background-color:#e56a00;
        border-color:#e56a00;
    }

    .fc .fc-button-primary:not(:disabled):hover{
        background-color:#ff8c1f;
    }

    .fc-col-header-cell{
        padding:6px 2px;
        font-size:0.75rem;
        font-weight:600;
    }

    .fc-daygrid-day{
        padding:4px 2px;
    }

    .fc-daygrid-day-number{
        padding:4px 2px;
        font-size:0.75rem;
    }

    .fc .fc-event{
        padding:2px;
    }

    .fc-event-title{
        font-size:0.65rem;
        padding:2px;
        overflow:hidden;
        white-space:nowrap;
    }

    .fc-toolbar{
        flex-direction:column;
        gap:8px;
    }

    .fc-toolbar-chunk{
        width:100%;
        display:flex;
        justify-content:center;
        gap:4px;
    }

    .fc-toolbar h2{
        font-size:1.1rem;
    }

    section{
        padding:40px 15px;
    }
}

@media (max-width: 480px) {
    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:0.95rem;
    }

    .btn{
        padding:10px 20px;
        font-size:0.9rem;
        margin:6px;
    }

    .section-title h2{
        font-size:1.2rem;
    }

    .fc{
        font-size:0.75em;
    }

    .fc-toolbar{
        flex-direction:column;
        gap:6px;
    }

    .fc-toolbar-chunk{
        width:100%;
    }

    #availability-calendar{
        padding:10px;
    }

    section{
        padding:30px 12px;
    }
}

footer{
    background:#1e1e1e;
    color:white;
    text-align:center;
    padding:30px;
}

/* FullCalendar responsive fixes */
.fc-theme-standard td, .fc-theme-standard th{
    border-color:#e0e0e0;
}

.fc-daygrid-day-frame{
    position:relative;
    display:flex;
    flex-direction:column;
}

.fc-day-num{
    font-weight:600;
    line-height:1.2;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame{
    background:transparent !important;
}

.fc .fc-daygrid-day.fc-day-today .fc-day-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:1.75em;
    height:1.75em;
    padding:0;
    background:#0097a7;
    border:2px solid #006978;
    border-radius:50%;
    color:#fff;
    font-weight:700;
    box-sizing:border-box;
}

.fc-day-meta{
    margin-top:2px;
    line-height:1.15;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:1px;
    overflow:hidden;
}

.fc-day-price{
    font-size:.65rem;
    font-weight:600;
    color:#2e7d32;
    line-height:1.1;
}

.fc-day-status{
    font-size:.58rem;
    font-weight:700;
    line-height:1.15;
    text-transform:capitalize;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.fc-day-status-free{
    color:#2e7d32;
}

.fc-day-status-blocked{
    color:#616161;
}

.fc-day-status-booked{
    color:#e65100;
}

/* Ensure buttons don't overflow on mobile */
.booking-buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

@media (min-width: 600px) {
    .booking-buttons{
        flex-direction:row;
        justify-content:center;
    }
}

.booking-buttons .btn{
    margin:0;
}

.booking-form{
    max-width:560px;
    margin:30px auto 0;
    background:white;
    padding:28px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:left;
}

.booking-form h3{
    text-align:center;
    margin-bottom:20px;
    color:#333;
}

.booking-form label{
    display:block;
    font-size:.9rem;
    font-weight:600;
    margin:12px 0 6px;
    color:#555;
}

.booking-form label .req{
    color:#c62828;
}

.booking-form input,
.booking-form select{
    width:100%;
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-family:inherit;
    font-size:16px;
}

.booking-form .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.booking-form .msg{
    margin-top:14px;
    text-align:center;
    font-size:.95rem;
}

.booking-form .msg.error{ color:#c62828; }
.booking-form .msg.success{ color:#2e7d32; }

.ical-export{
    text-align:center;
    margin-top:24px;
    padding:16px;
    background:#fff8f0;
    border-radius:12px;
    font-size:.9rem;
    color:#555;
}

.ical-export code{
    display:block;
    margin-top:8px;
    padding:10px;
    background:white;
    border-radius:8px;
    word-break:break-all;
    font-size:.85rem;
}

@media (max-width: 600px) {
    .booking-form .row{
        grid-template-columns:1fr;
    }
}

/* Calendar v2 */
.availability-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:24px;
}

.availability-header .section-title{
    margin-bottom:0;
    text-align:center;
    width:100%;
}

.availability-header .section-title h2{
    margin:0;
}

.role-toggle{
    display:flex;
    gap:0;
    margin:0;
    background:#eee;
    border-radius:30px;
    padding:4px;
    flex-shrink:0;
}

.role-toggle button{
    flex:1;
    border:none;
    padding:12px 20px;
    border-radius:26px;
    font-family:inherit;
    font-weight:600;
    font-size:.95rem;
    cursor:pointer;
    background:transparent;
    color:#666;
    transition:background .2s, color .2s, box-shadow .2s;
    min-width:4.8rem;
}

.role-toggle button.active{
    background:#ff7b00;
    color:white;
    box-shadow:0 4px 12px rgba(255,123,0,.35);
}

.calendar-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin-bottom:16px;
}

.calendar-toolbar select{
    padding:10px 14px;
    border-radius:10px;
    border:1px solid #ddd;
    font-family:inherit;
    min-width:220px;
}

.selection-summary{
    text-align:center;
    background:#fff8f0;
    border:1px solid #ffe0b2;
    border-radius:12px;
    padding:14px 20px;
    margin:16px auto;
    max-width:640px;
    font-size:.95rem;
}

.selection-summary strong{ color:#e65100; }

.host-panel{
    display:none;
    max-width:640px;
    margin:20px auto;
    background:white;
    padding:24px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.host-panel.visible{ display:block; }

.host-panel h3{ text-align:center; margin-bottom:12px; }

.host-pin-row{
    display:flex;
    gap:8px;
    margin-bottom:16px;
}

.host-pin-row input{
    flex:1;
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:10px;
}

.host-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.host-actions button{
    padding:12px;
    border:none;
    border-radius:10px;
    font-family:inherit;
    font-weight:600;
    cursor:pointer;
}

.host-actions .block-btn{ background:#616161; color:white; }
.host-actions .unblock-btn{ background:#e8f5e9; color:#2e7d32; }
.host-actions .price-btn{ background:#ff7b00; color:white; }
.host-actions .reset-btn{ background:#f5f5f5; color:#333; }
.host-actions .clear-btn{ background:#ffcdd2; color:#b71c1c; grid-column:1 / -1; }

.room-visibility{
    display:none;
    flex-wrap:wrap;
    gap:12px 20px;
    justify-content:center;
    margin:0 0 16px;
    padding:12px 14px;
    background:#fafafa;
    border-radius:10px;
    border:1px solid #eee;
}

.host-panel .room-visibility.visible{ display:flex; }

.room-visibility.visible{ display:flex; }

.room-visibility-title{
    font-weight:600;
    width:100%;
    text-align:center;
    font-size:.9rem;
}

.room-hide-option{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.88rem;
    cursor:pointer;
}

.room-card-hidden{ display:none !important; }

.host-room-toolbar{
    display:none;
    flex-wrap:wrap;
    gap:8px 12px;
    justify-content:center;
    align-items:center;
    margin-bottom:16px;
}

.host-room-toolbar.visible{ display:flex; }

.host-room-toolbar label{
    font-weight:600;
    font-size:.9rem;
    color:#555;
}

.host-room-toolbar select{
    padding:10px 14px;
    border-radius:10px;
    border:1px solid #ddd;
    font-family:inherit;
    min-width:220px;
}

.guest-room-options{
    margin-bottom:16px;
}

.guest-room-options label{
    display:block;
    margin:8px 0;
    cursor:pointer;
}

.pin-modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.pin-modal-backdrop.open{ display:flex; }

.pin-modal{
    background:white;
    padding:28px;
    border-radius:16px;
    max-width:360px;
    width:90%;
    box-shadow:0 20px 50px rgba(0,0,0,.2);
}

.pin-modal h3{ margin-bottom:12px; text-align:center; }

.pin-modal input{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:10px;
    margin-bottom:12px;
    font-size:16px;
}

.pin-modal-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.host-price-input{
    width:100%;
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    margin-top:8px;
}

#booking-form.hidden{ display:none; }

.fc .fc-daygrid-day.fc-day-booked .fc-daygrid-day-frame{
    background:#fff3e0 !important;
}

.fc .fc-daygrid-day.fc-day-blocked .fc-daygrid-day-frame{
    background:#eeeeee !important;
}

.fc .fc-daygrid-day.fc-day-checkin .fc-daygrid-day-frame,
.fc .fc-daygrid-day.fc-day-checkout .fc-daygrid-day-frame{
    background:#ffe0b2 !important;
    box-shadow:inset 0 0 0 2px #ff7b00;
}

.fc .fc-daygrid-day.fc-day-in-range .fc-daygrid-day-frame{
    background:#fff8e1 !important;
}

.fc .fc-daygrid-day.fc-day-past .fc-day-price,
.fc .fc-daygrid-day.fc-day-past .fc-day-status-free{
    color:#999;
}

@media (max-width: 768px) {
    .fc-day-price{
        font-size:.58rem;
    }

    .fc-day-status{
        font-size:.52rem;
    }
}

.legend-blocked i{ background:#616161; }
.legend-selected i{ background:#ffe0b2; border:2px solid #ff7b00; }

.whatsapp-float{
    position:fixed;
    right:18px;
    bottom:18px;
    width:54px;
    height:54px;
    background:#25d366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 18px rgba(0,0,0,.28);
    z-index:9998;
    text-decoration:none;
    transition:transform .2s, box-shadow .2s;
}

.whatsapp-float:hover{
    transform:scale(1.06);
    box-shadow:0 6px 22px rgba(0,0,0,.32);
}

.whatsapp-float svg{
    width:30px;
    height:30px;
    fill:#fff;
}