/* =========================================================
   CULTURESTOCK ACCOUNT
   Canonical / consolidated stylesheet

   Pakem layout:
   - Desktop container: 1080px
   - Tablet gutter: 32px
   - Mobile gutter: 20px
   - Desktop sidebar: 210px
   - Tablet sidebar: 190px
   - Heading: Poppins
   - Body / form: Inter
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

body.woocommerce-account {
    --cs-green: #087866;
    --cs-green-hover: #076b5b;
    --cs-coral: #ff523b;
    --cs-coral-soft: #ff8373;
    --cs-coral-hover: #e0432e;
    --cs-dark: #2f394a;
    --cs-heading: #202b3d;
    --cs-text: #536078;
    --cs-muted: #667085;
    --cs-border: #e4e9ef;
    --cs-border-input: #d9e1ea;
    --cs-bg-soft: #f7f9fb;
}

/* =========================================================
   2. MASTER PAGE / OUTER CONTAINER
   ========================================================= */

body.woocommerce-account .cs-account-page-main {
    width: 100%;
    margin: 0;
    padding: 0 0 72px;
    box-sizing: border-box;
}

body.woocommerce-account .cs-account-page-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

body.woocommerce-account
.cs-account-page-container
.cs-dynamic-category-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .cs-account-page-content {
    width: 100%;
    min-height: 320px;
    margin: 40px 0 0;
    padding: 0;
    box-sizing: border-box;
}

body.woocommerce-account
.cs-account-page-content
.woocommerce {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-account
.cs-account-page-content
.woocommerce-MyAccount-navigation {
    flex: 0 0 210px !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-account
.cs-account-page-content
.woocommerce-MyAccount-content {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-account
.cs-account-page-content
.woocommerce-MyAccount-content-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Desktop alignment yang sudah disepakati sebelumnya. */
@media (min-width: 1137px) {
    body.woocommerce-account .cs-account-page-content {
        width: calc(100% + 80px) !important;
        max-width: none !important;
        margin-left: -32px !important;
        margin-right: -32px !important;
    }
}

/* =========================================================
   3. ACCOUNT NAVIGATION
   ========================================================= */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--cs-coral-soft) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--cs-green) !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    background: #f7fffd !important;
    border-color: var(--cs-green) !important;
    color: var(--cs-green) !important;
}

body.woocommerce-account
.woocommerce-MyAccount-navigation
.is-active > a {
    background: var(--cs-coral-soft) !important;
    border-color: var(--cs-coral-soft) !important;
    color: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: "⌂";
    font-size: 16px;
    line-height: 1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
    content: "▣";
    font-size: 15px;
    line-height: 1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: "⌖";
    font-size: 16px;
    line-height: 1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: "○";
    font-size: 16px;
    line-height: 1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: "↪";
    font-size: 16px;
    line-height: 1;
}

/* =========================================================
   4. TYPOGRAPHY BASE
   ========================================================= */

body.woocommerce-account .cs-account-page-content h1,
body.woocommerce-account .cs-account-page-content h2,
body.woocommerce-account .cs-account-page-content h3,
body.woocommerce-account .cs-address-add-card strong {
    font-family: "Poppins", Arial, sans-serif !important;
}

body.woocommerce-account .cs-account-page-content p,
body.woocommerce-account .cs-account-page-content label,
body.woocommerce-account .cs-account-page-content input,
body.woocommerce-account .cs-account-page-content select,
body.woocommerce-account .cs-account-page-content textarea,
body.woocommerce-account .cs-account-page-content button,
body.woocommerce-account .cs-account-page-content a,
body.woocommerce-account .cs-account-page-content span {
    font-family: "Inter", Arial, sans-serif;
}

/* =========================================================
   5. DASHBOARD
   ========================================================= */

body.woocommerce-account .cs-account-dashboard {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .cs-account-welcome {
    margin: 0 0 28px !important;
}

body.woocommerce-account .cs-account-welcome h1 {
    margin: 0 0 8px !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;
}

body.woocommerce-account .cs-account-welcome p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--cs-muted) !important;
}

body.woocommerce-account .cs-account-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 0 32px !important;
}

body.woocommerce-account .cs-account-stat-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 142px !important;
    padding: 22px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #2f2f31 !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

body.woocommerce-account .cs-account-stat-label {
    display: block !important;
    margin: 0 0 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    color: #d0d5dd !important;
}

