/* ===================================
   Rianshi Lead Widget
=================================== */

/* Scoped box-sizing reset - several elements in
   this widget apply padding without their own
   box-sizing:border-box, which lets them render
   slightly larger than their container and forces
   an unwanted scrollbar. Scoping this to #rlw-widget
   only affects the plugin, not the rest of the site. */
#rlw-widget,
#rlw-widget *,
#rlw-widget *::before,
#rlw-widget *::after{

    box-sizing:border-box;

}

#rlw-widget{

    position:fixed;

    bottom:30px;

    right:30px;

    display:flex;

    align-items:center;

    gap:14px;

    z-index:999999;

}

/* ---------------- Message ---------------- */

#rlw-message{

    background:#fff;

    color:#222;

    padding:14px 18px;

    border-radius:12px;

    font-family:Poppins,sans-serif;

    font-size:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    white-space:nowrap;

    opacity:0;

    transform:translateX(20px);

    transition:.35s ease;

    pointer-events: none;

}

/* Visible */

#rlw-message.show{

    opacity:1;

    transform:translateX(0);

}

/* ---------------- Bubble ---------------- */

#rlw-bubble{

    width:64px;

    height:64px;

    background:#DD9933;

    border-radius:50%;

    border:none;

    padding:0;

    font:inherit;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    transition:.3s;

    opacity:0;

    transform:translateY(50px);

}

#rlw-bubble.show{

    opacity:1;

    transform:translateY(0);

}

#rlw-bubble:hover{

    transform:translateY(0) scale(1.08);

}

/* ===================================
   Drawer
=================================== */

#rlw-drawer{

    position: fixed;

    right: 30px;

    bottom: 110px;

    width: 380px;

    height: 430px;

    max-height: none;

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 24px 60px rgba(0,0,0,.18);

    transform: translateY(20px);

    opacity: 0;

    visibility: hidden;

    /* Only animate cheap, GPU-composited properties.
       Width/height are intentionally excluded so resizing
       between screens doesn't trigger a janky layout
       animation - it now snaps instantly instead. */
    transition: transform .35s ease, opacity .3s ease;

    contain: layout style paint;

    will-change: transform, opacity;

    display: flex;

    flex-direction: column;

    z-index: 999998;

}

/* Drawer Open */

#rlw-drawer.open{

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

}

/* ===========================
   Header
=========================== */

.rlw-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-bottom:1px solid #ececec;

}

.rlw-header-logo{

    width:125px;
    height:auto;

    display:block;

    object-fit:contain;

}

.rlw-logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex:1;

    gap:8px;

}

#rlw-back{

    display:none;

    width:34px;

    height:34px;

    border:none;

    background:transparent;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#555;

    flex-shrink:0;

    transition:.25s ease;

}

#rlw-back:hover{

    background:#F5F5F5;

    color:#DD9933;

}

#rlw-close{

    border:none;

    background:none;

    font-size:22px;

    cursor:pointer;

    color:#888;

    transition:.3s;

}

#rlw-close:hover{

    color:#000;

}

/* ===========================
   Drawer Content
=========================== */

#rlw-content{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    background:#fafafa;

    display:flex;

    flex-direction:column;

}

/* Thin, unobtrusive scrollbar - only shows up when a
   screen actually needs to scroll (e.g. a long projects
   list), rather than the browser's default wide gutter. */
#rlw-content::-webkit-scrollbar{

    width:6px;

}

#rlw-content::-webkit-scrollbar-track{

    background:transparent;

}

#rlw-content::-webkit-scrollbar-thumb{

    background-color:rgba(0,0,0,.15);

    border-radius:10px;

}

#rlw-content{

    scrollbar-width:thin;

    scrollbar-color:rgba(0,0,0,.15) transparent;

}

/* Honeypot field - visually hidden but still present in
   the DOM and reachable by form-autofill bots, unlike
   display:none which some bots specifically skip. */
.rlw-hp{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;

}

/* Visible keyboard-focus ring for interactive elements,
   since #rlw-bubble is a real <button> now (was a plain
   div before) and browser defaults were being overridden
   in a couple of places. */
#rlw-widget button:focus-visible{

    outline:3px solid #DD9933;

    outline-offset:2px;

}

#rlw-content h2{

    margin:0 0 14px;

    font-size:24px;

    color:#222;

    font-family:Poppins,sans-serif;

}

#rlw-content p{

    color:#666;

    line-height:1.6;

    margin-bottom:24px;

    font-family:Poppins,sans-serif;

}

