.top-left{position:absolute;top:8px;left:12px}.label-flashsale{color:white;background-color:red;padding:3px;border-radius:3px}.border-branch{border:1.5px solid #11356f}.card-branch:hover{border:1.5px solid #11356f}.p-angka{font-weight:600;font-size:18px}.temp-active{color:#11356f !important}.t-red-metode,.t-red-metode>label{color:red !important}.t-red-kirim,.t-red-kirim>label{color:red !important}.t-red-eks,.t-red-eks>label{color:red !important}.t-red,.t-red>label{color:red !important}.instan{background-color:green;color:white;border-radius:3px;padding:2px 5px 1px}.instan_img{width:15px;height:15px}.button-pilih{margin-right:8px;width:auto;color:#11356f;background:white;padding:6px 12px;border-radius:10px;border:1px solid #11356f !important;margin-bottom:10px}.button-lala{margin-right:8px;font-weight:500;width:155px;color:#11356f;background:#11356f0d;padding:10px 50px;border-radius:10px;margin-bottom:10px}.button-layanan{font-weight:500;width:250px;color:#11356f;background:#11356f0d;padding:10px 10px;border-radius:10px;margin-bottom:10px;text-align:center}.button-addSpecial{font-weight:500;width:250px;color:#11356f;background:#11356f0d;padding:10px 10px;border-radius:10px;margin-bottom:10px;text-align:center}.swiper{width:100%;height:100%;margin-left:auto;margin-right:auto}.swiper-slide{text-align:center;font-size:18px;height:fit-content !important;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:flex-start;-ms-flex-align:flex-start;-webkit-align-items:flex-start;align-items:flex-start}.sendiri{width:70px !important}.swiper-wrapper{padding:5px !important;height:fit-content !important}.title-barang{height:80px;text-align:left;line-height:20px}label.error{s padding-top:1px !important;padding-bottom:0px !important;position:relative;font-size:14px !important;text-align:left;margin-left:-10px !important}.loading{padding-top:20px;text-align:center}.banner{border-top-right-radius:10px !important;border-top-left-radius:10px !important}.close-modals{float:right;margin-top:-30px;margin-right:-20px;cursor:pointer;display:inline-block;line-height:0px;padding:11px 3px;width:40px}.modal .modal-dialog .modal-content.product{margin:0 auto}.card-white{background-color:white}.banner{width:100% !important}.font-title{font-size:12px !important}.label-container{position:fixed;bottom:100px;right:105px;display:table;visibility:hidden}.card-produk{--bs-gutter-x:0rem !important}a{text-decoration:none !important}.label-text{color:#FFF;background:rgba(51,51,51,0.5);display:table-cell;vertical-align:middle;padding:10px;border-radius:3px;margin-bottom:100px !important}.label-arrow{display:table-cell;vertical-align:middle;color:#333;opacity:0.5}.float{position:fixed;width:130px;height:50px;bottom:90px;right:40px;line-height:50px !important;background-color:#1BD741 !important;color:#FFF;border-radius:60px;text-align:center;box-shadow:2px 2px 3px #999;z-index:100}.float:hover{color:white !important}.card-body{flex:1 1 auto;padding:0.5rem 0.5rem;color:#ffffff}.close-img{left:265px;position:absolute;top:5px;z-index:2;color:#fff}.fixed-col{position:fixed;width:23%}@media only screen and(max-width:600px){.fixed-col{position:relative;width:100%}.populer{display:none}}.img-produk{width:100%;aspect-ratio:1/1;object-fit:cover}@media screen and(max-width:600px){.font-harga{font-size:12px !important}.close-img{left:310px}.footer-img{display:flex !important}.img-qris{width:90% !important}}.img-qris{width:30%}@media screen and(min-width:1500px){.img-produk{aspect-ratio:1/1}}.card-produk{margin-top:0px}.my-float{font-size:16px}.data-float:hover{color:white !important}a.float+div.label-container{visibility:hidden;opacity:0;transition:visibility 0s,opacity 0.5s ease}a.float:hover+div.label-container{visibility:visible;opacity:1}input[type="radio"]:checked+label{background:#11356f!important;color:white !important}input[type="checkbox"]:checked+label{background:#11356f;color:white}#all:checked+label{background-color:transparent !important;color:black}.main-cont65ainer{margin-bottom:50px}.flash-alert{font-size:12px;background-color:red;color:white;width:60px;text-align:center;border-radius:5px;margin-left:10px;margin-top:5px}.btn-outline-primary:hover{color:#000;background-color:white;border-color:#7297f8;color:white}#qr-reader__header_message{font-size:14px !important;padding:2px 10px !important;margin-top:4px !important;border-top:1px solid rgb(246,246,246)!important;background:rgba(203,36,49,0.14)!important;color:rgb(203,36,49)!important}@media(min-width:992px){header.header .logo-small{margin-left:calc((100vw - 960px)/ 2+52px)}}@media(min-width:1200px){header.header .logo-small{margin-left:calc((100vw - 1140px)/ 2+52px)}}@media(min-width:1400px){header.header .logo-small{margin-left:calc((100vw - 1320px)/ 2+52px)}}@media(min-width:992px){header.header .profile-poto{margin-right:calc((100vw - 960px)/ 2+50px)}}@media(min-width:1200px){header.header .profile-poto{margin-right:calc((100vw - 1140px)/ 2+50px)}}@media(min-width:1400px){header.header .profile-poto{margin-right:calc((100vw - 1320px)/ 2+50px)}}.variant-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;margin-bottom:4px}.variant-badge{display:inline-block;background-color:#e8f0fe;color:#11356f;font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px;line-height:1.4}.cashback-badge-container{margin-top:4px;margin-bottom:4px}.cashback-badge{display:inline-flex;align-items:center;gap:4px;background-color:#e8f5e9;color:#27ae60;font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px;line-height:1.4}.cashback-badge i{font-size:12px;color:#f5a623}.main-container{padding-top:80px}

/* ============================================
   iOS Safe Area & Responsive Fixes
   Updated: 28 Jan 2026
   ============================================ */

/* iOS Safe Area Support for Footer */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
    main {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}

/* Header responsive fix for small screens */
@media screen and (max-width: 430px) {
    /* Header layout fixes */
    header.header {
        padding: 0 15px !important;
    }
    header.header .row {
        min-height: 60px;
    }
    header.header .logo-small {
        min-width: 80px;
    }
    header.header .logo-small img {
        width: 80px !important;
    }
    /* Member badge smaller on mobile */
    .member {
        font-size: 0.75rem !important;
        padding: 2px 6px 2px 8px !important;
        white-space: nowrap;
    }
    /* Profile image wrapper */
    .profile-img-wrapper {
        width: 32px !important;
        height: 32px !important;
    }
    .profile-img {
        width: 30px !important;
        height: 30px !important;
    }
    /* Profile section layout */
    .profile-poto {
        gap: 6px !important;
    }
    .profile-poto a {
        gap: 6px !important;
    }
}

/* Extra small screens (iPhone SE, etc) */
@media screen and (max-width: 375px) {
    header.header {
        padding: 0 10px !important;
    }
    header.header .logo-small img {
        width: 70px !important;
    }
    .member {
        font-size: 0.7rem !important;
        padding: 2px 4px 2px 6px !important;
    }
    .profile-img-wrapper {
        width: 28px !important;
        height: 28px !important;
    }
    .profile-img {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Responsive fix for bottom navigation on small screens */
@media screen and (max-width: 430px) {
    .footer {
        margin-bottom: 0 !important;
    }
    .footer .nav {
        max-width: 100%;
        padding: 0 8px;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
    .footer .nav .nav-item {
        height: 60px;
        flex: 1;
        min-width: 0;
        max-width: 20%;
    }
    .footer .nav .nav-item .nav-link {
        padding: 8px 2px 4px;
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .footer .nav .nav-item .nav-link span {
        font-size: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }
    .footer .nav .nav-item .nav-link span .nav-icon {
        font-size: 20px;
        height: 22px;
        line-height: 22px;
        width: 22px;
        margin-bottom: 2px;
    }
    /* Center scan button - elevated */
    .footer .nav .nav-item.center-item {
        max-width: 80px;
        position: relative;
    }
    .footer .nav .nav-item.center-item .nav-link {
        padding: 0;
        position: relative;
        top: -5px;
    }
    .footer .nav .nav-item.center-item .nav-link > span {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .footer .nav .nav-item.center-item .nav-link > span > span:first-child {
        width: 57px !important;
        height: 57px !important;
        border-radius: 50% !important;
        background-color: #11356f !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        border: 3px solid #fff !important;
    }
    .footer .nav .nav-item.center-item .nav-link > span .nav-icon,
    .footer .nav .nav-item.center-item .nav-link > span i.fa-qrcode {
        font-size: 26px !important;
        color: #fff !important;
        line-height: 1 !important;
    }
    .footer .nav .nav-item.center-item .nav-link > span .nav-text {
        display: block !important;
        font-size: 11px !important;
        color: #11356f !important;
        margin-top: 4px !important;
        font-weight: 600;
    }
    .footer .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Fix product swiper cards cut off at bottom on mobile */
@media screen and (max-width: 430px) {
    .terbaruswiper .swiper-wrapper,
    .terlarisswiper .swiper-wrapper,
    .diskonswiper .swiper-wrapper,
    .flashsalesswiper .swiper-wrapper {
        height: auto !important;
        min-height: 320px !important;
    }
    .swiper-slide .card.product {
        height: auto !important;
    }
    /* Fix rating & sold text to stay on one line */
    .swiper-slide .card.product .card-produk .text-opac,
    .swiper-slide .card.product .card-produk .text-opac span {
        white-space: nowrap !important;
        font-size: 9px !important;
    }
    /* Ensure + button stays on right side */
    .swiper-slide .card.product .card-produk {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        position: relative !important;
    }
    .swiper-slide .card.product .card-produk > .col {
        flex: 1 !important;
        width: auto !important;
    }
    .swiper-slide .card.product .card-produk > .col-auto {
        position: absolute !important;
        right: -10px !important;
        bottom: 0 !important;
    }
}

/* Extra small screens footer */
@media screen and (max-width: 375px) {
    .footer .nav {
        padding: 0 4px;
    }
    .footer .nav .nav-item {
        height: 56px;
    }
    .footer .nav .nav-item .nav-link span {
        font-size: 9px !important;
    }
    .footer .nav .nav-item .nav-link span .nav-icon {
        font-size: 18px;
        height: 20px;
        line-height: 20px;
        width: 20px;
    }
    .footer .nav .nav-item.center-item .nav-link {
        top: -3px;
    }
    .footer .nav .nav-item.center-item .nav-link > span > span:first-child {
        width: 52px !important;
        height: 52px !important;
        border: 2px solid #fff !important;
    }
    .footer .nav .nav-item.center-item .nav-link > span i.fa-qrcode {
        font-size: 24px !important;
    }
    .footer .nav .nav-item.center-item .nav-link > span .nav-text {
        font-size: 10px !important;
        margin-top: 3px !important;
    }
}