body.woocommerce-account .cs-account-stat-value {
    display: block !important;
    margin: 0 0 8px !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

body.woocommerce-account .cs-account-stat-value--money {
    font-size: 24px !important;
    line-height: 1.15 !important;
}

body.woocommerce-account .cs-account-stat-value .woocommerce-Price-amount,
body.woocommerce-account .cs-account-stat-value .woocommerce-Price-currencySymbol {
    color: inherit !important;
}

body.woocommerce-account .cs-account-stat-caption {
    display: block !important;
    margin-top: auto !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #b8bdc7 !important;
}

body.woocommerce-account .cs-account-section {
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body.woocommerce-account .cs-account-section-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin: 0 0 20px !important;
}

body.woocommerce-account .cs-account-section-header > div {
    min-width: 0 !important;
}

body.woocommerce-account .cs-account-section-header h2 {
    margin: 0 0 4px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1f2937 !important;
}

body.woocommerce-account .cs-account-section-header p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--cs-muted) !important;
}

body.woocommerce-account .cs-account-section-link {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cs-green) !important;
    text-decoration: none !important;
}

body.woocommerce-account .cs-account-section-link:hover {
    text-decoration: underline !important;
}

body.woocommerce-account .cs-account-order-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border-top: 1px solid #f1f2f4 !important;
}

body.woocommerce-account .cs-account-order-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 16px 0 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f2f4 !important;
    text-decoration: none !important;
}

body.woocommerce-account .cs-account-order-item:hover {
    background: #fafafa !important;
}

body.woocommerce-account .cs-account-order-main {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

body.woocommerce-account .cs-account-order-main strong {
    margin: 0 0 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-account-order-main span {
    font-size: 12px !important;
    color: #98a2b3 !important;
}

body.woocommerce-account .cs-account-order-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

body.woocommerce-account .cs-account-order-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #fff3f1 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #e0432e !important;
}

body.woocommerce-account .cs-account-order-meta strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-account-order-meta strong .woocommerce-Price-amount {
    color: inherit !important;
}

body.woocommerce-account .cs-account-empty {
    padding: 40px 20px !important;
    text-align: center !important;
}

body.woocommerce-account .cs-account-empty strong {
    display: block !important;
    margin: 0 0 6px !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 18px !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-account-empty p {
    margin: 0 0 18px !important;
    font-size: 13px !important;
    color: var(--cs-muted) !important;
}

body.woocommerce-account .cs-account-shop-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    background: var(--cs-coral) !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body.woocommerce-account .cs-account-shop-button:hover {
    background: var(--cs-coral-hover) !important;
}

/* =========================================================
   6. DETAIL AKUN
   ========================================================= */

body.woocommerce-account .cs-account-details {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.woocommerce-account .cs-account-details-header {
    margin: 0 0 24px;
}

body.woocommerce-account .cs-account-details-header h1 {
    margin: 0 0 8px !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-account-details-header p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #6b7690 !important;
}

body.woocommerce-account .cs-account-details-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    margin: 0;
}

body.woocommerce-account .cs-account-details-card {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid var(--cs-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(38, 51, 77, .03);
}

body.woocommerce-account .cs-account-details-card-header {
    margin: 0 0 22px;
}

body.woocommerce-account .cs-account-details-card-header h2 {
    margin: 0 0 6px !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-account-details-card-header p {
    max-width: 650px;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #6b7690 !important;
}

body.woocommerce-account .cs-account-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

body.woocommerce-account .cs-account-field {
    min-width: 0;
    margin: 0;
}

body.woocommerce-account .cs-account-field--full {
    grid-column: 1 / -1;
}

body.woocommerce-account .cs-account-field label {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #344156 !important;
}

body.woocommerce-account .cs-account-field label span {
    color: var(--cs-coral) !important;
}

body.woocommerce-account .cs-account-field input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--cs-border-input) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #344156 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.woocommerce-account .cs-account-field input:focus {
    border-color: var(--cs-green) !important;
    box-shadow: 0 0 0 3px rgba(8, 120, 102, .08) !important;
}

body.woocommerce-account .cs-account-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #344156 !important;
}

body.woocommerce-account .cs-account-details-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2px;
}

body.woocommerce-account .cs-account-details-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 170px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--cs-coral) !important;
    color: #ffffff !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

body.woocommerce-account .cs-account-details-submit:hover {
    background: var(--cs-coral-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 82, 59, .18) !important;
}

body.woocommerce-account .cs-account-details-submit:active {
    transform: translateY(0);
}

/* Woo notices on Account page */
body.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
    width: 100%;
    margin: 0 0 20px;
}

/* =========================================================
   7. ADDRESS — HIDE NATIVE WOOCOMMERCE CARDS
   ========================================================= */

