/* =========================================
   WANMARY - ROUNDED BABY BLUE THEME
   Versi lebih berwarna dan membulat
========================================= */

:root {
    --background: #D8EDFF;
    --blue-light: #B9DFFF;
    --blue-medium: #86C5F4;
    --blue-dark: #376F9E;
    --blue-text: #28577F;
    --border: #9AC9EC;

    --radius-sm: 16px;
    --radius-md: 25px;
    --radius-lg: 36px;

    --shadow: 0 8px 25px rgba(45, 105, 155, .12);
    --shadow-hover: 0 16px 35px rgba(45, 105, 155, .20);
}

/* BACKGROUND */

body {
    background: linear-gradient(
        135deg,
        #D8EDFF 0%,
        #C6E5FF 50%,
        #D5EBFF 100%
    );
    color: var(--blue-text);
    min-height: 100vh;
}

/* NAVBAR */

.navbar {
    background: #A9D6F8 !important;
    border-bottom: 1px solid #91C6ED;
    box-shadow: 0 5px 20px rgba(55,111,158,.12);
    padding: 19px 0;
}

.navbar-brand {
    color: #28577F !important;
    font-weight: 800;
    letter-spacing: 2px;
}

.nav-link {
    color: #28577F !important;
    border-radius: 50px;
    padding: 10px 17px !important;
}

.nav-link:hover {
    background: #D8EDFF;
    color: #173F62 !important;
}

/* BUTTONS */

.btn {
    border-radius: 50px !important;
    padding: 12px 23px;
    font-weight: 600;
    transition: all .25s ease;
}

.btn-primary {
    background: #376F9E;
    border-color: #376F9E;
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #28577F;
    border-color: #28577F;
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(40,87,127,.25);
}

.btn-light {
    background: #D8EDFF;
    border-color: #D8EDFF;
    color: #28577F;
}

.btn-light:hover {
    background: #B9DFFF;
    border-color: #B9DFFF;
    color: #173F62;
}

.btn-outline-light {
    background: #C4E3FA;
    border-color: #86B9DF;
    color: #28577F;
}

.btn-outline-light:hover {
    background: #86C5F4;
    border-color: #86C5F4;
    color: #173F62;
}

/* SEARCH INPUT */

.form-control,
.form-select {
    background: #E7F4FF;
    border: 1px solid #9AC9EC;
    border-radius: 50px !important;
    padding: 12px 18px;
    color: #28577F;
}

.form-control:focus,
.form-select:focus {
    background: #F0F8FF;
    border-color: #5CA8DE;
    box-shadow: 0 0 0 4px rgba(134,197,244,.35);
}

/* HERO BANNER */

.hero {
    background: linear-gradient(
        120deg,
        #86C5F4 0%,
        #A8D6F8 55%,
        #B9DFFF 100%
    );
    border-radius: 38px !important;
    padding: 105px 25px;
    box-shadow: var(--shadow);
    border: 1px solid #9AC9EC;
}

.hero h1 {
    color: #173F62;
}

.hero p {
    color: #345F82;
}

.hero .btn {
    background: #376F9E;
    border-color: #376F9E;
    color: white;
    border-radius: 50px;
    padding: 14px 32px;
}

.hero .btn:hover {
    background: #28577F;
    color: white;
}

/* SECTION TITLE */

.section-title {
    color: #28577F;
    font-weight: 800;
}

/* CATEGORY CARDS */

.category-card {
    background: #A8D6F8;
    border: 1px solid #8FC2E9;
    border-radius: 28px !important;
    padding: 30px 15px;
    box-shadow: var(--shadow);
    transition: all .3s ease;
}

.category-card i {
    color: #376F9E;
}

.category-card h6 {
    color: #28577F;
    font-weight: 700;
}

.category-card:hover {
    background: #86C5F4;
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

/* CATEGORY COLOR VARIATIONS */

#kategori .col-6:nth-child(3n+1) .category-card {
    background: #A8D6F8;
}