/* ===========================
   Primary Button
=========================== */

#rlw-primary-btn{

    width:100%;

    padding:15px;

    background:#DD9933;

    color:#ffffff;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:500;

    font-family:Poppins,sans-serif;

    transition:.3s;

}


#rlw-primary-btn:hover{

    background:#c88421;

}

.rlw-mobile-hero{

    display:none;

}

/* Gold Accent */

.rlw-header{

    border-top:4px solid #DD9933;

}


@media (max-width:768px){

    #rlw-drawer{

        width:100%;

        height: auto;

        right:0;

        bottom:0;

        border-radius:0;

        transition:
        transform .35s ease,
        opacity .3s ease;

    }

}

/* ===================================
   Screen Switching
   (all screens are rendered once in the
   DOM; only one is shown at a time - no
   AJAX round-trip needed to navigate)
=================================== */

.rlw-screen{

    display:none;

}

.rlw-screen.active{

    display:block;

    animation: rlwScreenFade .25s ease;

}

@keyframes rlwScreenFade{

    from{ opacity:0; }
    to{ opacity:1; }

}

/* ===================================
   Drawer Sizes
=================================== */

#rlw-drawer.rlw-size-welcome{

    width:380px;
    height:430px;

}

#rlw-drawer.rlw-size-projects{

    width:420px;
    height:600px;

}

#rlw-drawer.rlw-size-project{

    width:420px;

    height:780px;

}

#rlw-drawer.rlw-size-form{

    width:400px;
    height:620px;

}

#rlw-drawer.rlw-size-success{

    width:380px;
    height:420px;

}

/* =====================================
   WELCOME SCREEN
===================================== */

.rlw-welcome{

    padding:42px 30px 40px;

}

.rlw-title{

    margin:0;

    font-size:28px;

    line-height:1.2;

    font-weight:600;

    color:#222;

    font-family:Poppins,sans-serif;

}

.rlw-description{

    margin:20px 0 40px;

    font-size:16px;

    line-height:1.8;

    color:#666;

    font-family:Poppins,sans-serif;

}

#rlw-primary-btn{

    height:56px;

    border-radius:14px;

    font-size:16px;

    font-weight:600;

}

/* =====================================
   PREMIUM SLIDER ENGINE
===================================== */

.rlw-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:18px 0 8px;

    box-sizing:border-box;

    user-select:none;

    cursor:grab;

}

.rlw-slider.dragging{

    cursor:grabbing;

}

.rlw-slider-track{

    display:flex;

    width:100%;

    will-change:transform;

    transition:transform .45s cubic-bezier(.22,.61,.36,1);

}

.rlw-project-card{

    flex:0 0 100%;

    min-width:100%;

    box-sizing:border-box;

    padding:0;

}

.rlw-project-card-inner{

    margin:0 16px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

}

.rlw-project-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}

.rlw-card-body{

    padding:22px;

}

.rlw-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:11px;

    font-weight:600;

    letter-spacing:.4px;

    margin-bottom:16px;

}

.rlw-status.ongoing{

    background:#EDF8EF;

    color:#2E8B57;

}

.rlw-status.upcoming{

    background:#FFF4E4;

    color:#DD9933;

}

.rlw-card-body h3{

    margin:0 0 10px;

    font-size:24px;

    font-weight:600;

    color:#222;

}

.rlw-card-body p{

    margin:0 0 10px;

    color:#666;

    font-size:15px;

}

.rlw-card-body small{

    color:#888;

    font-size:14px;

}

/* =====================================
   PAGINATION
===================================== */

.rlw-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin:16px 0 12px;

}

.rlw-pagination span{

    width:8px;

    height:8px;

    border-radius:999px;

    background:#d7d7d7;

    transition:all .35s ease;

    cursor:pointer;

}

.rlw-pagination span.active{

    width:34px;

    background:#DD9933;

}

/* =====================================
   Project Details Screen
===================================== */

.rlw-project-details{

    animation:fadeUp .35s ease;

}

.rlw-project-hero{

    width:100%;

    height:190px;

    object-fit:cover;

    display:block;

}

.rlw-project-content{

    padding:22px;

}

.rlw-project-content h2{

    margin:16px 0 10px;

    font-size:28px;

    font-weight:600;

}

.rlw-location svg{

    width:16px;

    height:16px;

    min-width:16px;

    min-height:16px;

    flex-shrink:0;

    color:#777;

}

.rlw-config{

    color:#999;

    margin-bottom:28px;

}

