/*====================================================
    GLOBAL ORDER PAGE
=====================================================*/

*{
    box-sizing:border-box;
}

body{
    overflow-x:hidden;
}


/*====================================================
    MOBILE MENU BUTTON
=====================================================*/

#menu-btn{

    display:none;

    border:none;

    background:transparent;

    color:white;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

    z-index:1001;

}

#menu-btn:hover{

    color:var(--primary);

}


/*====================================================
    COMMON BUTTON
=====================================================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    position:relative;

    overflow:hidden;

    padding:16px 36px;

    border:none;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #fb923c
    );

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 15px 30px rgba(249,115,22,.35);

}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(249,115,22,.45);

}


/*====================================================
    SECTION TITLE
=====================================================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    display:inline-block;

    margin-bottom:15px;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title h2{

    margin-bottom:20px;

    color:var(--secondary);

    font-size:48px;

    line-height:1.15;

}

.section-title p{

    max-width:720px;

    margin:auto;

    color:var(--text);

    font-size:18px;

    line-height:1.7;

}


/*====================================================
    ORDER HERO
=====================================================*/

.order-hero {

    min-height: 100vh;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    align-items: center;

    gap: 70px;

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            rgba(17, 24, 39, .88),
            rgba(17, 24, 39, .88)
        ),

        url("../images/Hero.jpeg");

    background-position: center;

    background-size: cover;

}

.order-hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-100px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(247, 246, 246, 0.25);

    filter:blur(100px);

}

.order-hero::after{

    content:"";

    position:absolute;

    bottom:-200px;

    left:-150px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(251,146,60,.12);

    filter:blur(100px);

}


.hero-content{

    position:relative;

    z-index:2;

}

.tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    margin-bottom:30px;

    border:1px solid rgba(255,255,255,.2);

    border-radius:50px;

    background:rgba(255,255,255,.1);

    backdrop-filter:blur(12px);

    font-weight:600;

}

.tag i{

    color:var(--primary);

}

.hero-content h1{

    margin-bottom:25px;

    font-size:64px;

    line-height:1.1;

    font-weight:800;

}

.hero-content h1 span{

    display:block;

    color:var(--primary);

}

.hero-content p{

    max-width:650px;

    color:#e5e7eb;

    font-size:20px;

    line-height:1.7;

}


/*====================================================
    HERO IMAGE
=====================================================*/

.hero-image{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    display:block;

    width:min(100%,520px);

    max-width:520px;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 35px 45px rgba(0,0,0,.45));

    animation:floatCylinder 4s ease-in-out infinite;

}


/* Floating Animation */

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

    100% {

        transform: translateY(0);

    }

}


/*====================================================
    ANIMATIONS
====================================================*/

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* Scroll Reveal */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}


.reveal.active {

    opacity: 1;

    transform: translateY(0);

}


/*====================================================
    ORDER SECTION
=====================================================*/

.order-section{

    padding:100px 8%;

    background:var(--light);

}

.order-container{

    max-width:1100px;

    margin:auto;

    padding:55px;

    border:1px solid rgba(0,0,0,.04);

    border-radius:28px;

    background:white;

    box-shadow:var(--shadow);

    animation:fadeUp .8s ease;

}


/*====================================================
    FORM SECTIONS
=====================================================*/

.form-section{

    margin-bottom:50px;

    padding-bottom:40px;

    border-bottom:1px solid #eeeeee;

}

.form-section-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.form-section-title > i{

    display:flex;

    justify-content:center;

    align-items:center;

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:15px;

    background:#fff7ed;

    color:var(--primary);

    font-size:22px;

}

.form-section-title h3{

    margin-bottom:5px;

    color:var(--secondary);

    font-size:24px;

}

.form-section-title p{

    margin:0;

    color:var(--text);

    font-size:14px;

}


/*====================================================
    FORM GRID
=====================================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.full-width{

    grid-column:1 / -1;

}


/*====================================================
    INPUT BOX
=====================================================*/

.input-box{

    display:flex;

    flex-direction:column;

}

.input-box label{

    margin-bottom:10px;

    color:var(--secondary);

    font-size:15px;

    font-weight:600;

}

.input-box label span{

    color:#ef4444;

}