#kategori .col-6:nth-child(3n+2) .category-card {
    background: #B9DFFF;
}

#kategori .col-6:nth-child(3n+3) .category-card {
    background: #98C9EE;
}

/* PRODUCT CARDS */

.product-card {
    background: #B9DFFF;
    border: 1px solid #9AC9EC;
    border-radius: 28px !important;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all .3s ease;
}

.product-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-hover);
}

.product-image {
    background: linear-gradient(
        145deg,
        #A8D6F8,
        #D5EBFF
    );
    height: 255px;
    color: #5B9CCB;
}

.product-card:nth-child(3n+2) .product-image {
    background: linear-gradient(
        145deg,
        #9FCFF3,
        #C7E5FC
    );
}

.product-card:nth-child(3n+3) .product-image {
    background: linear-gradient(
        145deg,
        #B4DCFA,
        #86C5F4
    );
}

.product-info {
    padding: 22px;
}

.product-info small {
    color: #527FA8 !important;
}

.product-name {
    color: #28577F;
    font-weight: 700;
}

.product-price {
    color: #28577F;
    font-size: 20px;
    font-weight: 800;
}

.product-info .btn {
    border-radius: 50px !important;
}

/* FILTER CARD */

.bg-white.rounded-3 {
    background: #B9DFFF !important;
    border: 1px solid #9AC9EC;
    border-radius: 28px !important;
    box-shadow: var(--shadow);
}

/* KEYWORD BADGES */

.badge {
    border-radius: 50px !important;
    padding: 9px 14px;
}

.badge.bg-light {
    background: #D8EDFF !important;
    border: 1px solid #9AC9EC !important;
    color: #28577F !important;
}

.badge.bg-light:hover {
    background: #86C5F4 !important;
    color: #173F62 !important;
}

/* LINKS */

a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: #28577F;
}

a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #173F62;
}

/* FOOTER */

footer {
    background: linear-gradient(
        120deg,
        #86C5F4,
        #B9DFFF
    );
    border-top: 1px solid #91C6ED;
    color: #28577F;
    padding: 55px 0;
}

footer h4 {
    color: #173F62;
}

footer p {
    color: #345F82;
}

footer small {
    color: #527FA8;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .hero {
        border-radius: 26px !important;
        padding: 65px 20px;
    }

    .category-card {
        border-radius: 22px !important;
        padding: 22px 10px;
    }

    .product-card {
        border-radius: 22px !important;
    }

    .product-image {
        height: 185px;
    }

    .product-info {
        padding: 14px;
    }

    .btn {
        padding: 10px 15px;
    }
}



/* WANMARY ADMIN - ROUNDED BABY BLUE */

.admin-panel {
    background: #B9DFFF;
    border: 1px solid #9AC9EC;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(45, 105, 155, .12);
}

.admin-panel h2,
.admin-panel h5,
.admin-panel i {
    color: #28577F;
}

.admin-menu {
    display: block;
    height: 100%;
    padding: 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #A8D6F8, #B9DFFF);
    border: 1px solid #91C6ED;
    color: #28577F !important;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(45, 105, 155, .12);
    transition: transform .25s, box-shadow .25s;
}

.admin-menu:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(45, 105, 155, .20);
}

.admin-menu h5 {
    font-weight: 700;
}

.admin-menu p {
    color: #345F82;
}

.admin-panel .btn-danger {
    background: #C85F73;
    border-color: #C85F73;
    color: white;
}

.admin-panel .btn-danger:hover {
    background: #AD485D;
    border-color: #AD485D;
}


/* LOGIN & DASHBOARD ADMIN WANMARY */

.admin-panel {
    background: #B9DFFF;
    border: 1px solid #9AC9EC;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(45, 105, 155, .12);
}

.admin-panel h2,
.admin-panel h5,
.admin-panel i {
    color: #28577F;
}