.rlw-action-buttons{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.rlw-action-btn{

    height:52px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.rlw-action-btn.primary{

    background:#DD9933;

    color:#fff;

}

.rlw-action-btn.primary:hover{

    background:#c8892d;

}

.rlw-action-btn.secondary{

    background:#FFFFFF;

    border:1px solid #D9D9D9;

    color:#222;

    font-weight:600;

}

.rlw-action-btn.secondary:hover{

    background:#F7F7F7;

    border-color:#DD9933;

    color:#DD9933;

}

.rlw-action-btn.whatsapp{

    background:#25D366;

    color:#fff;

    box-shadow:0 8px 18px rgba(37,211,102,.22);

}

.rlw-action-btn.whatsapp:hover{

    background:#20C55A;

    box-shadow:0 14px 28px rgba(37,211,102,.30);

    transform:translateY(-1px);

}

.rlw-action-btn.whatsapp:active{

    transform:translateY(0);

    box-shadow:0 6px 12px rgba(37,211,102,.20);

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================================
   Lead Form
===================================== */

.rlw-lead-form{

    padding:24px;

}

.rlw-lead-form h2{

    margin:0;

    font-size:28px;

    font-weight:600;

    color:#222;

}

.rlw-lead-form p{

    margin:10px 0 28px;

    color:#666;

    line-height:1.6;

}

#rlw-lead-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.rlw-input-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.rlw-input-group label{

    font-size:14px;

    font-weight:500;

    color:#444;

}

.rlw-input-group input{

    width:100%;

    height:52px;

    border:1px solid #E4E4E4;

    border-radius:14px;

    padding:0 16px;

    font-size:15px;

    font-family:Poppins,sans-serif;

    transition:.25s ease;

    box-sizing:border-box;

}

.rlw-input-group input:focus{

    outline:none;

    border-color:#DD9933;

    box-shadow:0 0 0 3px rgba(221,153,51,.12);

}

#rlw-submit-btn{

    margin-top:10px;

}

/* ==========================================
   Success Screen
========================================== */

.rlw-success-screen{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    height:100%;

    padding:40px 25px;

    animation:rlwSuccessFade .35s ease forwards;
}

.rlw-success-icon{

    margin-bottom:20px;
}

.rlw-success-screen h2{

    font-size:28px;

    margin-bottom:10px;

    color:#111;
}

.rlw-success-message{

    font-size:16px;

    color:#444;

    margin-bottom:8px;
}

.rlw-success-subtitle{

    color:#777;

    margin-bottom:25px;
}

.rlw-success-screen small{

    color:#999;
}

@keyframes rlwFade{

    from{

        opacity:0;
        transform:translateY(15px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes rlwSuccessFade{

    from{

        opacity:0;
        transform:translateY(-45px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ==========================================
   MOBILE APP MODE
========================================== */

@media (max-width:768px){

    #rlw-widget{

        right:16px;
        bottom:16px;

    }

    #rlw-drawer{

        top:0;
        left:0;
        right:0;
        bottom:0;

        width:100%;
        height:100%;

        border-radius:0;

        max-height:none;

    }

    #rlw-drawer.rlw-size-welcome,
    #rlw-drawer.rlw-size-projects,
    #rlw-drawer.rlw-size-project,
    #rlw-drawer.rlw-size-form,
    #rlw-drawer.rlw-size-success{

        width:100%;
        height:100%;

    }

}

/* ==========================================
   Mobile Content Layout
========================================== */

@media (max-width:768px){

    #rlw-content{

        min-height:100%;

    }

    .rlw-welcome,
    .rlw-project-details,
    .rlw-lead-form,
    .rlw-success-screen{

        min-height:100%;

        box-sizing:border-box;

    }

}

/* ==========================================
   MOBILE — WELCOME SCREEN
========================================== */

@media (max-width:768px){

    .rlw-mobile-hero{

    display:block;

    width:88%;

    max-width:320px;

    height:auto;

    margin:20px auto 30px;

    }

    .rlw-welcome{

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        min-height:100%;

        padding:24px;

        box-sizing:border-box;

    }

    .rlw-title{

        max-width:290px;

    }

    .rlw-description{

        max-width:320px;

        margin:16px 0 30px;

    }

    #rlw-primary-btn{

    width:100%;

    margin-top:10px;

    }

}

/* ==========================================
   MOBILE — PROJECTS SCREEN
========================================== */

@media (max-width:768px){

    .rlw-slider{

        display:flex;

        flex-direction:column;

        justify-content:center;

        min-height:calc(100vh - 170px);

        padding:0;

    }

}