<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<style>
	.account-content {
		max-width: 100vw;
		display: flex;
		padding: 24px 40px;
		box-sizing: border-box;
		height: max-content;
		color: #333;
	}

	.account-sidebar {
		width: 250px;
		background-color: #ffffff;
		border-right: 1px solid #ddd;
		display: flex;
		flex-direction: column;
		padding-top: 20px;
		box-sizing: border-box;
	}

	.account-menu-item {
		padding: 15px 20px;
		box-sizing: border-box;
		cursor: pointer;
		border-left: 4px solid transparent;
		transition: all 0.3s ease;
		text-decoration: none;
		color: #333;
	}

	.account-menu-item:hover {
		background-color: #f5f5f5;
	}

	.account-menu-item.active {
		border-right: 4px solid #7A4397;
		background-color: #f5ebf9;
	}

	.account-menu-content {
		flex: 1;
		max-width: 100%;
		overflow-x: hidden;
		padding: 20px;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.account-menu-content h1 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.account-profile-container {
		background: #fff;
		box-sizing: border-box;
		/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	}

	.account-shipping-container {
		background: #fff;
		box-sizing: border-box;
		/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	}

	.account-password-container {
		background: #fff;
		box-sizing: border-box;
	}

	.account-order-container {
		background: #fff;
		box-sizing: border-box;
	}

	.account-point-container {
		background: #fff;
		box-sizing: border-box;
	}

	.account-wishlist-container {
		background: #fff;
		box-sizing: border-box;
	}

	.account-affiliate-container {
		background: #fff;
		box-sizing: border-box;
	}

	.account-form-group {
		margin-bottom: 15px;
	}

	.account-form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
		color: #333;
	}

	.account-form-group input,
	.account-form-group select {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
	}

	.account-form-group input:focus,
	.account-form-group select:focus {
		border-color: #7A4397;
		outline: none;
	}

	.account-form-group small {
		display: block;
		margin-top: 5px;
		color: #888;
		font-size: 12px;
	}

	.account-form-actions {
		text-align: right;
		margin-top: 20px;
	}

	.account-btn {
		padding: 10px 20px;
		background-color: #7A4397;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.account-btn:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.account-btn:hover:not(:disabled) {
		background-color: #693582;
	}

	.account-alert-container {
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 12px;
	}

	.account-alert-container.success {
		background-color: #d4edda;
		border-color: #c3e6cb;
		color: #155724;
	}

	.account-alert-container.error {
		background-color: #f8d7da;
		border-color: #f5c6cb;
		color: #721c24;
	}

	.account-field-error {
		color: #dc3545;
		font-size: 0.875em;
		margin-top: 4px;
	}

	input.error {
		border-color: #dc3545;
	}

	.required {
		color: #dc3545;
		margin-left: 4px;
	}

	.alert-info {
		background-color: #c3e6cb;
		padding: 12px;
	}

	/* Transaction History */
	.order-search-bar {
		margin-bottom: 20px;
		width: 100%;
	}

	.order-search-bar input {
		width: 100%;
		padding: 12px 15px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 12px;
		outline: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		box-sizing: border-box;

	}

	.order-search-bar input:focus {
		border-color: #7A4397;
	}


	.order-filter-buttons {
		display: flex;
		gap: 10px;
		margin-bottom: 20px;
		align-items: center;
		overflow-x: auto;
		white-space: nowrap;
		padding: 10px 0;
		scrollbar-width: thin;
		scrollbar-color: #7A4397 #ddd;
	}

	.order-filter-buttons::-webkit-scrollbar {
		height: 6px;
	}

	.order-filter-buttons::-webkit-scrollbar-thumb {
		background: #7A4397;
		/* Warna thumb */
		border-radius: 3px;
	}

	.order-filter-buttons::-webkit-scrollbar-track {
		background: #ddd;
	}

	.order-filter-title {
		position: relative;
		font-size: 14px;
		margin: 0;
		padding: 4px 12px;
		font-weight: 700;
		line-height: 22px;
		flex-shrink: 0;
		/* Mencegah elemen menyusut */
	}

	.order-filter-btn {
		padding: 8px 16px;
		border: none;
		background: #fff;
		border: 1px solid #ddd;
		color: #333;
		cursor: pointer;
		border-radius: 5px;
		font-size: 14px;
		text-align: center;
		line-height: 18px;
		height: 40px;
		flex-shrink: 0;
		transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	}

	.order-filter-btn.active {
		background-color: #7A4397;
		color: #fff;
		border-color: #7A4397;
	}

	/* Claim Warranty */
	.claim-warranty-list {
		list-style: none;
		padding: 12px;
	}

	.claim-warranty-item {
		background: #fff;
		padding: 16px;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.claim-warranty-header {
		display: flex;
		gap: 12px;
		margin-bottom: 8px;
		align-items: center;
	}

	.claim-warranty-id {
		color: rgba(49, 53, 59, 0.68);
		font-size: 14px;
		font-weight: 400;
	}

	.claim-warranty-date {
		font-size: 14px;
		font-weight: 400;
	}

	.claim-warranty-status {
		padding: 0 12px;
		border-radius: 3px;
		font-size: 14px;
		font-weight: 700;
		text-transform: capitalize;
		/* Membuat teks dimulai dengan huruf kapital */
	}

	.claim-warranty-detail {
		display: flex;
		flex-direction: column;
		/* Menyusun item secara vertikal */
		padding: 10px;
		border-bottom: 1px solid #e0e0e0;
		gap: 10px;
	}

	.claim-warranty-item-name,
	.claim-warranty-reasons,
	.claim-warranty-video {
		font-size: 14px;
		font-weight: 600;
		color: #333;
		margin-bottom: 5px;
	}

	.claim-warranty-video a {
		color: #7A4397;
		text-decoration: none;
	}

	.claim-warranty-video a:hover {
		text-decoration: underline;
	}

	.claim-warranty-status.proses-analisa {
		color: #856404;
		/* Teks gelap */
		background-color: #fff3cd;
		/* Kuning cerah */
	}

	.claim-warranty-status.disetujui {
		color: #155724;
		/* Teks hijau gelap */
		background-color: #d4edda;
		/* Hijau lembut */
	}

	.claim-warranty-status.ditolak {
		color: #721c24;
		/* Teks merah gelap */
		background-color: #f8d7da;
		/* Merah lembut */
	}

	.claim-warranty-status.terkirim-produk {
		color: #004085;
		/* Teks biru gelap */
		background-color: #cce5ff;
		/* Biru muda */
	}

	.claim-warranty-status.terkirim-voucher {
		color: #004085;
		/* Teks biru gelap */
		background-color: #cce5ff;
		/* Biru muda */
	}

	.claim-warranty-status.disetujui-voucher {
		color: #155724;
		/* Teks hijau gelap */
		background-color: #d4edda;
		/* Hijau lembut */
	}

	.claim-warranty-status.unknown {
		color: #1b1f36;
		/* Teks gelap */
		background-color: #ffd700;
		/* Kuning terang */
	}

	/* Wishlist */
	.wishlist-list {
		list-style: none;
		padding: 12px;
	}

	.wishlist-item {
		background: #fff;
		padding: 16px;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 5px;
		transition: opacity 0.3s ease-out;
	}

	.wishlist-header {
		display: flex;
		gap: 12px;
		margin-bottom: 8px;
		align-items: center;
	}

	.wishlist-id {
		color: rgba(49, 53, 59, 0.68);
		font-size: 14px;
		font-weight: 400;
	}

	.wishlist-date {
		font-size: 14px;
		font-weight: 400;
	}

	.wishlist-detail {
		display: flex;
		align-items: flex-start;
		padding: 10px;
		border-bottom: 1px solid #e0e0e0;
		gap: 15px;
	}

	.wishlist-product-thumbnail {
		width: 125px;
		height: 125px;
		object-fit: cover;
		border-radius: 8px;
	}

	.wishlist-product-details {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		gap: 4px;
	}

	.wishlist-item-name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 5px;
	}

	.wishlist-item-name a {
		cursor: pointer;
		color: #333;
		text-decoration: none;
	}

	.wishlist-item-variant {
		font-size: 14px;
		color: #777;
	}

	.wishlist-remove-btn {
		width: max-content;
		border: none;
		background-color: #ffffff;
		color: #7A4397;
		font-size: 14px;
		border-radius: 5px;
		cursor: pointer;
		font-weight: 700;
	}

	.wishlist-remove-btn svg {
		width: 20px;
		height: 20px;
	}

	.wishlist-remove-btn svg.loading {
		animation: spin 1s infinite linear;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.wishlist-actions {
		margin-top: 15px;
		display: flex;
		gap: 16px;
		margin-left: auto;
		justify-content: flex-end;
	}

	.wishlist-add-to-cart-btn {
		width: 175px;
		border: none;
		background-color: #7A4397;
		color: #fff;
		font-size: 14px;
		padding: 10px;
		border-radius: 5px;
		cursor: pointer;
		font-weight: 700;
	}

	.empty-wishlist {
		text-align: center;
		padding: 40px 20px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
		margin: 15px 0;
	}

	.empty-wishlist-text {
		color: #777;
		font-size: 14px;
		margin: 0;
	}

	.order-history__list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	/* Order Card */
	.order-card {
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		margin-bottom: 1.5rem;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: box-shadow 0.2s ease;
	}

	.order-card:hover {
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	/* Order Header */
	.order-card__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 1.5rem;
		background: #f9fafb;
		border-bottom: 1px solid #e5e7eb;
	}

	.order-card__meta {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.order-card__date {
		font-size: 0.875rem;
		font-weight: 500;
		color: #374151;
	}

	.order-card__id {
		font-size: 0.75rem;
		color: #6b7280;
	}

	.order-card__status {
		padding: 0.5rem 0.75rem;
		border-radius: 4px;
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.025em;
	}

	/* Status Colors */
	.order-card__status--pending {
		color: #92400e;
		background-color: #fef3c7;
	}

	.order-card__status--unpaid {
		color: #991b1b;
		background-color: #fee2e2;
	}

	.order-card__status--batal {
		color: #ffffff;
		background-color: #dc2626;
	}

	.order-card__status--paid {
		color: #065f46;
		background-color: #d1fae5;
	}

	.order-card__status--processed {
		color: #0c4a6e;
		background-color: #dbeafe;
	}

	.order-card__status--sent {
		color: #1e40af;
		background-color: #dbeafe;
	}

	.order-card__status--halfpaid {
		color: #92400e;
		background-color: #fed7aa;
	}

	.order-card__status--selesai {
		color: #fff;
		background-color: #10b981;
	}

	.order-card__status--complain {
		color: #1f2937;
		background-color: #fbbf24;
	}

	/* Order Items */
	.order-card__items {
		padding: 1rem 1.5rem;
	}

	.order-item {
		display: flex;
		gap: 1rem;
		padding: 1rem 0;
		border-bottom: 1px solid #f3f4f6;
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.order-item__image {
		flex-shrink: 0;
	}

	.order-item__thumbnail {
		width: 80px;
		height: 80px;
		object-fit: cover;
		border-radius: 6px;
		border: 1px solid #e5e7eb;
	}

	.order-item__details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.order-item__name {
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
		color: #111827;
		line-height: 1.4;
	}

	.order-item__link {
		color: inherit;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.order-item__link:hover {
		color: #7A4397;
	}

	.order-item__quantity {
		margin: 0;
		font-size: 0.875rem;
		color: #6b7280;
	}

	.order-item__actions {
		margin-top: 0.5rem;
	}

	.review-completed {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.75rem;
		color: #059669;
		font-weight: 500;
		padding: 0.375rem 0.75rem;
		background-color: #d1fae5;
		border-radius: 4px;
		justify-content: center;
		box-sizing: border-box;
	}

	/* Order Footer */
	.order-card__footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 1.5rem;
		background: #f9fafb;
		border-top: 1px solid #e5e7eb;
	}

	.order-card__total {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.order-card__total-info {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.order-card__toggle-detail {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: none;
		border: none;
		color: #7A4397;
		font-size: 0.75rem;
		cursor: pointer;
		padding: 0;
		transition: color 0.2s ease;
	}

	.order-card__toggle-detail:hover {
		color: #66357a;
	}

	.order-card__toggle-icon {
		transition: transform 0.2s ease;
	}

	.order-card__toggle-icon.rotated {
		transform: rotate(180deg);
	}

	.order-card__total-label {
		font-size: 0.875rem;
		color: #6b7280;
	}

	.order-card__total-amount {
		font-size: 1.125rem;
		font-weight: 700;
		color: #111827;
	}

	.order-card__actions {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.order-card__processing-text,
	.order-card__claim-text {
		display: inline-flex;
		font-size: 0.875rem;
		color: #6b7280;
		font-style: italic;
	}

	/* Button System */
	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		border-radius: 6px;
		font-size: 0.875rem;
		font-weight: 500;
		text-decoration: none;
		border: 1px solid transparent;
		cursor: pointer;
		transition: all 0.2s ease;
		white-space: nowrap;
	}

	.btn-icon {
		width: 1rem;
		height: 1rem;
		margin-right: 4px;
	}

	.btn--primary {
		background-color: #7A4397;
		color: #ffffff;
		border-color: #7A4397;
	}

	.btn--primary:hover {
		background-color: #66357a;
		border-color: #66357a;
	}

	.btn--secondary {
		background-color: #f3f4f6;
		color: #374151;
		border-color: #d1d5db;
	}

	.btn--secondary:hover {
		background-color: #e5e7eb;
		border-color: #9ca3af;
	}

	.btn--outline {
		background-color: transparent;
		color: #7A4397;
		border-color: #7A4397;
	}

	.btn--outline:hover {
		background-color: #7A4397;
		color: #ffffff;
	}

	.btn--small {
		padding: 0.375rem 0.75rem;
		font-size: 0.75rem;
	}

	/* Order Details */
	.order-card__details {
		border-top: 1px solid #e5e7eb;
		background: #fefefe;
	}

	.order-details {
		padding: 1.5rem;
	}

	.order-details__title {
		margin: 0 0 1rem 0;
		font-size: 1rem;
		font-weight: 600;
		color: #374151;
	}

	.order-details__grid {
		display: grid;
		gap: 0.75rem;
	}

	.order-details__item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0;
		border-bottom: 1px solid #f3f4f6;
	}

	.order-details__item:last-child {
		border-bottom: none;
	}

	.order-details__label {
		font-size: 0.875rem;
		color: #6b7280;
	}

	.order-details__icon {
		width: 14px;
		height: 14px;
		margin-right: 4px;
		vertical-align: middle;
	}

	.order-details__value {
		font-size: 0.875rem;
		font-weight: 500;
		color: #111827;
	}

	.order-details__value--discount {
		color: #dc2626;
	}

	.order-details__value--reward {
		color: #059669;
	}

	/* Responsive Design */
	@media (max-width: 768px) {

		.order-card__header {
			padding: 1rem;
		}

		.order-card__items,
		.order-card__footer {
			padding: 1rem;
		}

		.order-item {
			flex-direction: column;
			gap: 0.75rem;
		}

		.order-item__image {
			align-self: flex-start;
		}

		.order-item__thumbnail {
			width: 100px;
			height: 100px;
		}

		.order-card__footer {
			flex-direction: column;
			align-items: flex-start;
			gap: 1rem;
		}

		.order-item__actions {
			width: 100%;
			box-sizing: border-box;
		}

		.order-item__actions .btn {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
		}

		.order-card__actions {
			width: 100%;
			justify-content: flex-start;
		}

		.btn {
			flex: 1;
			justify-content: center;
			min-width: 0;
		}
	}

	@media (max-width: 480px) {
		.order-item__thumbnail {
			width: 60px;
			height: 60px;
		}

		.order-card__actions {
			flex-direction: column;
		}

		.btn {
			width: 100%;
		}
	}

	/* Modal Complain Container */
	.order_history_modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.order_history_modal.hidden {
		display: none;
	}

	/* Modal Box */
	.order_history_modal_box {
		background: #fff;
		border-radius: 8px;
		width: 90%;
		max-width: 450px;
		padding: 20px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
	}

	/* Modal Header */
	.order_history_modal_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		border-bottom: 1px solid #ddd;
		padding-bottom: 10px;
	}

	.order_history_modal_header h3 {
		margin: 0;
		font-size: 18px;
	}

	.order_history_modal_close {
		background: none;
		border: none;
		font-size: 20px;
		color: #555;
		cursor: pointer;
	}

	/* Form Styling */
	.order_history_form_group {
		margin-bottom: 15px;
	}

	.order_history_form_group label {
		font-weight: bold;
		display: block;
		margin-bottom: 5px;
	}

	.order_history_form_group input[type="text"],
	.order_history_form_group input[type="file"] {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.order_history_hint {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	/* Table Styling */
	.order_history_table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}

	.order_history_table th,
	.order_history_table td {
		padding: 10px;
		border: 1px solid #ddd;
		text-align: left;
	}

	.order_history_table th {
		background: #f5f5f5;
		font-weight: bold;
	}

	/* Submit Button */
	.order_history_btn_submit {
		display: inline-block;
		padding: 10px 15px;
		background-color: #FF5722;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		width: 100%;
	}

	.order_history_btn_submit:hover {
		background-color: #E64A19;
	}

	.order_history_item_row {
		vertical-align: middle;
	}

	.order_history_figure {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
	}

	.order_history_item_thumbnail {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		object-fit: cover;
	}

	.order_history_item_name {
		font-size: 14px;
		color: #333;
		margin: 0;
	}

	.order_history_quantity_input {
		width: 60px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.order_history_quantity_input:invalid {
		border-color: red;
		background-color: #ffe6e6;
	}

	.order_history_empty_row,
	.order_history_error_row {
		text-align: center;
		padding: 20px;
	}

	.order_history_empty_text,
	.order_history_error_text {
		font-size: 16px;
		color: #888;
	}

	/* Finish Order */
	.finish-order-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		visibility: hidden;
		opacity: 0;
	}

	.finish-order-modal.hidden {
		visibility: hidden;
		opacity: 0;
	}

	.finish-order-modal:not(.hidden) {
		visibility: visible;
		opacity: 1;
	}

	.finish-order-modal-content {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		width: 500px;
		position: relative;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.finish-order-modal-content h2 {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.5;
	}

	.finish-order-modal-content p {
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5;
	}

	.finish-order-close-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		color: #7A4397;
	}

	.finish-order-modal-actions {
		display: flex;
		margin-top: 20px;
		gap: 12px;
		justify-content: center;
	}

	.finish-order-confirm-btn {
		background-color: #7A4397;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		margin-right: 10px;
		transition: background-color 0.3s ease;
	}

	.finish-order-confirm-btn:hover {
		background-color: #6b3a84;
	}

	.finish-order-cancel-btn {
		/* background-color: #dc3545; */
		color: #333;
		padding: 10px 20px;
		box-sizing: border-box;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.finish-order-cancel-btn:hover {
		background-color: #c82333;
		color: white;
	}

	/* Confirmation Modal Styles */
	/* Confirmation Modal Styles */
	.confirm-payment-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		visibility: hidden;
		opacity: 0;
	}

	.confirm-payment-modal:not(.hidden) {
		visibility: visible;
		opacity: 1;
	}

	.confirm-payment-modal-content {
		background-color: #fff;
		padding: 20px;
		max-width: 600px;
		width: 80%;
		max-height: 80vh;
		overflow-y: auto;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		position: relative;
		overflow-x: hidden;
	}

	.confirm-payment-close-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
		border: none;
		background: none;
		cursor: pointer;
		color: #7A4397;
	}

	.confirm-payment-close-btn:hover {
		color: #8B4EAB;
	}

	.confirm-payment-modal-content h2 {
		font-size: 1.5rem;
		margin-bottom: 15px;
	}

	.confirm-payment-modal-content p {
		margin-bottom: 20px;
	}

	.confirm-payment-form-group {
		margin-bottom: 20px;
	}

	.confirm-payment-form-group label {
		font-weight: bold;
		display: block;
		margin-bottom: 5px;
	}

	.confirm-payment-form-group input,
	.confirm-payment-form-group select {
		width: 100%;
		padding: 10px;
		font-size: 1rem;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.confirm-payment-form-group input[type="file"] {
		padding: 5px;
	}

	.file-tip {
		font-size: 12px;
		font-style: italic;
		color: #777;
	}

	.confirm-payment-submit-btn {
		background-color: #7A4397;
		color: white;
		padding: 10px 20px;
		font-size: 1rem;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		width: 100%;
	}

	.confirm-payment-submit-btn:hover {
		background-color: #8B4EAB;
	}

	/* Transaction Mobile */
	@media screen and (max-width: 768px) {
		.order-filter-buttons {
			gap: 5px;
			flex-wrap: nowrap;
			overflow-x: auto;
		}

		.transaction-product-thumbnail {
			width: 75px;
			height: 75px;
		}

		.transaction-detail {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		.transaction-product-details {
			align-items: flex-start;
			text-align: left;
		}

		.transaction-header span {
			display: block;
			margin-bottom: 5px;
		}

		.transaction-actions {
			flex-wrap: wrap;
			justify-content: center;
			gap: 8px;
			margin-top: 12px;
		}

		.transaction-actions button {
			width: 100%;
			/* Full width buttons on mobile */
			padding: 10px;
			font-size: 14px;
		}
	}

	/* Point and Rewards */
	.point-search-bar {
		margin-bottom: 20px;
		width: 100%;
	}

	.point-search-bar input {
		width: 100%;
		padding: 12px 15px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 12px;
		outline: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		box-sizing: border-box;

	}

	.point-search-bar input:focus {
		border-color: #7A4397;
	}


	.point-list {
		list-style: none;
		padding: 0;
	}

	.point-item {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 15px;
		margin-bottom: 10px;
		transition: background-color 0.3s;
	}

	.point-item:hover {
		background-color: #f9f9f9;
	}

	.point-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
	}

	.point-details p {
		margin: 5px 0;
	}

	@media (max-width: 600px) {
		.point-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.point-id {
			margin-top: 5px;
		}
	}

	/* Affiliate */
	.choice-container {
		text-align: center;
		margin: 20px auto;
		max-width: 600px;
	}

	.choice-container h2 {
		font-size: 24px;
		color: rgb(122, 67, 151);
		margin-bottom: 20px;
	}

	.choice-grid {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.choice-box {
		flex: 1 1 45%;
		background-color: white;
		border: 2px solid rgb(122, 67, 151);
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		transition: transform 0.3s, box-shadow 0.3s;
		cursor: pointer;
	}

	.choice-box.active {
		background-color: rgb(122, 67, 151);
		color: white;
		/* border: 2px solid white; */
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	}

	.choice-box.active h3 {
		color: white;
		margin: 0 0 10px;
	}

	.choice-box.active p {
		color: white;
	}

	.choice-box:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	}

	.choice-box h3 {
		color: rgb(122, 67, 151);
		margin: 0 0 10px;
	}

	.choice-box p {
		color: #666;
	}

	#asmarasana-content {
		display: none;
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		font-size: 16px;
		color: #333;
		line-height: 1.8;
		margin-top: 20px;
	}

	#asmarasana-content p {
		margin: 0;
		font-size: 16px;
		line-height: 1.8;
		color: #333;
		text-align: justify;
		text-justify: inter-word;
	}

	#asmarasana-content a.cta-link {
		color: #7A4397;
		font-weight: bold;
		text-decoration: none;
	}

	#asmarasana-content a.cta-link:hover {
		text-decoration: underline;
	}

	#asmaradoor-content {
		display: none;
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		font-size: 16px;
		color: #333;
		line-height: 1.8;
		margin-top: 20px;
	}

	#asmaradoor-content p {
		margin: 0;
		font-size: 16px;
		line-height: 1.8;
		color: #333;
		text-align: justify;
		text-justify: inter-word;
	}

	#asmaradoor-content h2 {
		font-size: 22px;
		color: #7A4397;
		margin-bottom: 15px;
	}

	#asmaradoor-content ul {
		padding-left: 20px;
		margin-bottom: 20px;
		list-style: none;
	}

	#asmaradoor-content ul li {
		margin-bottom: 10px;
		font-size: 16px;
		color: #444;
	}

	#asmaradoor-content ul li strong {
		color: #7A4397;
	}

	#asmaradoor-content a.cta-link {
		color: #7A4397;
		font-weight: bold;
		text-decoration: none;
	}

	#asmaradoor-content a.cta-link:hover {
		text-decoration: underline;
	}


	/* Progress Container Styles */
	.progress-container {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 900px;
		margin: 2rem auto;
		padding: 0 1rem;
	}

	/* Progress Step Styles */
	.progress-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		flex: 0 1 250px;
		position: relative;
	}

	/* Icon Styles */
	.progress-icon {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1rem;
		transition: all 0.3s ease;
	}

	.progress-icon svg {
		width: 24px;
		height: 24px;
		stroke: #666;
		stroke-width: 2;
		transition: all 0.3s ease;
	}

	/* Active State Styles */
	.progress-step.active .progress-icon {
		background-color: #7A4397;
		color: white;
	}

	.progress-step.active .progress-icon svg {
		stroke: white;
	}

	/* Title and Description Styles */
	.progress-title {
		margin: 0 0 0.5rem 0;
		font-size: 1rem;
		font-weight: 600;
		color: #333;
	}

	.progress-desc {
		margin: 0;
		font-size: 0.875rem;
		color: #666;
		max-width: max-content;
	}

	/* Progress Line Styles */
	.progress-line {
		flex: 1;
		height: 2px;
		background-color: #f0f0f0;
		position: relative;
		margin: 0 1rem;
	}

	.progress-line-inner {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #7A4397;
		width: 0;
		transition: width 0.3s ease;
	}

	/* Active Progress Line */
	.progress-step.active+.progress-line .progress-line-inner {
		width: 100%;
	}

	.terms-checkbox {
		margin: 1.5rem 0;
	}

	.custom-control {
		position: relative;
		padding-left: 1.5rem;
		line-height: 1.5;
	}

	.custom-control-input {
		position: absolute;
		left: 0;
		z-index: -1;
		width: 1rem;
		height: 1rem;
		opacity: 0;
	}

	.custom-control-label {
		position: relative;
		margin-bottom: 0;
		vertical-align: top;
		cursor: pointer;
	}

	.custom-control-label::before {
		position: absolute;
		top: 0.25rem;
		left: -1.5rem;
		display: block;
		width: 1rem;
		height: 1rem;
		content: "";
		background-color: #fff;
		border: 1px solid #adb5bd;
		border-radius: 0.25rem;
	}

	.custom-control-label::after {
		position: absolute;
		top: 0.25rem;
		left: -1.5rem;
		display: block;
		width: 1rem;
		height: 1rem;
		content: "";
		background: no-repeat 50% / 50% 50%;
	}

	.custom-control-input:checked~.custom-control-label::before {
		color: #fff;
		border-color: #7A4397;
		background-color: #7A4397;
	}

	.custom-control-input:checked~.custom-control-label::after {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
	}

	.terms-text {
		font-size: 0.9rem;
	}

	.terms-link {
		color: #7A4397;
		text-decoration: none;
		margin-left: 0.5rem;
		font-size: 0.9rem;
	}

	.terms-link:hover {
		text-decoration: underline;
	}

	.affiliate-regist-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		/* Background lebih gelap untuk kontras */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		/* Pastikan modal berada di atas elemen lainnya */
		transition: opacity 0.3s ease, visibility 0.3s ease;
		visibility: hidden;
		opacity: 0;
		overflow-y: auto;
	}

	.affiliate-regist-modal:not(.hidden) {
		visibility: visible;
		opacity: 1;
	}

	.affiliate-regist-modal-content {
		background-color: #fff;
		padding: 20px;
		max-width: 80%;
		width: 600px;
		max-height: 80vh;
		overflow-y: auto;
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		position: relative;
	}

	.affiliate-regist-close-btn {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 18px;
		border: none;
		background: none;
		cursor: pointer;
		color: #333;
	}


	.affiliate-regist-close-btn:hover {
		color: #555;
	}

	.terms-link {
		color: #7A4397;
		text-decoration: underline;
		cursor: pointer;
	}

	.terms-link:hover {
		color: #8B4EAB;
	}


	.affiliate-regist-modal-footer {
		text-align: right;
		padding: 15px;
		border-top: 1px solid #ddd;
		background-color: #f9f9f9;
	}

	.affiliate-regist-modal-footer .btn {
		padding: 10px 20px;
		font-size: 14px;
	}

	/* Dashboard tabs */
	.tabs {
		margin-top: 20px;
		border-bottom: 1px solid #ddd;
	}

	.tab-buttons {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		padding-bottom: 10px;
	}

	.tab-btn {
		border: none;
		background: none;
		padding: 10px 5px;
		cursor: pointer;
		color: #666;
		position: relative;
		font-size: 16px;
		white-space: nowrap;
	}

	.tab-btn.active {
		color: #7A4397;
		font-weight: 600;
	}

	.tab-btn.active::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 0;
		width: 100%;
		height: 2px;
		background: #7A4397;
	}

	.tab-content {
		display: none;
		padding: 12px 0;
		line-height: 1.6;
	}

	.tab-content a {
		color: #7A4397;
		text-decoration: none;
	}

	.tab-content.active {
		display: block;
	}


	.summary-container {
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.summary-container h2 {
		font-size: 1.5rem;
		margin-bottom: 20px;
		color: #333;
		text-align: center;
	}

	.summary-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
	}

	.summary-card {
		padding: 15px;
		background: white;
		border-radius: 8px;
		text-align: center;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.summary-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.summary-card h3 {
		font-size: 1rem;
		color: #555;
	}

	.summary-card p {
		font-size: 1.5rem;
		font-weight: bold;
		margin: 10px 0;
		color: #7A4397;
	}

	.summary-card small {
		font-size: 0.9rem;
		color: #555;
	}


	/* Styling untuk Container Filter dan Grafik */
	.filter-container {
		margin: 20px 0;
		display: flex;
		flex-direction: row;
		gap: 20px;
		max-width: 1000px;
		margin: 0 auto;
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;
	}

	/* Styling untuk Input Tanggal */
	.filter-container input[type="date"] {
		padding: 10px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 4px;
		width: 200px;
		transition: border-color 0.3s;
	}

	.filter-container input[type="date"]:focus {
		border-color: #7A4397;
		outline: none;
	}

	/* Styling untuk Tombol Filter */
	.filter-container button {
		padding: 12px 20px;
		background-color: #7A4397;
		color: white;
		font-size: 16px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s;
		width: 150px;
	}

	.filter-container button:hover {
		background-color: #7A4397;
	}

	/* Styling untuk Container Grafik */
	.chart-container {
		margin-top: 30px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	#affiliateClicksChart {
		width: 100%;
		height: 400px;
		/* Menyesuaikan tinggi grafik */
		max-width: 100%;
	}


	.referred-container {
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.referred-container h2 {
		font-size: 1.5rem;
		margin-bottom: 20px;
		color: #333;
		text-align: center;
	}

	.referred-grid {
		display: grid;
		width: 250px;
		gap: 20px;
	}

	.referred-card {
		padding: 15px;
		background: white;
		border-radius: 8px;
		text-align: center;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.referred-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.referred-card h3 {
		font-size: 1.2rem;
		color: #555;
	}

	.referred-card p {
		font-size: 1.5rem;
		font-weight: bold;
		margin: 10px 0;
		color: #7A4397;
	}

	.referred-card small {
		font-size: 0.9rem;
		color: #555;
	}

	/* Container styles */
	.referred-customers-container {
		max-width: 1000px;
		margin: 20px auto;
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	/* Header styles */
	.referred-customers-container h2 {
		font-size: 24px;
		text-align: center;
		margin-bottom: 20px;
		color: #333;
	}

	/* Search bar styles */
	.referred-search-container {
		text-align: center;
		margin-bottom: 20px;
	}

	#referred-search {
		padding: 8px 12px;
		width: 80%;
		max-width: 400px;
		border-radius: 5px;
		border: 1px solid #ccc;
		font-size: 16px;
		margin-bottom: 15px;
	}

	#referred-search:focus {
		outline: none;
		border-color: #7A4397;
	}

	/* List styles */
	.referred-list {
		list-style-type: none;
		padding: 0;
	}

	.referred-customer-item {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ddd;
		transition: background-color 0.3s ease;
	}

	.referred-customer-item:hover {
		background-color: #f1f1f1;
	}

	.referred-customer-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.referred-customer-name {
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.referred-customer-email {
		font-size: 14px;
		color: #555;
	}

	.referred-customer-join-date {
		font-size: 14px;
		color: #888;
	}

	/* Table */
	.table-container {
		overflow-x: auto;
		margin-top: 20px;
	}

	#referred-table {
		width: 100%;
		border-collapse: collapse;
		text-align: left;
		background-color: #ffffff;
	}

	#referred-table thead th {
		background-color: #7A4397;
		color: #fff;
		padding: 12px;
		cursor: pointer;
		text-transform: capitalize;
		font-size: 14px;
	}

	#referred-table tbody td {
		padding: 12px;
		border-bottom: 1px solid #ddd;
	}

	#referred-table tbody tr:nth-child(odd) {
		background-color: #f9f9f9;
	}

	#referred-table tbody tr:hover {
		background-color: #f1f1f1;
	}

	#referred-table thead th.sort-asc::after {
		content: '▲';
		margin-left: 5px;
		font-size: 10px;
	}

	#referred-table thead th.sort-desc::after {
		content: '▼';
		margin-left: 5px;
		font-size: 10px;
	}

	/* Styling untuk Responsivitas */
	@media (max-width: 768px) {
		.filter-container {
			flex-direction: column;
			max-width: 100%;
			padding: 15px;
		}

		.filter-container input[type="date"],
		.filter-container button {
			width: 100%;
			max-width: none;
		}
	}

	/* Styling untuk Shadow dan Hover Effect */
	.summary-card {
		transition: transform 0.3s ease-in-out;
	}

	.summary-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	}

	.commission_alert {
		display: flex;
		align-items: center;
		padding: 15px;
		margin: 20px 0;
		border-radius: 8px;
		font-family: Arial, sans-serif;
		font-size: 14px;
		background-color: #f8f9fa;
		color: #212529;
	}

	/* Warning Style */
	.commission_alert_warning {
		border: 1px solid #ffc107;
		background-color: #fff3cd;
		color: #856404;
	}

	/* Icon Style */
	.commission_alert_icon {
		font-size: 20px;
		margin-right: 10px;
		color: #ffc107;
	}

	.commission_alert_icon svg {
		width: 20px;
		height: 20px;
	}

	/* Content Style */
	.commission_alert_content p {
		margin: 0;
		line-height: 1.5;
	}

	.commission_alert_close {
		background: none;
		border: none;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		margin-left: auto;
		color: #856404;
	}

	.commission_alert_close:hover {
		color: #5a3705;
	}

	.commission_copy_btn {
		background-color: #4CAF50;
		/* Warna hijau */
		color: white;
		padding: 8px 10px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		margin-left: 10px;
		font-size: 14px;
	}

	.commission_copy_btn:hover {
		background-color: #45a049;
	}

	input[readonly] {
		border: 1px solid #ccc;
		padding: 5px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.btn-view-proof {
		background-color: #7A4397;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
	}

	.btn-view-proof:hover {
		background-color: #5d2e73;
		transform: scale(1.05);
	}

	.btn-view-proof:focus {
		outline: none;
		box-shadow: 0 0 5px rgba(122, 67, 151, 0.5);
	}

	.btn-view-proof:disabled {
		background-color: #ccc;
		cursor: not-allowed;
		opacity: 0.6;
	}


	.proof-modal {
		display: none;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.proof-modal-content {
		position: relative;
		margin: 10% auto;
		padding: 0;
		width: 80%;
		max-width: 600px;
		background-color: white;
		border-radius: 8px;
		text-align: center;
		overflow: hidden;
	}

	.proof-modal-close {
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 24px;
		font-weight: bold;
		color: #333;
		cursor: pointer;
	}

	.proof-modal-close:hover {
		color: red;
	}

	.proof-modal-content img {
		width: 80%;
		max-width: 100%;
		max-height: 100%;
		margin: 0 auto;
		padding: 12px;
	}

	/* Responsive */
	@media screen and (max-width: 768px) {
		.account-content {
			padding: 16px;

		}

		.account-sidebar {
			display: none;
		}

		.account-menu-item {
			padding: 16px 24px;
			font-size: 16px;
		}

		.account-menu-content {
			padding: 8px;
		}

		.account-point-container {
			box-sizing: border-box;
		}

		/* Wishlist */
		.wishlist-list {
			padding: 0;
		}

		.claim-warranty-list {
			padding: 0;
		}

		.claim-warranty-item {
			padding: 12px;
		}

		.claim-warranty-detail {
			padding: 0;
		}

		.referred-container,
		.referred-customers-container {
			padding: 0;
		}

		.commission_alert {
			font-size: 12px;
			flex-direction: column;
			text-align: center;
		}

		.commission_alert_icon {
			margin-bottom: 10px;
		}

		.progress-container {
			flex-direction: column;
			gap: 1.5rem;
		}

		.progress-line {
			width: 2px;
			height: 40px;
			margin: 0;
		}

		.progress-step {
			width: 100%;
			flex: none;
		}

		.progress-desc {
			max-width: 250px;
		}

		.choice-grid {
			flex-direction: column;
		}

		.choice-box {
			flex: 1 1 100%;
		}
	}

	/* Shipping */
	.account-shipping-header {
		padding: 0;
	}

	.shipping-search-and-button {
		display: flex;
		gap: 1rem;
	}

	.shipping-search-box {
		position: relative;
		width: 100%;
		max-width: 500px;
	}

	.shipping-search-box input {
		box-sizing: border-box;
		width: 100%;
		padding: 12px 12px 12px 36px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 14px;
	}

	.shipping-search-icon {
		position: absolute;
		top: 50%;
		left: 12px;
		transform: translateY(-50%);
		color: #888;
		font-size: 18px;
		pointer-events: none;
	}

	.shipping-search-box input:focus {
		border-color: #7a4397;
	}

	.add-address-btn {
		background: #7a4397;
		color: white;
		border: none;
		padding: 12px 20px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		white-space: nowrap;
		margin-left: auto;
	}

	.add-address-btn:hover {
		background: #66357a;
		transform: translateY(-1px);
		box-shadow: 0 5px 10px rgba(122, 67, 151, 0.4);
	}

	/* Modal Overlay */
	.shipping-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	.shipping-modal-overlay.active {
		opacity: 1;
		visibility: visible;
	}

	/* Modal Container */
	.shipping-modal-container {
		background: white;
		border-radius: 8px;
		max-width: 800px;
		width: 100%;
		overflow: hidden;
		transform: scale(0.9);
		transition: transform 0.3s ease;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	}

	.shipping-modal-overlay.active .modal-container {
		transform: scale(1);
	}

	/* Modal Header */
	.shipping-modal-header {
		background: linear-gradient(135deg, #7a4397, #9c4db4);
		color: white;
		padding: 16px;
		text-align: center;
		position: relative;
	}

	.shipping-modal-header h2 {
		font-size: 24px;
		font-weight: 600;
		margin: 0;
	}

	.shipping-close-btn {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(255, 255, 255, 0.2);
		border: none;
		color: white;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		cursor: pointer;
		font-size: 16px;
		transition: all 0.3s ease;
	}

	.close-btn:hover {
		background: rgba(255, 255, 255, 0.3);
	}

	/* Progress Bar */
	.shipping-progress-container {
		padding: 24px;
		background: #f8f9fa;
	}

	.shipping-progress-bar {
		display: flex;
		justify-content: space-between;
		position: relative;
		gap: 10px;
	}

	.step-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
		z-index: 2;
		gap: 12px;
	}

	.shipping-progress-line {
		position: absolute;
		top: 25px;
		left: 0;
		right: 0;
		height: 3px;
		background: #e0e0e0;
		z-index: 1;
	}

	.shipping-progress-line-fill {
		height: 100%;
		background: linear-gradient(135deg, #7a4397, #9c4db4);
		width: 0%;
		transition: width 0.5s ease;
	}

	.shipping-step {
		background: white;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 16px;
		position: relative;
		z-index: 2;
		border: 3px solid #e0e0e0;
		color: #666;
		transition: all 0.3s ease;
	}

	.shipping-step.active {
		background: linear-gradient(135deg, #7a4397, #9c4db4);
		color: white;
		border-color: #7a4397;
	}

	.shipping-step.completed {
		background: linear-gradient(135deg, #7a4397, #9c4db4);
		color: white;
		border-color: #7a4397;
	}

	.shipping-step-labels {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.shipping-step-label {
		text-align: center;
		font-size: 12px;
		color: #666;
		font-weight: 500;
	}

	.shipping-step-label.active {
		color: #7a4397;
		font-weight: 600;
	}

	/* Modal Content */
	.shipping-modal-content {
		padding: 24px;
		max-height: 60vh;
		overflow-y: auto;
	}

	.shipping-step-content {
		display: none;
	}

	.shipping-step-content.active {
		display: block;
	}

	/* Step 1: Search Location */
	.shipping-search-location {
		text-align: left;
	}

	.shipping-search-location h3 {
		color: #333;
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: 800;
	}

	.shipping-search-input-group {
		position: relative;
		margin-bottom: 20px;
	}

	.shipping-search-input-group input {
		width: 100%;
		padding: 15px;
		border: 2px solid #e0e0e0;
		border-radius: 10px;
		font-size: 16px;
		outline: none;
		transition: border-color 0.3s ease;
		box-sizing: border-box;
	}

	.shipping-search-input-group input:focus {
		border-color: #7a4397;
	}

	.shipping-current-location-btn {
		background-color: white;
		width: 100%;
		box-sizing: border-box;
		color: #333;
		border: 1px solid #e0e0e0;
		padding: 12px 24px;
		border-radius: 10px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}

	.pac-container {
		z-index: 9999 !important;
	}

	/* Step 2: Map */
	.shipping-map-container {
		text-align: left;
	}

	.shipping-map-container h3 {
		color: #333;
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: 800;
	}

	#map {
		width: 100%;
		height: 300px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	/* Step 3: Address Details */
	.shipping-address-details h3 {
		color: #333;
		margin-bottom: 20px;
		font-size: 16px;
		margin-top: 0;
	}

	.shipping-form-group {
		margin-bottom: 20px;
	}

	.shipping-form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: 600;
		color: #333;
	}

	.shipping-form-group input,
	.shipping-form-group textarea {
		width: 100%;
		padding: 12px;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		font-size: 14px;
		outline: none;
		transition: border-color 0.3s ease;
		box-sizing: border-box;
	}

	.shipping-form-group input:focus,
	.shipping-form-group textarea:focus {
		border-color: #7a4397;
	}

	.shipping-form-group textarea {
		resize: vertical;
		min-height: 80px;
	}

	.shipping-form-row {
		display: flex;
		gap: 15px;
	}

	.shipping-form-row .shipping-form-group {
		flex: 1;
	}

	.shipping-checkbox-group {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 20px;
	}

	.shipping-checkbox-group input[type="checkbox"] {
		width: auto;
		margin: 0;
	}

	.shipping-checkbox-group label {
		margin: 0;
		font-weight: normal;
		cursor: pointer;
	}

	/* Modal Footer */
	.shipping-modal-footer {
		padding: 24px 30px;
		border-top: 1px solid #e0e0e0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shipping-btn {
		padding: 12px 24px;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.3s ease;
		font-weight: 600;
	}

	.shipping-btn-secondary {
		background: #6c757d;
		color: white;
	}

	.shipping-btn-secondary:hover {
		background: #5a6268;
	}

	.shipping-btn-primary {
		background: linear-gradient(135deg, #7a4397, #9c4db4);
		color: white;
	}

	.shipping-btn-primary:hover {
		background: linear-gradient(135deg, #6a3387, #8c3da4);
		transform: translateY(-2px);
	}

	.shipping-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.pac-container {
		width: 47% !important;
		box-sizing: border-box !important;
		margin-top: 0px !important;
	}

	.shipping-address-list {
		display: grid;
		gap: 1.5rem;
		margin-top: 1rem;
	}

	.shipping-empty-state {
		text-align: center;
		padding: 4rem 2rem;
		background: #f8f9fa;
		border-radius: 12px;
		border: 2px dashed #e0e0e0;
	}

	.shipping-empty-icon {
		font-size: 4rem;
		color: #ccc;
		margin-bottom: 1rem;
	}

	.shipping-empty-state h3 {
		color: #666;
		margin-bottom: 0.5rem;
		font-size: 1.5rem;
	}

	.shipping-empty-state p {
		color: #888;
		margin-bottom: 2rem;
		font-size: 1rem;
	}

	.shipping-address-card {
		background: white;
		border: 1.5px solid #f0f0f0;
		border-radius: 12px;
		padding: 1rem;
		transition: all 0.3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.shipping-address-card.default {
		background: rgba(122, 67, 151, 0.08);
		border-color: rgba(122, 67, 151, 0.2);
	}

	.shipping-address-card:hover {
		border-color: #7a4397;
		box-shadow: 0 4px 20px rgba(122, 67, 151, 0.1);
		transform: translateY(-2px);
	}

	.shipping-address-header {
		margin-bottom: 1rem;
	}

	.shipping-address-label {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.shipping-label-text {
		font-weight: 700;
		font-size: 12px;
		color: #333;
	}

	.shipping-default-badge {
		background: #d1d5db;
		color: #333;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	.shipping-address-body {
		margin-bottom: 16px;
	}

	.shipping-recipient-info {
		margin-bottom: 1rem;
	}

	.shipping-recipient-name,
	.shipping-recipient-phone {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: #666;
		font-size: 14px;
		margin-bottom: 0.5rem;
	}

	.shipping-recipient-name i,
	.shipping-recipient-phone i {
		color: #7a4397;
		width: 14px;
		font-size: 12px;
	}

	.shipping-recipient-name span,
	.shipping-recipient-phone span {
		font-weight: 600;
		color: #333;
	}

	.shipping-full-address {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
	}

	.shipping-full-address>i {
		color: #7a4397;
		margin-top: 0.25rem;
		font-size: 14px;
	}

	.shipping-address-text {
		flex: 1;
	}

	.shipping-address-main {
		font-weight: 500;
		color: #333;
		margin-bottom: 0.5rem;
		line-height: 1.5;
		font-size: 12px;
	}

	.shipping-address-notes {
		margin-top: 0.5rem;
	}

	.shipping-address-notes small {
		color: #888;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 12px;
	}

	.shipping-address-notes i {
		color: #7a4397;
	}

	.shipping-address-footer {
		display: flex;
		gap: 1rem;
	}

	.shipping-btn-card {
		padding: 0;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.3s ease;
		font-size: 14px;
		border: none;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.shipping-btn-edit {
		background: transparent;
		color: #7a4397;
	}

	.shipping-btn-outline {
		background: transparent;
		color: #7a4397;
	}

	.shipping-address-footer .shipping-btn-card+.shipping-btn-card {
		position: relative;
		padding-left: 1rem;
	}

	.shipping-address-footer .shipping-btn-card+.shipping-btn-card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 100%;
		background-color: #d1d5db;
	}

	/* Responsive */
	@media (max-width: 768px) {
		.add-address-btn {
			width: 100%;
		}

		.shipping-progress-container,
		.shipping-modal-footer,
		.shipping-modal-content {
			padding: 16px;
		}

		.shipping-modal-container {
			width: 100%;
		}

		.shipping-modal-header h2 {
			font-size: 20px;
		}

		.shipping-close-btn {
			width: 24px;
			height: 24px;
			font-size: 12px;
		}

		.shipping-search-input-group input {
			padding: 12px;
			border: 1px solid #e0e0e0;
			font-size: 14px;
		}

		.shipping-step {
			width: 40px;
			height: 40px;
			font-size: 14px;
		}

		.shipping-address-details h3,
		.shipping-map-container h3,
		.shipping-search-location h3 {
			font-size: 16px;
		}

		.shipping-step-label {
			font-size: 10px;
		}

		.shipping-form-row {
			flex-direction: column;
		}

		.shipping-modal-footer {
			gap: 10px;
		}

		.shipping-search-and-button {
			flex-direction: column;
			align-items: center;
		}

		.pac-container {
			width: 82% !important;
			box-sizing: border-box !important;
		}

		.shipping-btn {
			padding: 8px 16px;
			font-size: 12px;
		}

		#map {
			height: 150px;
		}

		.shipping-address-card {
			padding: 1rem;
		}

		.shipping-label-text {
			font-size: 11px;
		}

		.shipping-recipient-name,
		.shipping-recipient-phone {
			font-size: 13px;
		}

		.shipping-address-main {
			font-size: 11px;
		}

		.shipping-address-notes small {
			font-size: 11px;
		}

		.shipping-address-footer {
			flex-direction: column;
			gap: 0.75rem;
		}

		.shipping-btn-card {
			padding: 8px 16px;
			border-radius: 8px;
			font-size: 12px;
			width: 100%;
		}

		.shipping-btn-edit,
		.shipping-btn-outline {
			border: 1px solid #7a4397;
			padding: 12px 24px;
			border-radius: 8px;
		}

		.shipping-address-label {
			gap: 0.5rem;
		}

		.shipping-default-badge {
			font-size: 11px;
		}
	}
</style>
<main class="account-content">

	<?= Modules::run('myaccount_menu'); ?>

	<div class="account-menu-content">
		<?= $this->load->view($content_view, [], true); ?>
	</div>
</main>
<script>
	const menuItems = document.querySelectorAll('.account-menu-item');
	const contentSections = document.querySelectorAll('.content-section');

	menuItems.forEach(item => {
		item.addEventListener('click', () => {
			menuItems.forEach(i => i.classList.remove('active'));
			item.classList.add('active');

			contentSections.forEach(section => section.style.display = 'none');
			const contentId = item.getAttribute('data-content');
			document.getElementById(contentId).style.display = 'block';
		});
	});
</script>