.admin-panel .form-control {
    background: #F0F8FF;
    border: 1px solid #91C6ED;
    border-radius: 18px;
    padding: 13px 18px;
}

.admin-panel .form-control:focus {
    border-color: #376F9E;
    box-shadow: 0 0 0 4px rgba(55, 111, 158, .15);
}

.admin-panel .btn-primary {
    background: #376F9E;
    border-color: #376F9E;
    border-radius: 50px;
    padding: 13px;
    font-weight: 600;
}

.admin-panel .btn-primary:hover {
    background: #28577F;
    border-color: #28577F;
}

.admin-panel a {
    color: #28577F;
    text-decoration: none;
}

.admin-panel a:hover {
    text-decoration: underline;
}


/* ==========================================
   WANMARY - DASHBOARD ADMIN IMPROVEMENT
   ========================================== */

.admin-management {
    margin-top: 65px !important;
    margin-bottom: 70px;
}

.admin-section-heading {
    margin-bottom: 30px;
}

.admin-section-heading h3 {
    color: #28577F;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.admin-section-heading p {
    color: #547C9E;
    font-size: 15px;
    margin-bottom: 0;
}

/* Kartu menu */
.admin-menu.admin-menu-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    min-height: 250px;
    height: 100%;

    padding: 30px;
    border-radius: 30px;

    background: linear-gradient(
        145deg,
        #A8D6F8 0%,
        #B9DFFF 100%
    );

    border: 1px solid #91C6ED;
    color: #28577F;

    text-decoration: none;

    box-shadow: 0 8px 22px rgba(45, 105, 155, 0.10);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.admin-menu.admin-menu-card:hover {
    transform: translateY(-6px);

    background: linear-gradient(
        145deg,
        #94CAF3 0%,
        #B0D9FA 100%
    );

    box-shadow: 0 16px 32px rgba(45, 105, 155, 0.18);
}

/* Ikon */
.admin-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 24px;

    background: #D8EDFF;
    border-radius: 20px;
}

.admin-menu-icon i {
    font-size: 27px;
    color: #376F9E;
}

/* Teks */
.admin-menu-card h5 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #28577F;
}

.admin-menu-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #456E90;
    margin-bottom: 20px;
}

/* Panah */
.admin-menu-arrow {
    align-self: flex-end;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;
    background: #D8EDFF;
    color: #376F9E;

    transition: transform 0.25s ease;
}

.admin-menu-card:hover .admin-menu-arrow {
    transform: translate(3px, -3px);
}

/* Responsif */
@media (max-width: 767px) {
    .admin-management {
        margin-top: 45px !important;
    }

    .admin-menu.admin-menu-card {
        min-height: 220px;
        padding: 25px;
    }

    .admin-section-heading h3 {
        font-size: 24px;
    }
}


/* FORM TAMBAH PRODUK WANMARY */

.varian-item {
    background: #D8EDFF;
    border: 1px solid #9AC9EC;
    border-radius: 24px;
}

#previewGambar img {
    border: 2px solid #91C6ED;
    box-shadow: 0 6px 15px rgba(45, 105, 155, .12);
}

.admin-panel .form-select,
.admin-panel textarea {
    background-color: #F0F8FF;
    border: 1px solid #91C6ED;
    border-radius: 18px;
    padding: 13px 18px;
}

.admin-panel .form-check-input:checked {
    background-color: #376F9E;
    border-color: #376F9E;
}


/* =========================================
   WANMARY - PERBAIKAN GAMBAR PRODUK
   ========================================= */

/* Kartu produk */
.product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    overflow: hidden !important;
    border-radius: 28px;
    background: #B9DFFF;
}

/* Area gambar hanya di bagian atas */
.product-image {
    position: relative !important;
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    overflow: hidden !important;
    flex-shrink: 0;
    background: #D8EDFF;
}

/* Gambar mengikuti ukuran area */
.product-image img,
.product-card > img {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    max-height: 220px !important;
    object-fit: contain !important;
    object-position: center;
}