.input-box label small{

    color:#9ca3af;

    font-size:12px;

    font-weight:400;

}

.input-box input,

.input-box select,

.input-box textarea{

    width:100%;

    padding:16px 18px;

    border:2px solid var(--border);

    border-radius:14px;

    outline:none;

    background:white;

    color:var(--secondary);

    font-family:inherit;

    font-size:16px;

    transition:.3s;

}

.input-box input:hover,

.input-box select:hover,

.input-box textarea:hover{

    border-color:#fb923c;

}

.input-box input:focus,

.input-box select:focus,

.input-box textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(249,115,22,.14);

}

.input-box input::placeholder,

.input-box textarea::placeholder{

    color:#9ca3af;

}

.input-box textarea{

    min-height:140px;

    resize:vertical;

}


/*====================================================
    TEXTAREA
=====================================================*/

.textarea-box{

    margin:40px 0;

}


/*====================================================
    PAYMENT SECTION
=====================================================*/

.payment-section{

    margin:40px 0;

}

.payment-options{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}

.payment-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:15px;

    min-height:170px;

    padding:30px 20px;

    border:2px solid var(--border);

    border-radius:20px;

    background:white;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:.35s;

}

.payment-card:hover{

    transform:translateY(-7px);

    border-color:var(--primary);

    box-shadow:var(--shadow-hover);

}

.payment-card input{

    position:absolute;

    opacity:0;

}

.payment-card i{

    color:var(--primary);

    font-size:42px;

    transition:.3s;

}

.payment-card span{

    color:var(--secondary);

    font-size:17px;

    font-weight:600;

}

.payment-card:has(input:checked){

    border-color:var(--primary);

    background:#fff7ed;

}

.payment-card input:checked + i{

    transform:scale(1.15);

}


/*====================================================
    ORDER SUMMARY
=====================================================*/

.summary-card{

    margin-top:45px;

    padding:35px;

    border:2px solid #fed7aa;

    border-radius:24px;

    background:

    linear-gradient(
        135deg,
        #ffffff,
        #fff7ed
    );

    box-shadow:var(--shadow);

}

.summary-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.summary-header span{

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}

.summary-header h3{

    margin-top:8px;

    color:var(--secondary);

    font-size:28px;

}

.summary-header > i{

    color:var(--primary);

    font-size:35px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #eeeeee;

}

.summary-item:last-child{

    border-bottom:none;

}

.summary-item span{

    color:var(--text);

    font-size:16px;

}

.summary-item strong{

    color:var(--primary);

    font-size:16px;

    font-weight:700;

    text-align:right;

}


/*====================================================
    SUBMIT AREA
=====================================================*/

.submit-area{

    margin-top:45px;

    text-align:center;

}

.submit-area .btn{

    min-width:330px;

    padding:18px 40px;

    font-size:18px;

}

.submit-area .btn i{

    font-size:24px;

}

.form-note{

    margin-top:15px;

    color:#9ca3af;

    font-size:13px;

}


/*====================================================
    DELIVERY INFORMATION
=====================================================*/

.delivery-info{

    padding:100px 8%;

    background:var(--light);

}

.delivery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.delivery-card{

    padding:40px 25px;

    border-radius:22px;

    background:white;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.delivery-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);

}

.delivery-card i{

    margin-bottom:20px;

    color:var(--primary);

    font-size:48px;

}

.delivery-card h3{

    margin-bottom:15px;

    color:var(--secondary);

    font-size:22px;

}

.delivery-card p{

    color:var(--text);

    line-height:1.7;

}


/*====================================================
    FAQ
=====================================================*/

.faq{

    padding:100px 8%;

    background:white;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:18px;

    overflow:hidden;

    border-radius:18px;

    background:white;

    box-shadow:var(--shadow);

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:25px;

    border:none;

    background:white;

    color:var(--secondary);

    font-family:inherit;

    font-size:17px;

    font-weight:600;

    text-align:left;

    cursor:pointer;

    transition:.3s;

}

.faq-question:hover{

    color:var(--primary);

}

.faq-question i{

    color:var(--primary);

    transition:.3s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    background:#fafafa;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 25px 25px;

    color:var(--text);

    line-height:1.7;

}


/*====================================================
    CTA SECTION
=====================================================*/

