@media screen and (max-width: 1024px) {
    .mobile-header-btn-act {
        display: block;
    }
    .container {
        max-width: calc(100% - 30px);
    }
    .parfurm-ai-header {
        border-bottom: 0.5px solid #CCCCCC;
    }
    .mobile-menu-active {
        background: #FFFFFF !important;
    }
    .mobile-menu-active .header-right svg path {
        stroke: #252839 !important;
    }
    .header-menu {
        display: none;
        position: absolute;
        left: 0;
        width: 100%;
        top: 100%;
        background: #FFFFFF;
        padding: 10px 20px 45px;
        text-align: center;
    }
    .parfurm-ai-header .main-header {
        display: block;
    }
    .mobile-menu-active .main-header li a {
        color: #252839 !important;
    }
    .parfurm-ai-header .main-header li a::before {
        display: none;
    }
    .parfurm-ai-header .main-header li a {
        display: flex;
        justify-content: center;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid;
        border-color: #252839;
    }
    .parfurm-ai-header .main-header li a:hover {
        border-color: #FFD54A;
    }
    .footer-top {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .footer-top-inner {
        flex-direction: column;
        column-gap: 0;
        row-gap: 26px;
    }
    .footer-top-left,
    .footer-top-right {
        width: 100%;
    }
    .parfurm-ai-footer {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .footer-bottom-left,
    .footer-bottom-right {
        width: 100%;
    }
    .footer-botton-inner {
        row-gap: 40px;
        flex-wrap: wrap;
        column-gap: 0;
    }
    .footer-bottom-right-inner {
        flex-wrap: wrap;
        column-gap: 50px;
        row-gap: 50px;
    }
    .footer-bottom-right-item:first-child,
    .footer-bottom-right-item:not(:last-child) {
        width: 25%;
    }
    .footer-bottom-right-item:last-child {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .footer-bottom-right-item:first-child, 
    .footer-bottom-right-item:not(:last-child) {
        width: 100%;
    }
    .footer-bottom-right-inner {
        column-gap: 0;
        row-gap: 40px;
    }
    .footer-copyright {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: unset;
        row-gap: 34px;
        margin-top: 50px;
    }
    .footer-top-left h3 {
        font-size: 50px;
        line-height: 1.2;
    }
    .footer-bottom-left > p {
        font-size: 16px;
        line-height: 1.75;
    }
}

@media screen and (max-width: 767px) {
    .mobile-hide {
        display: none;
    }
    .mobile-btn-wrap {
        display: block;
        margin-top: 30px;
    }
    .mobile-btn-wrap  .header-btn-right {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer-top-right form p:nth-child(2),
    .footer-top-right form p:nth-child(2) label,
    .footer-top-right form p:nth-child(3) {
        width: 100%;
    }
    .footer-top-right form {
        flex-direction: column;
        column-gap: 0;
        row-gap: 10px;
        border: 0;
        padding: 0;
    }
    .footer-top-right form p input[type="email"] {
        width: 100%;
        padding: 22px 30px; 
        border: 1px solid #000000 !important;
        border-radius: 50px !important;
        font-size: 16px;
    }
    .footer-top-right form p input[type="submit"] {
        height: 62px;
        width: 100%;
        font-size: 18px;
    }
    .header-logo img {
        width: 126px;
        object-fit: scale-down;
    }
    #header .header-btn-right {
        padding: 10px 20px;
    }
    #header .header-btn-right:not(.login-btn) {
        font-size: 14px;
    }
    #header .head-myaccnt-btn {
        width: 39px;
        height: 39px;
    }
    #header .header-right {
        column-gap: 10px;
    }
}