/* Bagian informasi produk */
.product-info {
    position: relative !important;
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 22px !important;
    background: #B9DFFF;
    z-index: 1;
}

/* Nama produk */
.product-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Harga produk */
.product-price {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* Tombol tetap di bagian bawah */
.product-info .btn {
    margin-top: auto;
    width: 100%;
    border-radius: 50px;
}

/* Tampilan HP */
@media (max-width: 576px) {
    .product-image {
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
    }

    .product-image img,
    .product-card > img {
        height: 170px !important;
        max-height: 170px !important;
    }

    .product-info {
        padding: 16px !important;
    }

    .product-name {
        font-size: 16px;
    }

    .product-price {
        font-size: 18px;
    }
}


/* ==========================================
   WANMARY - FIX KARTU PRODUK
   ========================================== */

/* Kartu produk */
.product-card {
    display: flex !important;
    flex-direction: column !important;

    height: 100%;
    overflow: hidden !important;

    background: #B9DFFF;
    border: 1px solid #91C6ED;
    border-radius: 28px;

    box-shadow: 0 8px 22px rgba(45, 105, 155, 0.10);
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(45, 105, 155, 0.18);
}

/* Bagian gambar */
.product-card .product-image {
    position: relative !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
    flex: 0 0 210px !important;

    background: #D8EDFF;
}

/* Foto produk */
.product-card .product-image img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
}

/* Ikon jika belum ada foto */
.product-card .product-image > i {
    font-size: 45px;
    color: #6DA5CF;
}

/* Informasi produk */
.product-card .product-info {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    flex: 1;

    padding: 20px !important;
    margin: 0 !important;

    background: #B9DFFF;
    z-index: 1;
}

/* Nama */
.product-card .product-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #28577F;
}

/* Harga */
.product-card .product-price {
    font-size: 20px;
    font-weight: 700;
    color: #28577F;
}

/* Tombol */
.product-card .product-info .btn {
    margin-top: auto !important;
    border-radius: 50px;
    padding: 11px 15px;
}

/* Tampilan HP */
@media (max-width: 576px) {
    .product-card .product-image {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        flex-basis: 160px !important;
    }

    .product-card .product-info {
        padding: 14px !important;
    }

    .product-card .product-name {
        font-size: 15px;
    }

    .product-card .product-price {
        font-size: 17px;
    }

    .product-card .product-info .btn {
        font-size: 13px;
        padding: 10px;
    }
}


/* ==========================================
   WANMARY - MENU AKUN PELANGGAN
   ========================================== */

.wm-account-btn {
    background: #d9eeff;
    color: #285b84;
    border: 1px solid #acd7f5;
    border-radius: 50px;
    padding: 9px 18px;
    font-weight: 600;
    transition: 0.2s ease;
}

.wm-account-btn:hover,
.wm-account-btn:focus {
    background: #b9dfff;
    color: #17486f;
    border-color: #8bc4ee;
}

.wm-account-menu {
    min-width: 245px;
    padding: 10px;
    border: 1px solid #c4e2f8;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(47, 104, 151, 0.12);
}

.wm-account-menu .dropdown-item {
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 500;
}

.wm-account-menu .dropdown-item:hover {
    background: #e9f5ff;
    color: #236a9c;
}

.wm-account-menu .dropdown-item.text-danger:hover {
    background: #fff0f0;
    color: #c83e3e;
}

.wm-profile-card {
    background: #ffffff;
    border: 1px solid #c8e5fa;
    border-radius: 25px;
    box-shadow: 0 12px 30px rgba(60, 130, 180, 0.07);
}

.wm-profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #d9eeff;
    color: #397cb0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin: 0 auto;
}

.wm-profile-card .form-control {
    border-radius: 14px;
    padding: 11px 14px;
}

.wm-profile-card .btn {
    border-radius: 50px;
    padding: 10px 18px;
}