.cta-section{

    margin:80px 8%;

    padding:80px 40px;

    border-radius:30px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    text-align:center;

}

.cta-content h2{

    margin-bottom:20px;

    font-size:48px;

}

.cta-content p{

    max-width:700px;

    margin:0 auto 35px;

    font-size:19px;

}

.cta-section .btn{

    background:white;

    color:var(--primary);

}

.cta-section .btn:hover{

    background:#f3f4f6;

}


/*====================================================
    FOOTER
=====================================================*/

footer{

    padding:80px 8% 30px;

    background:#111827;

    color:white;

}

.footer-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}

.footer-box h3{

    margin-bottom:20px;

    color:var(--primary);

    font-size:23px;

}

.footer-box p{

    margin-bottom:15px;

    color:#d1d5db;

    line-height:1.7;

}

.footer-box a{

    display:block;

    margin-bottom:14px;

    color:#d1d5db;

    transition:.3s;

}

.footer-box a:hover{

    padding-left:8px;

    color:var(--primary);

}

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#1f2937;

    color:white;

    font-size:20px;

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-5px);

    background:var(--primary);

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    color:#9ca3af;

    text-align:center;

}


/*====================================================
    FLOATING WHATSAPP
=====================================================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

    display:flex;

    justify-content:center;

    align-items:center;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:white;

    font-size:34px;

    box-shadow:0 15px 35px rgba(37,211,102,.35);

    animation:pulse 2s infinite;

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.1);

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.7);

    }

    70%{

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

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}


/*====================================================
    BACK TO TOP
=====================================================*/

#topBtn{

    position:fixed;

    right:25px;

    bottom:105px;

    z-index:998;

    display:none;

    justify-content:center;

    align-items:center;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:20px;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:.3s;

}

#topBtn:hover{

    transform:translateY(-5px);

    background:var(--primary-dark);

}


/*====================================================
    SCROLL REVEAL
=====================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:.8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/*====================================================
    FORM ANIMATION
=====================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================================
    RIPPLE EFFECT
=====================================================*/

.ripple{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.4);

    transform:scale(0);

    pointer-events:none;

    animation:ripple .6s linear;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}


/*====================================================
    TABLET
=====================================================*/

@media(max-width:1100px){

    .delivery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-container{

        grid-template-columns:repeat(2,1fr);

    }

}


/*====================================================
    TABLET / SMALL LAPTOP
=====================================================*/