@media screen and (max-width: 430px) {
    body {
        background-color: #F0F0F0;
        overflow-x: hidden;
    }

    .custom-nav-myaccount {
        display: none !important;
    }

    nav.woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-navigation,
    .container-nav-myaccount {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        float: none !important;
    }

    .myaccount-menu {
        background: #FFFFFF !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        position: relative !important;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
    }

    ul.woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-navigation ul {
        background: #FFFFFF !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        position: relative !important;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        list-style: none !important;
    }

    .myaccount-menu::-webkit-scrollbar,
    ul.woocommerce-MyAccount-navigation::-webkit-scrollbar {
        display: none !important;
    }

    .myaccount-item {
        position: relative !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .myaccount-item a,
    .woocommerce-MyAccount-navigation ul li a {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 0 22px 0 20px!important;
        border-radius: 0 !important;
        text-decoration: none !important;
        color: #1d1d1f !important;
        font-weight: 500 !important;
        transition: all .2s ease !important;
        border-right: 3px solid transparent !important;
        white-space: nowrap !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
    }

    .myaccount-item .icon-myaccount {
        display: none;
    }

    .myaccount-item .text-myaccount {
        font-size: 16px;
        font-weight: 500;
        font-family: 'Stack Sans Headline';
    }

    .myaccount-item a:hover {
        background: transparent;
        width: auto;
        height: auto;
    }

    .mobile-break {
        display: block !important;
        /* Memaksa baris baru di mobile */
        content: "";
        /* Memastikan ada space */
        margin-top: 0;
    }

    .myaccount-item.is-active a,
    .myaccount-item a[aria-current="page"] {
        background: transparent;
        color: #000000;
        width: auto;
        height: auto;
    }

    /* Remove dividers on mobile */
    .myaccount-item.woocommerce-MyAccount-navigation-link--edit-address,
    .myaccount-item.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0;
        padding-top: 0;
    }

    .myaccount-item.woocommerce-MyAccount-navigation-link--edit-address::before,
    .myaccount-item.woocommerce-MyAccount-navigation-link--customer-logout::before {
        display: none;
    }

    /* ===== MAIN CONTENT CONTAINER ===== */
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 28px 20px 20px 20px;
    }

    .page-header .entry-title,
    .site-footer .footer-inner,
    .site-footer:not(.dynamic-footer),
    .site-header .header-inner,
    .site-header:not(.dynamic-header),
    body:not([class*=elementor-page-]) .site-main {
        max-width: 100%;
        padding: 0 !important;
    }

    /* ===== DASHBOARD CONTAINER ===== */
    .myaccount-account-dashboard-custom {
        display: flex;
        flex-direction: column;
        row-gap: 40px;
        max-width: 100%;
    }

    /* ===== DASHBOARD HEADER ===== */
    .myaccount-dashboard-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .myaccount-dashboard-header h3 {
        font-size: 20px;
        font-weight: 500;
        font-family: 'Stack Sans Headline';
    }

    .myaccount-view-all {
        font-size: 14px;
    }

    /* ===== EXPERIENCE SECTION ===== */
    .myaccount-dashboard-experience h3 {
        font-size: 24px;
        font-weight: 500;
        font-family: 'Stack Sans Headline';
    }

    .myaccount-experience-row {
        display: flex;
        column-gap: 15px;
        margin-top: 20px;
    }

    /* Timeline */
    .myaccount-timeline {
        position: relative;
        width: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .myaccount-timeline .myaccount-dot {
        width: 12px;
        height: 12px;
        background: #D9D9D9;
        border-radius: 50%;
        z-index: 2;
    }

    .myaccount-timeline .myaccount-line {
        width: 2px;
        height: 100%;
        background: #D9D9D9;
        margin-top: 4px;
    }

    /* Experience Content */
    .myaccount-experience-content {
        flex: 1;
    }

    .myaccount-experience-content .myaccount-date {
        display: block;
        font-size: 18px;
        color: #000000;
        margin-bottom: 15px;
        font-weight: 400;
        font-family: 'Stack Sans Headline';
        margin-top: -8px;
    }

    .myaccount-experience-card {
        background: #ffffff;
        border-radius: 5px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 40px;
    }

    .myaccount-experience-info strong {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #000000;
        font-family: 'Stack Sans Headline';
        margin-bottom: 2px;
    }

    .myaccount-experience-info .myaccount-sub {
        display: block;
        font-weight: 400;
        font-size: 16px;
        color: #8E8E8E;
        font-family: 'Stack Sans Headline';
    }

    /* Progress Bar */
    .myaccount-progress-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 10px;
        width: 100%;
    }

    .myaccount-progress {
        width: 100%;
        height: 2px;
        background: #eeeeee;
        position: relative;
    }

    .myaccount-progress-bar {
        height: 100%;
        background: #1f3d2b;
        display: flex;
    }

    .myaccount-experience-row .myaccount-experience-content .myaccount-experience-card .myaccount-experience-info .myaccount-progress-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-right: 220px;
    }

    .myaccount-progress-text {
        font-size: 14px;
        color: #000000;
        font-weight: 400;
        white-space: nowrap;
        font-family: 'Stack Sans Headline';
    }

    /* Continue Button */
    .myaccount-btn-continue {
        background: #1f3d2b;
        color: #ffffff;
        padding: 14px 20px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none !important;
        font-family: 'Stack Sans Headline';
        transition: background 0.2s ease;
        width: 139px;
        text-align: center;
        align-self: flex-end !important;
    }

    .myaccount-btn-continue:hover {
        background: #163024;
        color: #FFFFFF;
        text-decoration: none;
    }

    /* ===== KUIS SECTION ===== */
    .myaccount-dashboard-kuis {
        margin-top: 40px;
    }

    .myaccount-experience-kuis-row {
        display: flex;
        column-gap: 15px;
        margin-top: 20px;
    }

    /* Timeline Kuis */
    .myaccount-timeline-kuis {
        position: relative;
        width: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .myaccount-timeline-kuis .myaccount-dot-kuis {
        width: 12px;
        height: 12px;
        background: #D9D9D9;
        border-radius: 50%;
        z-index: 2;
    }

    .myaccount-timeline-kuis .myaccount-line-kuis {
        width: 2px;
        height: 100%;
        background: #D9D9D9;
        margin-top: 4px;
    }

    .myaccount-experience-content-kuis {
        flex: 1;
    }

    .myaccount-experience-content-kuis .myaccount-date-kuis,
    .myaccount-experience-content-kuis .date-kuis {
        display: block;
        font-size: 18px;
        color: #000000;
        margin-bottom: 15px;
        font-weight: 400;
        font-family: 'Stack Sans Headline';
        margin-top: -8px;
    }

    .myaccount-experience-card-kuis {
        background: #ffffff;
        border-radius: 5px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
    }

    .myaccount-experience-info-kuis strong {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        font-family: 'Stack Sans Headline';
        margin-bottom: 2px;
    }

    .myaccount-experience-info-kuis .myaccount-sub-kuis {
        display: block;
        font-weight: 400;
        font-size: 14px;
        color: #8E8E8E;
        font-family: 'Stack Sans Headline';
        margin-top: 10px;
    }

    .myaccount-btn-continue-kuis {
        background: #1f3d2b;
        color: #ffffff;
        padding: 14px 20px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none !important;
        font-family: 'Stack Sans Headline';
        transition: background 0.2s ease;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .myaccount-btn-continue-kuis:hover {
        background: #163024;
        color: #FFFFFF;
        text-decoration: none;
    }

    /* ===== ORDER SECTION ===== */
    .myaccount-dashboard-order h3 {
        font-size: 20px;
        font-weight: 500;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-bottom: 20px;
    }

    .myaccount-experience-order-row {
        display: flex;
        column-gap: 15px;
    }

    /* Timeline Order */
    .myaccount-timeline-order {
        position: relative;
        width: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .myaccount-timeline-order .myaccount-dot-order {
        width: 12px;
        height: 12px;
        background: #D9D9D9;
        border-radius: 50%;
        z-index: 2;
    }

    .myaccount-timeline-order .myaccount-line-order {
        width: 2px;
        background: #D9D9D9;
        margin: 4px 0;
        height: 180px;
    }

    .myaccount-orders-content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }

    .myaccount-experience-content-order {
        display: flex;
        flex-direction: column;
    }

    .myaccount-experience-content-order .myaccount-date-order {
        display: block;
        font-size: 16px;
        color: #000000;
        margin-bottom: 12px;
        font-weight: 400;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-top: -5px;
    }

    .myaccount-experience-card-order {
        background: #ffffff;
        border-radius: 5px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
        width: 100%;
    }

    .myaccount-experience-info-order {
        flex: 1;
        width: 100%;
    }

    .myaccount-experience-info-order strong {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-bottom: 2px;
    }

    .myaccount-experience-info-order .myaccount-sub-order {
        display: block;
        font-weight: 400;
        font-size: 14px;
        color: #8E8E8E;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-top: 10px;
    }

    .myaccount-btn-continue-order {
        background: #1f3d2b;
        color: #ffffff;
        padding: 14px 20px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none !important;
        font-family: 'Stack Sans Headline', sans-serif;
        transition: background 0.2s ease;
        white-space: nowrap;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .myaccount-btn-continue-order:hover {
        background: #163024;
        color: #FFFFFF;
        text-decoration: none;
    }

    /* ===== SHIPPING SECTION ===== */
    .container-header-teks {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    .myaccount-dashboard-shipping .myaccount-shipping-address {
        font-size: 24px;
        font-weight: 500;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-bottom: 35px !important;
    }

    .myaccount-new-addrress {
        padding: 12px 20px;
        background-color: #FFFFFF;
        border-radius: 50px;
        font-size: 16px;
        margin-bottom: 30px;
        font-family: 'Stack Sans Headline';
        font-weight: 400;
        text-decoration: none !important;
        color: #000000;
        width: 160px;
        text-align: center;
        display: block;
    }

    .myaccount-experience-shipping-row {
        display: flex;
        column-gap: 15px;
    }

    /* Timeline Shipping */
    .myaccount-timeline-shipping {
        position: relative;
        width: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .myaccount-timeline-shipping .myaccount-dot-shipping {
        width: 12px;
        height: 12px;
        background: #D9D9D9;
        border-radius: 50%;
        z-index: 2;
    }

    .myaccount-timeline-shipping .myaccount-line-shipping {
        width: 2px;
        background: #D9D9D9;
        margin: 4px 0;
        height: 180px;
    }

    .myaccount-shippings-content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }

    .myaccount-experience-content-shipping {
        display: flex;
        flex-direction: column;
    }

    .myaccount-experience-content-shipping .myaccount-date-shipping {
        display: block;
        font-size: 16px;
        color: #000000;
        margin-bottom: 12px;
        font-weight: 400;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-top: -5px;
    }

    .myaccount-experience-card-shipping {
        background: #ffffff;
        border-radius: 5px;
        padding: 15px 20px 25px 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        width: 100%;
    }

    .myaccount-experience-info-shipping {
        flex: 1;
        width: 100%;
    }

    .myaccount-experience-info-shipping strong {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #000000;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-bottom: 12px;
    }

    .myaccount-experience-info-shipping .myaccount-sub-shipping {
        display: block;
        font-weight: 400;
        font-size: 16px;
        color: #8E8E8E;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    /* ===== ACCOUNT SETTINGS ===== */
    .form-edit-account-teks {
        margin-bottom: 20px;
        font-weight: 500;
        font-family: 'Stack Sans Headline', sans-serif;
        font-size: 24px;
        color: #000000;
    }

    .custom-block-account-detail.custom-profile-display {
        background: #ffffff;
        border-radius: 5px;
        padding: 20px;
        max-width: 100%;
        position: relative;
        margin-bottom: 40px;
    }

    .custom-block-account-detail.custom-profile-display::after {
        content: '';
        position: absolute;
        bottom: 60px;
        left: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #E4E4E4;
        top: 269px;
    }

    .profile-info-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 6px;
    }

    .profile-info-item label {
        display: block;
        font-size: 16px;
        color: #8E8E8E;
        font-weight: 400;
        font-family: 'Stack Sans Headline', sans-serif;
        margin-bottom: 5px;
    }

    .profile-info-value {
        font-size: 16px;
        font-weight: 400;
        color: #000000;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    .custom-button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        gap: 10px;
        margin-top: 14px;
    }

    .custom-btn-change-password {
        padding: 12px 20px;
        background: #ffffff;
        color: #1C3C32;
        border: 1px solid #1C3C32;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        font-family: 'Stack Sans Headline', sans-serif;
        transition: all 0.3s ease;
        width: 100%;
        text-align: center;
    }

    .custom-btn-change-password:hover {
        background: #F5F5F5;
        color: #000000;
    }

    .custom-btn-edit-details {
        padding: 12px 20px;
        background: #1C3C32;
        color: #ffffff;
        border: none;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        font-family: 'Stack Sans Headline', sans-serif;
        transition: background 0.3s ease;
        width: 100%;
        text-align: center;
    }

    .custom-btn-edit-details:hover {
        background-color: #234848;
    }

    /* ===== MODAL ===== */
    .custom-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .custom-modal-content {
        background: #ffffff;
        border-radius: 8px;
        padding: 28px 20px 41px 20px;
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        scrollbar-width: none;
    }

    .custom-modal-content::-webkit-scrollbar {
        display: none;
    }

    .custom-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: none;
        position: relative;
    }

    .custom-modal-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -20px;
        right: -20px;
        height: 1px;
        border-bottom: 1px dashed #E4E4E4;
    }

    .custom-modal-header h3 {
        font-size: 24px;
        font-weight: 500;
        font-family: 'Stack Sans Headline';
        color: #000000;
        margin: 0;
    }

    .custom-modal-close {
        background: #F3F3F3;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: #000000;
        padding: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding-bottom: 3px;
        text-align: center;
        flex-shrink: 0;
    }

    .custom-modal-close:hover {
        background: #E0E0E0;
        color: #000000;
    }

    body.modal-open {
        overflow: hidden;
    }

    .custom-modal-content .container-form-shipping {
        border-bottom: none;
        position: relative;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .custom-modal-content .container-form-shipping::after {
        display: none;
    }

    .custom-form-row-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 55px;
        position: relative;
        /* Wajib ada agar garis bisa menempel di sini */
    }

    .custom-form-row-wrapper::after {
        content: '';
        position: absolute;
        bottom: 17px;
        left: -20px !important;
        right: -20px !important;
        height: 1px;
        border-bottom: 1px dashed #E4E4E4;
    }

    .custom-form-shipping-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

    .custom-modal-content .custom-form-row-wrapper .custom-form-row-field {
        flex: 1;
        width: 100%;
        margin: 0 !important;
    }

    .custom-modal-content .custom-form-shipping-wrapper .custom-form-row-field {
        flex: 1;
        margin-bottom: 10px;
        width: 100%;
    }

    .custom-modal-content .custom-form-row-field {
        margin-bottom: 20px;
    }

    .custom-modal-content .custom-form-row-field label {
        display: block;
        font-size: 16px;
        color: #000000;
        margin-bottom: 12px;
        font-weight: 600;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    .custom-modal-content .custom-input-field {
        width: 100%;
        padding: 12px 14px;
        border: none;
        background: #F5F5F5;
        border-radius: 5px;
        font-size: 14px;
        color: #000000;
        font-family: 'Stack Sans Headline', sans-serif;
        transition: background 0.3s ease;
    }

    .custom-nav-myaccount ul li a {
        margin-bottom: 13px;
        margin-top: 12px;
        border-right: 1px solid #C9C9C9 !important;
    }

    .custom-nav-myaccount ul li:last-child a {
        border-right: none !important;
    }

    .custom-modal-content .custom-input-field::placeholder {
        color: #CCCCCC;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    .custom-modal-content .custom-input-field:focus {
        outline: none;
        background: #EBEBEB;
    }

    .custom-modal-button-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .custom-modal-content .custom-btn-submit {
        padding: 12px 40px !important;
        background: #1C3C32 !important;
        color: #ffffff !important;
        border: none;
        font-family: 'Stack Sans Headline', sans-serif;
        border-radius: 50px !important;
        font-size: 14px;
        font-weight: 400 !important;
        cursor: pointer;
        transition: background 0.3s ease;
        width: 100%;
    }

    .custom-modal-content .custom-btn-submit:hover {
        background: #234848 !important;
    }

    /* ===== SUBSCRIPTION BLOCK ===== */
    .custom-block-subscription {
        background: #ffffff;
        border-radius: 5px;
        padding: 20px;
        max-width: 100%;
        margin-bottom: 40px;
        position: relative;
    }

    .custom-block-subscription::before {
        content: '';
        position: absolute;
        bottom: 60px;
        top: 231px;
        left: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #E4E4E4;
    }

    .custom-block-subscription h3 {
        font-size: 20px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 20px;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    .custom-subscription-options {
        margin-bottom: 20px;
    }

    .custom-subscription-options .subscription-title {
        font-size: 14px;
        color: #000000;
        margin-bottom: 30px;
        font-family: 'Stack Sans Headline', sans-serif;
        font-weight: 400;
    }

    .custom-checkbox-label {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        cursor: pointer;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    .custom-checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 12px;
        cursor: pointer;
        accent-color: #1C3C32;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 2px solid #D9D9D9;
        border-radius: 3px;
        background-color: #D9D9D9;
        position: relative;
        flex-shrink: 0;
    }

    .custom-checkbox-label input[type="checkbox"]:checked {
        background-color: #1C3C32;
        border-color: #1C3C32;
    }

    .custom-checkbox-label input[type="checkbox"]:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #FFFFFF;
        font-size: 12px;
        font-weight: bold;
    }

    .custom-checkbox-label .checkbox-text {
        font-size: 16px;
        color: #000000;
        font-family: 'Stack Sans Headline', sans-serif;
        font-weight: 400;
    }

    .custom-btn-save-subscription {
        display: flex;
        justify-content: stretch;
        width: 123px;
    }

    .btn-save-subscription {
        padding: 12px 20px;
        background: #1C3C32;
        color: #ffffff;
        border: none;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        transition: background 0.3s ease;
        font-family: 'Stack Sans Headline', sans-serif;
        width: 100%;
        margin-top: 9px;
    }

    .btn-save-subscription:hover {
        background: #234848;
    }

    /* ===== DELETE ACCOUNT BLOCK ===== */
    .custom-block-delete-account {
        background: #ffffff;
        border-radius: 5px;
        padding: 20px;
        max-width: 100%;
    }

    .custom-block-delete-account h3 {
        font-size: 20px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 15px;
        font-family: 'Stack Sans Headline', sans-serif;
    }

    .delete-account-text {
        font-size: 16px;
        color: #000000;
        line-height: 1.6;
        margin-bottom: 30px;
        font-family: 'Stack Sans Headline', sans-serif;
        font-weight: 400;
        max-width: 340px;
    }

    .custom-btn-delete-account {
        display: flex;
        justify-content: stretch;
        width: 123px;
    }

    .btn-contact-us {
        padding: 12px 20px;
        background: #1C3C32;
        color: #ffffff;
        border: none;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        font-family: 'Stack Sans Headline', sans-serif;
        transition: background 0.3s ease;
        width: 100%;
    }

    .btn-contact-us:hover {
        background: #234848;
    }

    /* ===== MY SCENTS SECTION ===== */
    .myscents-full-container {
        font-family: 'Stack Sans Headline';
    }

    .myscents-header {
        margin-bottom: 30px;
    }

    .myscents-btn-back {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #000000;
        font-size: 16px;
    }

    .myscents-title {
        font-size: 40px;
        font-weight: 400;
        font-family: 'Stack Sans Headline';
    }

    /* quiz page */
    .quiz-container {
        padding: 50px 0 88px 0;
    }
    .quiz-step h3 {
        font-size: 24px;
    }
    .quiz-question {
        margin-bottom: 24px;
    }
    .quiz-question h3 {
        font-size: 30px;
    }
    .quiz-label {
        font-size: 18px;
        margin-bottom: 40px;
    }
    .quiz-answer-wrapper {
        margin-bottom: 26px;
    }
    .quiz-answer label {
        padding: 24px 0;
        font-size: 16px;
    }
    .quiz-answer label::after {
        width: 34px;
        height: 34px;
    }
    .custom-block-quiz-input {
        font-size: 16px;
        padding: 24px !important;
    }
    .btn-quiz {
        width: 100%;
    }
    .ui-datepicker {
        width: 90% !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}