body.woocommerce-account
.woocommerce-MyAccount-content-wrapper
> .woocommerce-Addresses,
body.woocommerce-account
.woocommerce-MyAccount-content-wrapper
> .u-columns.woocommerce-Addresses,
body.woocommerce-account
.woocommerce-MyAccount-content-wrapper
> .woocommerce-Address {
    display: none !important;
}

/* =========================================================
   8. ADDRESS PAGE / ADDRESS BOOK
   ========================================================= */

body.woocommerce-account .cs-account-address,
body.woocommerce-account .cs-address-book {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .cs-account-address-header,
body.woocommerce-account .cs-address-book-header {
    margin: 0 0 24px !important;
}

body.woocommerce-account .cs-address-book-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

body.woocommerce-account .cs-account-address-header h1,
body.woocommerce-account .cs-address-book-header h1 {
    margin: 0 0 8px !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-account-address-header p,
body.woocommerce-account .cs-address-book-header p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #6b7690 !important;
}

body.woocommerce-account .cs-address-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--cs-green);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body.woocommerce-account .cs-address-add-button:hover {
    background: var(--cs-green-hover);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(8, 120, 102, .14);
}

body.woocommerce-account .cs-address-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.woocommerce-account .cs-address-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 22px;
    box-sizing: border-box;
    border: 1px solid var(--cs-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(38, 51, 77, .03);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.woocommerce-account .cs-address-card:hover {
    border-color: #d7e2df;
    box-shadow: 0 8px 24px rgba(38, 51, 77, .06);
    transform: translateY(-1px);
}

body.woocommerce-account .cs-address-card.is-primary {
    border-color: #cfe9e3;
}

body.woocommerce-account .cs-address-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.woocommerce-account .cs-address-card-main h2 {
    margin: 12px 0 8px !important;
    color: var(--cs-heading) !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

body.woocommerce-account .cs-address-primary-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e3f5ef;
    color: var(--cs-green);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

body.woocommerce-account .cs-address-card-text {
    color: var(--cs-text);
    font-size: 14px;
    line-height: 1.65;
}

body.woocommerce-account .cs-address-card-text p {
    margin: 0 0 2px;
}

body.woocommerce-account .cs-address-card-text p:last-child {
    margin-bottom: 0;
}

body.woocommerce-account .cs-address-card-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.woocommerce-account .cs-address-inline-form {
    display: inline-flex;
    margin: 0;
}

body.woocommerce-account .cs-address-edit-button,
body.woocommerce-account .cs-address-primary-button,
body.woocommerce-account .cs-address-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: #ffffff;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

body.woocommerce-account .cs-address-edit-button {
    border: 1px solid #dce3ea;
    color: #344156 !important;
}

body.woocommerce-account .cs-address-edit-button:hover {
    border-color: var(--cs-green);
    background: #f7fbfa;
    color: var(--cs-green) !important;
}

body.woocommerce-account .cs-address-primary-button {
    border: 1px solid #bcded6;
    color: var(--cs-green);
}

body.woocommerce-account .cs-address-primary-button:hover {
    border-color: var(--cs-green);
    background: #f3faf8;
}

body.woocommerce-account .cs-address-delete-button {
    border: 1px solid #ffd0ca;
    color: #ef4937;
}

body.woocommerce-account .cs-address-delete-button:hover {
    border-color: #ff7766;
    background: #fff7f5;
}

body.woocommerce-account .cs-address-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 150px;
    padding: 28px;
    box-sizing: border-box;
    border: 1.5px dashed #cdd7df;
    border-radius: 16px;
    background: #fbfcfd;
    text-align: center;
    text-decoration: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

body.woocommerce-account .cs-address-add-card:hover {
    border-color: var(--cs-green);
    background: #f6fbfa;
    transform: translateY(-1px);
}

body.woocommerce-account .cs-address-add-card strong {
    color: var(--cs-green);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

body.woocommerce-account .cs-address-add-card > span:last-child {
    color: #7a869c;
    font-size: 13px;
    line-height: 1.5;
}

body.woocommerce-account .cs-address-add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e2f4ef;
    color: var(--cs-green);
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
}

/* =========================================================
   9. ADDRESS FORM
   ========================================================= */

body.woocommerce-account .cs-account-address-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.woocommerce-account .cs-address-form-header {
    width: 100%;
    margin: 0 0 28px;
}

body.woocommerce-account .cs-address-form-header h2 {
    margin: 0 0 6px !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-address-form-header p {
    max-width: 620px;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #6b7690 !important;
}

body.woocommerce-account .cs-address-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    width: 100% !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field--full {
    grid-column: 1 / -1 !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field label,
body.woocommerce-account .cs-address-search > label {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #344156 !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field input,
body.woocommerce-account #cs_area_search {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--cs-border-input) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #344156 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field input:focus,
body.woocommerce-account #cs_area_search:focus {
    border-color: var(--cs-green) !important;
    box-shadow: 0 0 0 3px rgba(8, 120, 102, .08) !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field input::placeholder,
body.woocommerce-account #cs_area_search::placeholder {
    color: #a7b2c4 !important;
    opacity: 1 !important;
}

body.woocommerce-account .cs-account-address-form .cs-address-field input[readonly] {
    background: var(--cs-bg-soft) !important;
    color: var(--cs-text) !important;
}

/* =========================================================
   10. ADDRESS SEARCH
   ========================================================= */

body.woocommerce-account .cs-address-search,
body.woocommerce-account .cs-address-search-field {
    position: relative !important;
    z-index: 20;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .cs-address-search {
    margin: 0 0 14px !important;
    padding: 0 !important;
}

body.woocommerce-account .cs-address-search-box {
    position: relative !important;
}

body.woocommerce-account .cs-address-search > small,
body.woocommerce-account .cs-address-search-field small {
    display: block !important;
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #7a869c !important;
}

body.woocommerce-account .cs-address-search-results {
    position: absolute !important;
    top: calc(100% - 18px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    display: none;
    max-height: 280px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    border: 1px solid #dfe6ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(38, 51, 77, .12) !important;
}

body.woocommerce-account .cs-address-search-results[hidden] {
    display: none !important;
}

body.woocommerce-account .cs-address-search-results:not(:empty):not([hidden]) {
    display: block;
}

body.woocommerce-account .cs-address-search-result,
body.woocommerce-account .cs-address-search-results button,
body.woocommerce-account .cs-address-search-results .cs-address-search-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f4 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #344156 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    appearance: none !important;
}

body.woocommerce-account .cs-address-search-result:last-child,
body.woocommerce-account .cs-address-search-results button:last-child,
body.woocommerce-account .cs-address-search-results .cs-address-search-item:last-child {
    border-bottom: 0 !important;
}

body.woocommerce-account .cs-address-search-result:hover,
body.woocommerce-account .cs-address-search-results button:hover,
body.woocommerce-account .cs-address-search-results .cs-address-search-item:hover {
    background: #f5faf8 !important;
    color: var(--cs-green) !important;
}

body.woocommerce-account .cs-address-search-result strong {
    display: block !important;
    margin: 0 0 3px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--cs-dark) !important;
}

body.woocommerce-account .cs-address-search-result span {
    display: block !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: #77808f !important;
}

body.woocommerce-account .cs-address-search-loading,
body.woocommerce-account .cs-address-search-empty,
body.woocommerce-account .cs-address-search-error {
    padding: 12px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #77808f !important;
}

body.woocommerce-account .cs-address-search-error {
    color: #d64545 !important;
}

/* =========================================================
   11. ADDRESS FORM ACTIONS
   ========================================================= */

body.woocommerce-account .cs-address-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

body.woocommerce-account .cs-address-save-button,
body.woocommerce-account .cs-address-cancel-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

body.woocommerce-account .cs-address-save-button {
    min-width: 160px !important;
    border: 0 !important;
    background: var(--cs-coral) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.woocommerce-account .cs-address-save-button:hover {
    background: var(--cs-coral-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 82, 59, .18) !important;
}

body.woocommerce-account .cs-address-cancel-button {
    border: 1px solid #dce3ea !important;
    background: #ffffff !important;
    color: var(--cs-text) !important;
}

body.woocommerce-account .cs-address-cancel-button:hover {
    border-color: #bfcbd8 !important;
    color: var(--cs-dark) !important;
}

/* =========================================================
   12. ADDRESS TOAST
   ========================================================= */

body.woocommerce-account .cs-address-toast {
    position: fixed;
    top: 24px;
    right: max(20px, calc((100vw - 1080px) / 2));
    z-index: 9999;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 12px;
    width: min(380px, calc(100vw - 40px));
    padding: 14px 14px 14px 16px;
    box-sizing: border-box;
    border: 1px solid #d8ebe5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(31, 45, 61, .14);
    animation: csAddressToastIn .25s ease both;
}

body.woocommerce-account .cs-address-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2f4ea;
    color: #1d9a55;
    font-size: 20px;
    font-weight: 700;
}

body.woocommerce-account .cs-address-toast-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

body.woocommerce-account .cs-address-toast-content strong {
    font-family: "Poppins", Arial, sans-serif;
    color: var(--cs-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

body.woocommerce-account .cs-address-toast-content span {
    color: #66738a;
    font-size: 12px;
    line-height: 1.4;
}

body.woocommerce-account .cs-address-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8a94a6;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

body.woocommerce-account .cs-address-toast-close:hover {
    background: #f4f6f8;
    color: #344156;
}

body.woocommerce-account .cs-address-toast--warning {
    border-color: #f5dfab;
}

body.woocommerce-account .cs-address-toast--warning .cs-address-toast-icon {
    background: #fff3d6;
    color: #bd7b00;
}

body.woocommerce-account .cs-address-toast.is-closing {
    animation: csAddressToastOut .25s ease both;
}

@keyframes csAddressToastIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes csAddressToastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* =========================================================
   13. TABLET — 32px GUTTER
   ========================================================= */

@media (min-width: 768px) and (max-width: 1136px) {
    body.woocommerce-account .cs-account-page-container {
        width: calc(100% - 64px);
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    body.woocommerce-account .cs-account-page-content {
        width: 100% !important;
        margin-top: 36px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.woocommerce-account
    .cs-account-page-content
    .woocommerce {
        gap: 24px !important;
    }

    body.woocommerce-account
    .cs-account-page-content
    .woocommerce-MyAccount-navigation {
        flex: 0 0 190px !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }

    body.woocommerce-account .cs-account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.woocommerce-account .cs-account-details-header h1,
    body.woocommerce-account .cs-account-address-header h1,
    body.woocommerce-account .cs-address-book-header h1 {
        font-size: 34px !important;
    }

    body.woocommerce-account .cs-address-toast {
        right: 32px;
        top: 24px;
    }
}

/* =========================================================
   14. MOBILE — 20px GUTTER
   ========================================================= */

@media (max-width: 767px) {
    body.woocommerce-account .cs-account-page-main {
        padding-bottom: 48px;
    }

    body.woocommerce-account .cs-account-page-container {
        width: calc(100% - 40px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    body.woocommerce-account .cs-account-page-content {
        width: 100% !important;
        margin-top: 28px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.woocommerce-account
    .cs-account-page-content
    .woocommerce {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-account
    .cs-account-page-content
    .woocommerce-MyAccount-navigation {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation a {
        min-height: 44px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    body.woocommerce-account
    .cs-account-page-content
    .woocommerce-MyAccount-content,
    body.woocommerce-account
    .cs-account-page-content
    .woocommerce-MyAccount-content-wrapper {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Dashboard */
    body.woocommerce-account .cs-account-welcome h1 {
        font-size: 28px !important;
    }

    body.woocommerce-account .cs-account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.woocommerce-account .cs-account-stat-card {
        min-height: 120px !important;
        padding: 18px !important;
    }

    body.woocommerce-account .cs-account-stat-value {
        font-size: 30px !important;
    }

    body.woocommerce-account .cs-account-stat-value--money {
        font-size: 20px !important;
    }

    body.woocommerce-account .cs-account-section {
        padding: 18px !important;
    }

    body.woocommerce-account .cs-account-section-header {
        align-items: center !important;
    }

    body.woocommerce-account .cs-account-order-item {
        align-items: flex-start !important;
    }

    body.woocommerce-account .cs-account-order-meta {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }

    /* Detail Akun */
    body.woocommerce-account .cs-account-details-header {
        margin-bottom: 20px;
    }

    body.woocommerce-account .cs-account-details-header h1 {
        font-size: 30px !important;
    }

    body.woocommerce-account .cs-account-details-header p {
        font-size: 13px !important;
    }

    body.woocommerce-account .cs-account-details-form {
        gap: 14px;
    }

    body.woocommerce-account .cs-account-details-card {
        padding: 20px;
        border-radius: 14px;
    }

    body.woocommerce-account .cs-account-details-card-header {
        margin-bottom: 18px;
    }

    body.woocommerce-account .cs-account-details-card-header h2 {
        font-size: 20px !important;
    }

    body.woocommerce-account .cs-account-details-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.woocommerce-account .cs-account-field--full {
        grid-column: 1;
    }

    body.woocommerce-account .cs-account-field input {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 14px !important;
    }

    body.woocommerce-account .cs-account-details-submit {
        width: 100% !important;
    }

    /* Address */
    body.woocommerce-account .cs-account-address-header,
    body.woocommerce-account .cs-address-book-header {
        margin-bottom: 18px !important;
    }

    body.woocommerce-account .cs-address-book-header {
        flex-direction: column;
        gap: 14px;
    }

    body.woocommerce-account .cs-account-address-header h1,
    body.woocommerce-account .cs-address-book-header h1 {
        margin-bottom: 6px !important;
        font-size: 30px !important;
    }

    body.woocommerce-account .cs-account-address-header p,
    body.woocommerce-account .cs-address-book-header p {
        font-size: 13px !important;
    }

    body.woocommerce-account .cs-address-add-button {
        width: 100%;
    }

    body.woocommerce-account .cs-address-card {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    body.woocommerce-account .cs-address-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    body.woocommerce-account .cs-address-inline-form,
    body.woocommerce-account .cs-address-edit-button,
    body.woocommerce-account .cs-address-primary-button,
    body.woocommerce-account .cs-address-delete-button {
        width: 100%;
    }

    body.woocommerce-account .cs-account-address-form {
        padding: 20px !important;
    }

    body.woocommerce-account .cs-address-grid {
        grid-template-columns: 1fr !important;
    }

    body.woocommerce-account .cs-account-address-form .cs-address-field,
    body.woocommerce-account .cs-account-address-form .cs-address-field--full {
        grid-column: 1 !important;
        margin-bottom: 14px !important;
    }

    body.woocommerce-account .cs-account-address-form .cs-address-field input,
    body.woocommerce-account #cs_area_search {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 14px !important;
        border-radius: 11px !important;
    }

    body.woocommerce-account .cs-address-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    body.woocommerce-account .cs-address-save-button,
    body.woocommerce-account .cs-address-cancel-button {
        width: 100% !important;
    }

    body.woocommerce-account .cs-address-search-results {
        max-height: 260px !important;
        padding: 6px !important;
        border-radius: 11px !important;
    }

    /* Toast */
    body.woocommerce-account .cs-address-toast {
        top: 16px;
        left: 20px;
        right: 20px;
        width: auto;
        grid-template-columns: 36px minmax(0, 1fr) 32px;
        padding: 12px;
    }

    body.woocommerce-account .cs-address-toast-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        grid-template-columns: 1fr !important;
    }

    body.woocommerce-account .cs-account-stats {
        grid-template-columns: 1fr !important;
    }

    body.woocommerce-account .cs-account-order-item {
        flex-direction: column !important;
        gap: 10px !important;
    }

    body.woocommerce-account .cs-account-order-meta {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    body.woocommerce-account .cs-account-details-header h1,
    body.woocommerce-account .cs-account-address-header h1,
    body.woocommerce-account .cs-address-book-header h1 {
        font-size: 28px !important;
    }

    body.woocommerce-account .cs-account-details-card {
        padding: 18px;
    }

    body.woocommerce-account .cs-account-address-form {
        padding: 18px !important;
    }
}

/* =========================================================
   CS-ACCOUNT-CANONICAL-ALIGNMENT-START
   One gutter system for logged-in My Account.
   Desktop: 1080px centered
   Tablet:  32px gutter
   Mobile:  20px gutter
   ========================================================= */

body.woocommerce-account:not(.cs-auth-page) .cs-account-page-container {
    width: min(1080px, calc(100% - 40px)) !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-account:not(.cs-auth-page)
.cs-account-page-container
.cs-dynamic-category-section,
body.woocommerce-account:not(.cs-auth-page)
.cs-account-page-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.woocommerce-account:not(.cs-auth-page)
.cs-account-page-content
> .woocommerce {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) and (max-width: 1136px) {
    body.woocommerce-account:not(.cs-auth-page) .cs-account-page-container {
        width: calc(100% - 64px) !important;
    }
}

@media (max-width: 767px) {
    body.woocommerce-account:not(.cs-auth-page) .cs-account-page-container {
        width: calc(100% - 40px) !important;
    }
}

/* =========================================================
   CS-ACCOUNT-CANONICAL-ALIGNMENT-END
   ========================================================= */


/* =========================================================
   CS-AUTH-CANONICAL-START
   Guest My Account authentication only.
   Preserves WooCommerce / Google / Turnstile behavior.
   ========================================================= */

body.cs-auth-page {
    --cs-auth-green: #087866;
    --cs-auth-green-dark: #066656;
    --cs-auth-coral: #ff523b;
    --cs-auth-dark: #2f394a;
    --cs-auth-muted: #747c89;
    --cs-auth-border: #e5e8ec;
    overflow-x: hidden;
}

body.cs-auth-page .cs-account-page-container,
body.cs-auth-page .cs-account-page-content,
body.cs-auth-page .cs-account-page-content > .woocommerce,
body.cs-auth-page .woocommerce.cs-auth {
    display: block !important;
    width: 100% !important;
    max-width: 1080px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.cs-auth-page .cs-account-page-content {
    padding-top: 24px !important;
    padding-bottom: 80px !important;
}

body.cs-auth-page .woocommerce.cs-auth {
    gap: 0 !important;
}

body.cs-auth-page .cs-auth-original-heading,
body.cs-auth-page .woocommerce.cs-auth > h2,
body.cs-auth-page .cs-auth-intro-badge {
    display: none !important;
}

body.cs-auth-page .cs-auth-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 378px !important;
    column-gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 1080px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.cs-auth-page .cs-auth-left {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.cs-auth-page .cs-auth-right {
    display: block !important;
    width: 378px !important;
    max-width: 378px !important;
    min-width: 378px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.cs-auth-page .cs-auth-intro,
body.cs-auth-page .cs-auth-intro-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

body.cs-auth-page .cs-auth-intro-copy {
    margin-bottom: 20px !important;
}

body.cs-auth-page .cs-auth-title {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: var(--cs-auth-dark) !important;
    white-space: normal !important;
}

body.cs-auth-page .cs-auth-title span {
    display: none !important;
}

body.cs-auth-page .cs-auth-subtitle {
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--cs-auth-muted) !important;
}

body.cs-auth-page .cs-auth-visual {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #dedede !important;
}

body.cs-auth-page .cs-auth-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

body.cs-auth-page .cs-auth-visual-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px !important;
    color: #9b9b9b !important;
}

body.cs-auth-page .cs-auth-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 5px !important;
    border: 1px solid var(--cs-auth-border) !important;
    border-radius: 15px !important;
    background: #f5f6f7 !important;
    box-sizing: border-box !important;
}

body.cs-auth-page .cs-auth-tab {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cs-auth-muted) !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    cursor: pointer !important;
}

body.cs-auth-page .cs-auth-tab.is-active {
    background: #fff !important;
    color: var(--cs-auth-green) !important;
    box-shadow: 0 3px 12px rgba(30,45,60,.08) !important;
}

body.cs-auth-page .cs-auth-tab-icon,
body.cs-auth-page .cs-auth-tab-icon svg {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
}

body.cs-auth-page .cs-auth-shell,
body.cs-auth-page .cs-auth-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

body.cs-auth-page .cs-auth-panel {
    display: none !important;
}

body.cs-auth-page .cs-auth-panel.is-active {
    display: block !important;
}

body.cs-auth-page .cs-auth-panel form.woocommerce-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 38px 31px !important;
    border: 1px solid var(--cs-auth-border) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 16px 50px rgba(27,40,55,.065) !important;
    box-sizing: border-box !important;
}

body.cs-auth-page .cs-auth-panel-heading {
    margin-bottom: 27px !important;
}

body.cs-auth-page .cs-auth-panel-heading h2 {
    display: block !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
    color: var(--cs-auth-dark) !important;
}

body.cs-auth-page .cs-auth-panel-heading p {
    margin: 0 !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--cs-auth-muted) !important;
}

body.cs-auth-page .cs-auth-panel .woocommerce-form-row,
body.cs-auth-page .cs-auth-panel .form-row {
    width: 100% !important;
    margin: 0 0 19px !important;
    padding: 0 !important;
    float: none !important;
}

body.cs-auth-page .cs-auth-panel label {
    display: block !important;
    margin: 0 0 8px !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: var(--cs-auth-dark) !important;
}

body.cs-auth-page .cs-auth-panel label .required {
    color: var(--cs-auth-coral) !important;
}

body.cs-auth-page .cs-auth-panel input.input-text,
body.cs-auth-page .cs-auth-panel input[type="text"],
body.cs-auth-page .cs-auth-panel input[type="email"],
body.cs-auth-page .cs-auth-panel input[type="password"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 1px solid #d9dde2 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    color: var(--cs-auth-dark) !important;
    box-sizing: border-box !important;
}

body.cs-auth-page .cs-auth-panel input:focus {
    border-color: var(--cs-auth-green) !important;
    box-shadow: 0 0 0 3px rgba(8,120,102,.09) !important;
}

body.cs-auth-page .cs-auth-password-wrap {
    position: relative !important;
    width: 100% !important;
}

body.cs-auth-page .cs-auth-password-wrap input {
    padding-right: 52px !important;
}

body.cs-auth-page .cs-auth-password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    color: #8b929d !important;
    cursor: pointer !important;
}

body.cs-auth-page .cs-auth-panel .show-password-input {
    display: none !important;
}

body.cs-auth-page .cs-auth-panel button.woocommerce-button,
body.cs-auth-page .cs-auth-panel button[type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 10px 0 0 !important;
    padding: 13px 18px !important;
    float: none !important;
    border: 1px solid var(--cs-auth-green) !important;
    border-radius: 11px !important;
    background: var(--cs-auth-green) !important;
    color: #fff !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

body.cs-auth-page .cs-auth-panel button.woocommerce-button:hover,
body.cs-auth-page .cs-auth-panel button[type="submit"]:hover {
    border-color: var(--cs-auth-green-dark) !important;
    background: var(--cs-auth-green-dark) !important;
}

body.cs-auth-page .cs-auth-panel-login .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.cs-auth-page .cs-auth-panel-login .woocommerce-LostPassword {
    margin: 14px 0 0 !important;
    text-align: center !important;
}

body.cs-auth-page .cs-auth-panel-login .woocommerce-LostPassword a,
body.cs-auth-page .cs-auth-panel a {
    color: var(--cs-auth-green) !important;
    text-decoration: none !important;
}

body.cs-auth-page .cs-auth-panel-register .woocommerce-privacy-policy-text {
    margin: 4px 0 20px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background: #f7f8f9 !important;
}

body.cs-auth-page .cs-auth-panel-register .woocommerce-privacy-policy-text p {
    margin: 0 !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: var(--cs-auth-muted) !important;
}

body.cs-auth-page .cs-auth-turnstile,
body.cs-auth-page .cf-turnstile,
body.cs-auth-page .cs-auth-panel-login iframe,
body.cs-auth-page .cs-auth-panel-login [id*="google"],
body.cs-auth-page .cs-auth-panel-login [class*="google"] {
    max-width: 100% !important;
}

body.cs-auth-page .cs-auth-turnstile {
    width: 100% !important;
    margin: 7px 0 20px !important;
}

body.cs-auth-page .cs-auth-switch {
    margin-top: 24px !important;
    padding-top: 21px !important;
    border-top: 1px solid #edf0f2 !important;
    text-align: center !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--cs-auth-muted) !important;
}

body.cs-auth-page .cs-auth-switch button {
    display: inline !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 0 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cs-auth-green) !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

body.cs-auth-page .woocommerce-notices-wrapper {
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto 18px !important;
}

body.cs-auth-page .woocommerce-error,
body.cs-auth-page .woocommerce-message,
body.cs-auth-page .woocommerce-info {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 14px 16px 14px 44px !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) and (max-width: 1136px) {
    body.cs-auth-page .cs-account-page-container,
    body.cs-auth-page .cs-account-page-content {
        width: calc(100% - 64px) !important;
        max-width: none !important;
    }

    body.cs-auth-page .cs-auth-layout {
        grid-template-columns: minmax(0, 1fr) 350px !important;
        column-gap: 24px !important;
    }

    body.cs-auth-page .cs-auth-right {
        width: 350px !important;
        max-width: 350px !important;
        min-width: 350px !important;
    }

    body.cs-auth-page .cs-auth-title {
        font-size: 31px !important;
    }

    body.cs-auth-page .cs-auth-panel form.woocommerce-form {
        padding: 30px 30px 28px !important;
    }
}

@media (max-width: 767px) {
    body.cs-auth-page .cs-account-page-container,
    body.cs-auth-page .cs-account-page-content {
        width: calc(100% - 40px) !important;
        max-width: none !important;
    }

    body.cs-auth-page .cs-account-page-content {
        padding-top: 24px !important;
        padding-bottom: 60px !important;
    }

    body.cs-auth-page .cs-auth-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    body.cs-auth-page .cs-auth-left,
    body.cs-auth-page .cs-auth-right {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.cs-auth-page .cs-auth-title {
        font-size: 29px !important;
    }

    body.cs-auth-page .cs-auth-visual {
        aspect-ratio: 16 / 10 !important;
        border-radius: 15px !important;
    }

    body.cs-auth-page .cs-auth-tabs {
        margin-bottom: 13px !important;
    }

    body.cs-auth-page .cs-auth-panel form.woocommerce-form {
        padding: 25px 20px 24px !important;
        border-radius: 17px !important;
    }

    body.cs-auth-page .cs-auth-panel input.input-text,
    body.cs-auth-page .cs-auth-panel input[type="text"],
    body.cs-auth-page .cs-auth-panel input[type="email"],
    body.cs-auth-page .cs-auth-panel input[type="password"] {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 390px) {
    body.cs-auth-page .cs-account-page-container,
    body.cs-auth-page .cs-account-page-content {
        width: calc(100% - 32px) !important;
    }

    body.cs-auth-page .cs-auth-panel form.woocommerce-form {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
}

/* =========================================================
   CS-AUTH-CANONICAL-END
   ========================================================= */