@media(max-width:991px){

    .order-hero{

        grid-template-columns:1fr;

        min-height:auto;

        padding-top:150px;

        text-align:center;

    }

    .hero-content p{

        margin:auto;

    }

    .hero-image{

        margin-top:20px;

    }

    .hero-image img{

        width:min(100%,450px);

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .full-width{

        grid-column:auto;

    }

}


/*====================================================
    MOBILE
=====================================================*/

@media(max-width:768px){

    #menu-btn{

        display:block;

    }

    #navbar{

        position:fixed;

        top:0;

        right:-100%;

        z-index:1000;

        display:flex;

        justify-content:center;

        align-items:center;

        width:280px;

        height:100vh;

        background:#1f2937;

        transition:.35s ease;

    }

    #navbar.active{

        right:0;

    }

    #navbar ul{

        flex-direction:column;

        gap:30px;

    }

    .nav-btn{

        display:none;

    }

    .order-hero{

        padding:130px 6% 80px;

    }

    .hero-content h1{

        font-size:44px;

    }

    .hero-content p{

        font-size:17px;

    }

    .section-title h2{

        font-size:38px;

    }

    .order-section,

    .delivery-info,

    .faq{

        padding:75px 5%;

    }

    .order-container{

        padding:30px 22px;

        border-radius:20px;

    }

    .summary-card{

        padding:25px;

    }

    .summary-item{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .summary-item strong{

        text-align:left;

    }

    .submit-area .btn{

        width:100%;

        min-width:0;

    }

    .delivery-grid{

        grid-template-columns:1fr;

    }

    .cta-section{

        margin:60px 5%;

        padding:60px 25px;

    }

    .cta-content h2{

        font-size:35px;

    }

    .cta-content p{

        font-size:17px;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .social-icons{

        justify-content:center;

    }

}


/*====================================================
    SMALL MOBILE
=====================================================*/

@media(max-width:480px){

    .hero-content h1{

        font-size:35px;

    }

    .hero-image img{

        width:300px;

    }

    .tag{

        padding:10px 17px;

        font-size:13px;

    }

    .section-title h2{

        font-size:32px;

    }

    .section-title p{

        font-size:16px;

    }

    .form-section-title h3{

        font-size:20px;

    }

    .form-section-title p{

        font-size:13px;

    }

    .summary-header h3{

        font-size:23px;

    }

    .summary-header > i{

        font-size:27px;

    }

    .whatsapp{

        right:18px;

        bottom:18px;

        width:58px;

        height:58px;

        font-size:30px;

    }

    #topBtn{

        right:18px;

        bottom:90px;

        width:50px;

        height:50px;

    }

}
/*====================================================
    SHARED MOBILE NAVIGATION - MATCH HOME PAGE
=====================================================*/
@media (max-width: 992px){
    #menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:50px;
        height:50px;
        border:none;
        border-radius:12px;
        background:rgba(255,255,255,.08);
        color:#fff;
        font-size:28px;
        cursor:pointer;
        transition:.35s ease;
        z-index:1200;
    }

    #navbar{
        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:85%;
        height:100vh;
        padding:110px 35px 40px;
        background:rgba(17,24,39,.98);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        transition:.4s ease;
        z-index:1100;
        overflow-y:auto;
        display:block;
    }

    #navbar.active{ right:0; }

    #navbar ul{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:0;
        margin:0;
        list-style:none;
    }

    #navbar ul li{ width:100%; }

    #navbar ul li a{
        display:flex;
        align-items:center;
        width:100%;
        padding:16px 20px;
        border-radius:14px;
        color:#fff;
        font-size:17px;
        font-weight:600;
        transition:.35s ease;
        text-decoration:none;
    }

    #navbar ul li a::after{ display:none; }

    #navbar ul li a:hover,
    #navbar ul li a.active{
        background:rgba(249,115,22,.12);
        color:var(--primary);
    }

    .nav-btn{ display:none; }
}

@media (max-width:576px){
    #navbar{ width:100%; max-width:100%; }
}


/* FAQ accordion fallback: active questions always reveal their answers. */
.faq-item.active .faq-answer{
    max-height:500px;
}

.faq-item.active .faq-question i{
    transform:rotate(45deg);
}

/*====================================================
    SMART CYLINDER / REFILL ORDER FLOW
=====================================================*/
[hidden]{display:none !important;}

#orderTypeBox{min-width:0;}

.order-notice{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:24px;
    padding:18px 20px;
    border-radius:16px;
    border:1px solid rgba(249,115,22,.25);
    background:#fff7ed;
    color:#374151;
}
.order-notice > i{font-size:22px;color:var(--primary);margin-top:2px;flex-shrink:0;}
.order-notice div{display:flex;flex-direction:column;gap:4px;}
.order-notice strong{color:var(--secondary);font-size:16px;}
.order-notice span{font-size:14px;line-height:1.6;color:var(--text);}
.order-notice.in-store{background:#fff7ed;border-color:rgba(249,115,22,.35);}
.order-notice.delivery{background:#f0fdf4;border-color:rgba(34,197,94,.3);}
.order-notice.delivery > i{color:#16a34a;}
.order-notice.info{background:#eff6ff;border-color:rgba(59,130,246,.25);}
.order-notice.info > i{color:#2563eb;}

#fulfilmentSection [hidden]{display:none !important;}

@media(max-width:768px){
    .order-notice{padding:16px;}
    .order-notice span{font-size:13px;}
}


/* Dynamic order pricing */
.payment-total{margin:0 0 22px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(249,115,22,.25);border-radius:16px;background:rgba(249,115,22,.07);}
.payment-total span{color:var(--secondary);font-weight:600;}
.payment-total strong{color:var(--primary);font-size:28px;font-weight:800;}
.summary-total{margin-top:10px;padding-top:18px;border-top:1px solid var(--border);}
.summary-total strong{color:var(--primary);font-size:22px;}
@media(max-width:576px){.payment-total{align-items:flex-start;flex-direction:column;gap:6px;}}