/* ============================================
   DEX.CSS - Custom Styles
   ============================================ */

/* My Account Dropdown */
.header-top-right { position: relative; z-index: 9999; }
.my-account-dropdown {position: relative;display: inline-block;z-index: 9999;}
/* Mobile Account Icon */
.mobile-account-icon {position: relative;display: inline-block;margin-right: 15px;z-index: 1000;}
.mobile-account-link {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;color: #333;text-decoration: none;border-radius: 50%;background: #f8f9fa;transition: all 0.3s ease;font-size: 18px;border: 1px solid #ddd;}
.mobile-account-link:hover {background: #00a1b1;color: #fff;border-color: #00a1b1;}
.mobile-account-link i {font-size: 18px;}
.mobile-account-dropdown {position: absolute;top: 100%;right: 0;margin-top: 10px;background: #fff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);min-width: 320px;max-width: 90vw;z-index: 99999;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;}
.mobile-account-dropdown.show {opacity: 1;visibility: visible;transform: translateY(0);}
.mobile-account-dropdown::before {content: '';position: absolute;top: -8px;right: 20px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #fff;}
@media (max-width: 991px) {
  .mobile-menu-right {display: flex;align-items: center;gap: 10px;}
  .mobile-account-icon {display: block;}
}
@media (min-width: 992px) {
  .mobile-account-icon {display: none;}
}
.my-account-link {display: flex;align-items: center;gap: 8px;color: #fff;text-decoration: none;padding: 8px 15px;border-radius: 4px;transition: all 0.3s ease;font-size: 14px;font-weight: 500;}
.my-account-link:hover {background-color: rgba(255, 255, 255, 0.1);color: #fff;}
.my-account-link i {font-size: 18px;}
.account-dropdown-menu {position: absolute;top: 100%;right: 0;margin-top: 10px;background: #fff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);min-width: 350px;z-index: 99999;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;}
.account-dropdown-menu.show {opacity: 1;visibility: visible;transform: translateY(0);}
.account-dropdown-menu::before {content: '';position: absolute;top: -8px;right: 30px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #fff;}
.account-login-form {padding: 25px 25px;}
.account-login-form .form-group {position: relative;margin-bottom: 20px;}
.account-login-form .form-group label {display: block;color: #666;font-size: 13px;margin-bottom: 8px;font-weight: 500;}
.account-login-form .form-group input[type="email"],.account-login-form .form-group input[type="password"] {width: 100%;padding: 10px 35px 10px 0;border: none;border-bottom: 1px solid #ddd;font-size: 14px;color: #333;background: transparent;transition: border-color 0.3s ease;}
.account-login-form .form-group input:focus {outline: none;border-bottom-color: #20b2aa;}
.account-login-form .form-icon {position: absolute;right: 0;bottom: 12px;color: #999;font-size: 16px;}
.account-login-form .g-recaptcha {margin: 10px 0;display: flex;justify-content: center;}
.account-login-form .g-recaptcha > div {margin: 0 auto;}
.account-login-form .alert {padding: 10px;margin-bottom: 15px;border-radius: 4px;font-size: 12px;}
.account-login-form .alert-danger {background: #f8d7da;border: 1px solid #f5c6cb;color: #721c24;}
.form-options {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;font-size: 12px;}
.forgot-password-link {color: #666;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.forgot-password-link:hover {color: #20b2aa;}
.remember-me {display: flex;align-items: center;gap: 6px;color: #666;cursor: pointer;margin: 0;}
.remember-me input[type="checkbox"] {width: 16px;height: 16px;cursor: pointer;accent-color: #20b2aa;}
.btn-login {width: 100%;padding: 12px;background: #ff6b35;color: #fff;border: none;border-radius: 4px;font-size: 14px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: background 0.3s ease;margin-bottom: 15px;}
.btn-login:hover {background: #e55a2b;}
.register-link {display: flex;align-items: center;justify-content: center;gap: 8px;color: #666;text-decoration: none;font-size: 13px;font-weight: 500;text-transform: uppercase;margin-bottom: 15px;transition: color 0.3s ease;}
.register-link:hover {color: #20b2aa;}
.register-link i {font-size: 14px;}
.social-login {display: flex;flex-direction: column;gap: 10px;margin-top: 15px;padding-top: 15px;border-top: 1px solid #eee;}
.btn-social {width: 100%;padding: 10px;border: none;border-radius: 4px;font-size: 13px;font-weight: 500;text-transform: uppercase;cursor: pointer;transition: opacity 0.3s ease;color: #fff;}
.btn-social:hover {opacity: 0.9;}
.btn-google {background: #db4437;}
.btn-facebook {background: #4267B2;}
/* Account User Info (When Logged In) */
.account-user-info {padding: 20px;}
.user-welcome {display: flex;align-items: center;gap: 15px;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #eee;}
.user-welcome i {font-size: 40px;color: #00a1b1;}
.user-details h5 {font-size: 16px;font-weight: 600;color: #333;margin: 0 0 5px 0;}
.user-details p {font-size: 13px;color: #666;margin: 0;}
.account-menu-links {display: flex;flex-direction: column;gap: 0;}
.account-menu-link {display: flex;align-items: center;gap: 5px;padding: 5px 15px;color: #333;text-decoration: none;font-size: 14px;font-weight: 500;transition: all 0.3s ease;border-radius: 4px;margin-bottom: 5px;}
.account-menu-link:hover {background: #f8f9fa;color: #00a1b1;}
.account-menu-link i {font-size: 16px;color: #00a1b1;width: 20px;text-align: center;}
.account-menu-link.logout-btn {color: #e74c3c;border-top: 1px solid #eee;margin-top: 10px;padding-top: 15px;}
.account-menu-link.logout-btn:hover {background: #fff5f5;color: #c0392b;}
.account-menu-link.logout-btn i {color: #e74c3c;}
/* Responsive */
@media (max-width: 768px) {.account-dropdown-menu {min-width: 300px;right: -50px;}.account-dropdown-menu::before {right: 60px;}}

/* ============================================
   REGISTER PAGE
   ============================================ */
.register-area {padding: 60px 0;}
.register-wrapper {background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 40px 30px;max-width: 1000px;margin: 0 auto;}
.register-title {font-size: 28px;font-weight: 700;color: #333;margin-bottom: 25px;text-align: center;letter-spacing: 1px;}
.register-form {margin-bottom: 20px;}
.register-form .row {margin: 0 -10px;}
.register-form .col-lg-6 {padding: 0 10px;}
.form-section {margin-bottom: 20px;}
.section-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 15px;padding-bottom: 8px;border-bottom: 1px solid #ddd;text-transform: none;}
.form-group {margin-bottom: 15px;}
.form-label {display: block;color: #333;font-size: 14px;font-weight: 500;margin-bottom: 5px;}
.form-label .required {color: #e74c3c;margin-left: 2px;}
.register-input {width: 100%;padding: 8px 0;border: none;border-bottom: 1px solid #ddd;border-radius: 0;font-size: 14px;color: #333;background: transparent;transition: border-color 0.3s ease;}
.register-input:focus {outline: none;border-bottom-color: #333;border-bottom-width: 2px;}
.register-input::placeholder {color: #999;opacity: 0.6;}
.error-message {display: block;color: #e74c3c;font-size: 12px;margin-top: 3px;}
.form-submit {margin-top: 25px;text-align: center;}
.btn-register {padding: 12px 40px;background: #ff6b35;color: #fff;border: none;border-radius: 4px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: background 0.3s ease;letter-spacing: 0.5px;}
.btn-register:hover {background: #e55a2b;}
@media (max-width: 768px) {.register-wrapper {padding: 30px 20px;}.register-title {font-size: 24px;}.section-title {font-size: 14px;}.register-form .col-lg-6 {margin-bottom: 20px;}}

/* ============================================
   FORGOT PASSWORD PAGE
   ============================================ */
.forgot-password-area {padding: 80px 0;background: #f8f9fa;}
.forgot-password-wrapper {background: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 50px 40px;max-width: 600px;margin: 0 auto;position: relative;overflow: hidden;}
.forgot-password-wrapper::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #00a1b1 0%, #ff6b35 100%);}
.forgot-password-header {text-align: center;margin-bottom: 35px;}
.forgot-password-icon {width: 80px;height: 80px;margin: 0 auto 20px;background: linear-gradient(135deg, #00a1b1 0%, #008a98 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 15px rgba(0,161,177,0.3);}
.forgot-password-icon i {font-size: 36px;color: #fff;}
.forgot-password-title {font-size: 32px;font-weight: 700;color: #333;margin-bottom: 15px;letter-spacing: 0.5px;}
.forgot-password-subtitle {font-size: 15px;color: #666;line-height: 1.6;max-width: 450px;margin: 0 auto;}
.forgot-password-form {margin-bottom: 30px;}
.forgot-password-form .form-group {margin-bottom: 25px;}
.forgot-password-form .form-label {display: flex;align-items: center;gap: 8px;color: #333;font-size: 14px;font-weight: 600;margin-bottom: 10px;}
.form-label-icon {color: #00a1b1;font-size: 16px;}
.forgot-password-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.forgot-input {width: 100%;padding: 14px 18px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 15px;color: #333;background: #fafafa;transition: all 0.3s ease;}
.forgot-input:focus {outline: none;border-color: #00a1b1;background: #fff;box-shadow: 0 0 0 4px rgba(0,161,177,0.1);}
.forgot-input::placeholder {color: #999;opacity: 0.7;}
.forgot-password-form .error-message {display: flex;align-items: center;gap: 6px;color: #e74c3c;font-size: 13px;margin-top: 8px;font-weight: 500;}
.forgot-password-form .error-message i {font-size: 14px;}
.form-submit {margin-top: 30px;text-align: center;}
.btn-reset-password {width: 100%;padding: 16px 30px;background: linear-gradient(135deg, #00a1b1 0%, #008a98 100%);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(0,161,177,0.3);display: inline-flex;align-items: center;justify-content: center;gap: 8px;}
.btn-reset-password:hover {background: linear-gradient(135deg, #008a98 0%, #007a87 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,161,177,0.4);}
.btn-reset-password:active {transform: translateY(0);}
.forgot-password-footer {text-align: center;margin-top: 30px;padding-top: 25px;border-top: 1px solid #eee;}
.back-to-login {margin-bottom: 15px;}
.back-to-login a {display: inline-flex;align-items: center;gap: 6px;color: #00a1b1;text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s ease;}
.back-to-login a:hover {color: #008a98;}
.remember-password {font-size: 14px;color: #666;}
.remember-password a {color: #00a1b1;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.remember-password a:hover {color: #008a98;text-decoration: underline;}
.forgot-password-help {margin-top: 30px;padding: 20px;background: #f8f9fa;border-radius: 8px;border-left: 4px solid #00a1b1;display: flex;gap: 15px;align-items: flex-start;}
.help-icon {flex-shrink: 0;width: 40px;height: 40px;background: #00a1b1;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 18px;}
.help-content h5 {font-size: 15px;font-weight: 600;color: #333;margin-bottom: 8px;}
.help-content p {font-size: 13px;color: #666;line-height: 1.6;margin: 0;}
.help-content a {color: #00a1b1;text-decoration: none;font-weight: 500;}
.help-content a:hover {text-decoration: underline;}
.alert {padding: 15px 20px;border-radius: 8px;margin-bottom: 20px;display: flex;align-items: center;gap: 10px;font-size: 14px;line-height: 1.5;}
.alert-success {background: #d4edda;border: 1px solid #c3e6cb;color: #155724;}
.alert-danger {background: #f8d7da;border: 1px solid #f5c6cb;color: #721c24;}
.alert i {font-size: 18px;flex-shrink: 0;}
.alert ul {margin: 0;padding-left: 20px;}
.alert .btn-close {margin-left: auto;background: none;border: none;font-size: 18px;opacity: 0.5;cursor: pointer;transition: opacity 0.3s;}
.alert .btn-close:hover {opacity: 1;}
@media (max-width: 768px) {
  .forgot-password-wrapper {padding: 35px 25px;margin: 20px;}
  .forgot-password-title {font-size: 26px;}
  .forgot-password-subtitle {font-size: 14px;}
  .forgot-password-icon {width: 70px;height: 70px;}
  .forgot-password-icon i {font-size: 30px;}
  .forgot-input {padding: 12px 15px;font-size: 14px;}
  .btn-reset-password {padding: 14px 25px;font-size: 15px;}
  .forgot-password-help {flex-direction: column;text-align: center;}
  .help-icon {margin: 0 auto;}
  .profile-form .form-group { margin-bottom: 5px!important;}
  .products-page-header {padding: 0px 0!important;}

}

/* ============================================
   PRODUCT PAGES - Buy Now Button
   ============================================ */
.btn-buy-now {background: #00a1b1;color: #fff;border: none;}
.btn-buy-now:hover {background: #008a98;color: #fff;}
.d-flex.gap-2 {gap: 10px !important;justify-content: center;}
.d-flex.gap-2.flex-wrap {justify-content: center;gap: 8px !important;}
.product-detail-page .d-flex.gap-2 {justify-content: flex-start !important;}
/* Wishlist Button */
.wishlist-btn {background: #fff;color: #333;border: 2px solid #ddd;transition: all 0.3s ease;}
.wishlist-btn:hover {background: #f8f9fa;border-color: #e74c3c;color: #e74c3c;}
.wishlist-btn.btn-wishlist-active {background: #e74c3c;color: #fff;border-color: #e74c3c;}
.wishlist-btn.btn-wishlist-active:hover {background: #c0392b;border-color: #c0392b;}
.wishlist-btn i {margin-right: 5px;}
.wishlist-item-card {position: relative;}
.wishlist-image-wrapper {position: relative;}
.wishlist-remove-form {position: absolute;top: 10px;right: 10px;z-index: 10;}
.wishlist-remove-btn {background: rgba(255,255,255,0.95);border: none;border-radius: 50%;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 2px 8px rgba(0,0,0,0.15);padding: 0;margin: 0;}
.wishlist-remove-btn:hover {background: #e74c3c;transform: scale(1.1) rotate(90deg);box-shadow: 0 4px 12px rgba(231,76,60,0.4);}
.wishlist-remove-btn i {font-size: 18px;color: #e74c3c;transition: all 0.3s ease;}
.wishlist-remove-btn:hover i {color: #fff;transform: rotate(0deg);}
.products-grid .product-card-price{ text-align: center;justify-content: center;}

@media (max-width: 576px) {.d-flex.gap-2 {flex-direction: column;}.d-flex.gap-2 .theme-btn {width: 100%;}.product-taB{ padding-top:30px;}}

/* ============================================
   PRODUCT PRICE
   ============================================ */
.product-price {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;justify-content: flex-start;}
.product-detail-page .product-price {justify-content: flex-start;}
.original-price {color: #999;text-decoration: line-through;font-size: 14px;}
.current-price {color: #333;font-size: 18px;font-weight: 600;}
@media (max-width: 576px) {.current-price {font-size: 16px;}.original-price {font-size: 13px;}}

/* ============================================
   CART PAGE
   ============================================ */
.cart-progress {border-bottom: 1px solid #ddd;}
.progress-steps {gap: 20px;}
.step {display: flex;flex-direction: column;align-items: center;gap: 8px;}
.step-icon {width: 40px;height: 40px;border-radius: 50%;background: #ddd;display: flex;align-items: center;justify-content: center;color: #999;font-size: 18px;text-align: center;}
.step.active .step-icon {background: #00a1b1;color: #fff;}
.step-label {font-size: 12px;font-weight: 600;color: #666;text-transform: uppercase;}
.step.active .step-label {color: #00a1b1;}
.step-line {width: 100px;height: 2px;background: #ddd;margin: 0 10px;}
.cart-area {padding: 40px 0;}
.cart-table-responsive {overflow-x: auto;}
.cart-table {width: 100%;border-collapse: collapse;background: #fff;border-radius: 4px;overflow: hidden;}
.cart-table thead {background: #f8f9fa;}
.cart-table thead th {padding: 10px 10px;text-align: center;font-weight: 600;color: #333;font-size: 14px;border-bottom: 1px solid #ddd;}
.cart-table tbody td {padding: 10px 10px;border-bottom: 1px solid #eee;vertical-align: middle;}
.cart-product-img {width: 60px;height: 60px;object-fit: cover;border-radius: 4px;}
.cart-product-name {font-size: 14px;color: #333;line-height: 1.4;}
.btn-remove {background: none;border: none;color: #999;cursor: pointer;font-size: 16px;padding: 5px;transition: color 0.3s;}
.btn-remove:hover {color: #e74c3c;}
.cart-product-price,.cart-product-total {font-size: 16px;font-weight: 600;color: #333;}
.quantity-selector {display: flex;align-items: center;justify-content: center;gap: 5px;margin-bottom: 8px;}
.qty-btn {width: 30px;height: 30px;border: 1px solid #ddd;background: #fff;cursor: pointer;border-radius: 4px;display: flex;align-items: center;justify-content: center;font-size: 14px;color: #333;transition: all 0.3s;}
.qty-btn:hover {background: #00a1b1;color: #fff;border-color: #00a1b1;}
.qty-input {width: 50px;height: 30px;text-align: center;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;}
.update-link {display: block;text-align: center;font-size: 12px;color: #00a1b1;text-decoration: none;margin-top: 4px;border: 2px solid;border-radius: 5px;}
.update-link:hover {text-decoration: underline;}
.cart-actions {display: flex;gap: 10px;flex-wrap: wrap;}
.btn-cart-action {padding: 12px 20px;background: #6c757d;color: #fff;border: none;border-radius: 4px;font-size: 13px;font-weight: 500;cursor: pointer;transition: background 0.3s;text-decoration: none;display: inline-flex;align-items: center;gap: 8px;}
.btn-cart-action:hover {background: #5a6268;color: #fff;}
.cart-summary {background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 25px;position: sticky;top: 20px;}
.btn-estimate-shipping {width: 100%;padding: 12px;background: #6c757d;color: #fff;border: none;border-radius: 4px;font-size: 13px;font-weight: 500;cursor: pointer;margin-bottom: 20px;display: flex;align-items: center;justify-content: center;gap: 8px;}
.btn-estimate-shipping:hover {background: #5a6268;}
.order-details {border: 1px solid #eee;border-radius: 4px;padding: 20px;margin-bottom: 20px;}
.order-details-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #eee;}
.order-row {display: flex;justify-content: space-between;align-items: center;padding: 10px 0;border-bottom: 1px solid #f5f5f5;}
.order-row:last-child {border-bottom: none;}
.order-label {font-size: 14px;color: #666;}
.order-value {font-size: 14px;font-weight: 600;color: #333;}
.order-total .order-label,.order-total .order-value {font-size: 18px;font-weight: 700;color: #00a1b1;}
.checkout-btn-wrapper {margin-top: 20px;}
.btn-checkout {width: 100%;padding: 15px;background: #ff6b35;color: #fff;border: none;border-radius: 4px;font-size: 16px;font-weight: 600;text-transform: uppercase;text-align: center;text-decoration: none;display: block;transition: background 0.3s;}
.btn-checkout:hover {background: #e55a2b;color: #fff;}
@media (max-width: 992px) {.cart-summary {position: static;margin-top: 30px;}}
@media (max-width: 768px) {.cart-table thead th {font-size: 12px;padding: 10px 5px;}.cart-table tbody td {padding: 15px 5px;}.cart-product-img {width: 50px;height: 50px;}.cart-product-name {font-size: 12px;}.cart-actions {flex-direction: column;}.btn-cart-action {width: 100%;justify-content: center;}}

/* ============================================
   HEADER CART DROPDOWN
   ============================================ */
.cart-dropdown-wrapper {position: relative;}
.cart-btn-hover {position: relative;}
.cart-count-badge {position: absolute;top: -5px;right: -5px;background: #000000;color: #fff;border-radius: 50%;width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;font-size: 10px;font-weight: 600;}
.cart-dropdown-menu {position: absolute;top: calc(100% + 10px);right: 0;width: 350px;background: #fff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0,0,0,0.15);z-index: 99999;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: all 0.3s ease;}
.cart-dropdown-wrapper:hover .cart-dropdown-menu {opacity: 1;visibility: visible;transform: translateY(0);}
.cart-dropdown-header {background: #00a1b1;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;border-radius: 8px 8px 0 0;}
.cart-header-icon {position: relative;color: #fff;font-size: 20px;}
.cart-header-count {position: absolute;top: -8px;right: -8px;background: #fff;color: #00a1b1;border-radius: 50%;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 700;}
.cart-header-total {color: #fff;font-size: 18px;font-weight: 700;}
.cart-dropdown-content {padding: 15px;max-height: 400px;overflow-y: auto;}
.cart-item-mini {display: flex;gap: 12px;padding: 12px 0;border-bottom: 1px solid #eee;position: relative;}
.cart-item-mini:last-child {border-bottom: none;}
.cart-mini-img {width: 60px;height: 60px;object-fit: cover;border-radius: 4px;flex-shrink: 0;}
.cart-mini-details {flex: 1;min-width: 0;}
.cart-mini-name {font-size: 13px;color: #333;line-height: 1.4;margin-bottom: 5px;}
.cart-mini-price {font-size: 14px;font-weight: 600;color: #00a1b1;margin-bottom: 3px;}
.cart-mini-qty {font-size: 12px;color: #666;}
.cart-mini-remove {position: absolute;top: 12px;right: 0;background: none;border: none;color: #999;cursor: pointer;font-size: 14px;padding: 5px;transition: color 0.3s;}
.cart-mini-remove:hover {color: #e74c3c;}
.cart-dropdown-summary {margin-top: 15px;padding-top: 15px;border-top: 1px solid #eee;}
.cart-summary-row {display: flex;justify-content: space-between;align-items: center;font-size: 14px;}
.cart-summary-items {color: #666;display: flex;align-items: center;gap: 5px;}
.cart-summary-items i {font-size: 12px;}
.cart-summary-total {color: #333;font-weight: 600;}
.cart-summary-total strong {color: #00a1b1;font-size: 16px;}
.cart-dropdown-actions {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.btn-cart-checkout {
    padding: 12px;
    background: #ff6b35;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s;
    width: 50%;
}
.btn-cart-checkout:hover {background: #e55a2b;color: #fff;}
.btn-cart-goto {padding: 12px;background: #6c757d;color: #fff;border: none;border-radius: 4px;font-size: 14px;font-weight: 600;text-transform: uppercase;text-align: center;text-decoration: none;transition: background 0.3s;width: 50%;}
.btn-cart-goto:hover {background: #5a6268;color: #fff;}
@media (max-width: 768px) {.cart-dropdown-menu {width: 300px;right: -50px;}}

/* ============================================
   CHECKOUT PAGE
   ============================================ */
.checkout-area {padding: 40px 0;}
.checkout-form {margin-bottom: 30px;}
.checkout-section {background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 20px 30px 15px;margin-bottom: 15px;}
.section-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom:10px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.checkout-section .form-group {margin-bottom: 7px;}
.checkout-section .form-label {display: block;color: #333;font-size: 14px;font-weight: 500;margin-bottom: 5px;}
.checkout-section .form-label .required {color: #e74c3c;margin-left: 2px;}
.checkout-input {width: 100%;padding: 12px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;color: #333;transition: border-color 0.3s ease;}
.checkout-input:focus {outline: none;border-color: #00a1b1;box-shadow: 0 0 0 2px rgba(0,161,177,0.1);}
.checkout-input[type="select"],
.checkout-section select.checkout-input,
.checkout-section select {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;background-size: 12px;padding-right: 35px;cursor: pointer;}
.checkout-section select.checkout-input:focus {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300a1b1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");}
.checkout-section .error-message {display: block;color: #e74c3c;font-size: 12px;margin-top: 5px;}
.checkbox-label {display: flex;align-items: center;gap: 8px;cursor: pointer;font-size: 14px;color: #333;}
.checkbox-label input[type="checkbox"] {width: 18px;height: 18px;cursor: pointer;accent-color: #00a1b1;}
.payment-methods {display: flex;flex-direction: column;gap: 12px;}
.payment-option {display: flex;align-items: center;}
.payment-option input[type="radio"] {display: none;}
.payment-label {display: flex;align-items: center;gap: 12px;padding: 15px;border: 2px solid #ddd;border-radius: 4px;cursor: pointer;transition: all 0.3s;flex: 1;font-size: 14px;font-weight: 500;color: #333;}
.payment-label i {font-size: 18px;color: #00a1b1;}
.payment-option input[type="radio"]:checked + .payment-label {border-color: #00a1b1;background: rgba(0,161,177,0.05);}
.checkout-summary {background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 25px;position: sticky;top: 20px;}
.summary-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.order-items-list {margin-bottom: 20px;max-height: 300px;overflow-y: auto;}
.order-item-summary {display: flex;gap: 12px;padding: 15px 0;border-bottom: 1px solid #eee;}
.order-item-summary:last-child {border-bottom: none;}
.order-item-img {width: 60px;height: 60px;object-fit: cover;border-radius: 4px;flex-shrink: 0;}
.order-item-info {flex: 1;min-width: 0;}
.order-item-name {font-size: 13px;color: #333;line-height: 1.4;margin-bottom: 5px;}
.order-item-meta {font-size: 12px;color: #666;}
.order-item-price {font-size: 14px;font-weight: 600;color: #333;flex-shrink: 0;}
.order-totals {
    border-top: 2px solid #eee;
    padding-top: 10px;
    margin-bottom: 10px;
}
.total-row {display: flex;justify-content: space-between;align-items: center;padding: 10px 0;font-size: 14px;}
.total-label {color: #666;}
.total-value {color: #333;font-weight: 600;}
.total-final {border-top: 1px solid #eee;margin-top: 10px;padding-top: 15px;}
.total-final .total-label,.total-final .total-value {font-size: 18px;font-weight: 700;color: #00a1b1;}
.btn-place-order {width: 100%;padding: 15px;background: #ff6b35;color: #fff;border: none;border-radius: 4px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: background 0.3s;}
.btn-place-order:hover {background: #e55a2b;}
@media (max-width: 992px) {.checkout-summary {position: static;margin-top: 30px;}}
@media (max-width: 768px) {.checkout-section {padding: 20px;}.section-title {font-size: 16px;}}

/* ============================================
   PRODUCT PAGE - Filters & Grid
   ============================================ */
.products-page-area {padding: 40px 0;}
.products-page-header {padding: 20px 0;border-bottom: 1px solid #eee;}
.breadcrumb {background: transparent;padding: 0;margin-bottom: 10px;}
.breadcrumb-item a {color: #666;text-decoration: none;}
.breadcrumb-item.active {color: #333;}
.page-title {font-size: 24px;font-weight: 700;color: #333;margin: 0;text-transform: uppercase;}
.sort-wrapper {display: flex;align-items: center;gap: 10px;justify-content: flex-end;}
.sort-label {font-size: 14px;font-weight: 600;color: #333;margin: 0;}
.sort-select {padding: 8px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;color: #333;background: #fff;cursor: pointer;appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;background-size: 12px;padding-right: 35px;}
.product-filters-sidebar {background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);padding: 20px;position: sticky;top: 20px;}
.filter-mobile-header {display: none;justify-content: space-between;align-items: center;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 2px solid #eee;}
.btn-close-filters {background: none;border: none;font-size: 20px;color: #333;cursor: pointer;padding: 5px 10px;transition: color 0.3s;}
.btn-close-filters:hover {color: #e74c3c;}
.btn-toggle-filters {display: none;padding: 10px 20px;background: #00a1b1;color: #fff;border: none;border-radius: 4px;font-size: 14px;font-weight: 600;cursor: pointer;transition: background 0.3s;align-items: center;gap: 8px;}
.btn-toggle-filters:hover {background: #008a98;}
.btn-toggle-filters i {font-size: 14px;}
@media (max-width: 991px) {
  .col-lg-3 {position: static !important;}
  .product-filters-sidebar {position: fixed !important;top: 0 !important;left: -100% !important;width: 320px !important;max-width: 85vw !important;height: 100vh !important;z-index: 1001 !important;overflow-y: auto !important;transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;box-shadow: 2px 0 15px rgba(0,0,0,0.3) !important;padding: 20px !important;background: #fff !important;}
  .product-filters-sidebar.show {left: 0 !important;}
  .filter-mobile-header {display: flex !important;position: sticky;top: 0;background: #fff;z-index: 10;padding: 15px 0;margin: 0px 0px 15px -20px;padding-left: 20px;padding-right: 20px;box-shadow: none;}
  .btn-toggle-filters {display: inline-flex !important;visibility: visible !important;opacity: 1 !important;}
  body.filters-open {overflow: hidden !important;}
  body.filters-open::before {content: '' !important;position: fixed !important;top: 0 !important;left: 0 !important;right: 0 !important;bottom: 0 !important;background: rgba(0,0,0,0.6) !important;z-index: 1000 !important;animation: fadeIn 0.3s ease !important;}
}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
.filter-section {margin-bottom: 20px;border-bottom: 1px solid #eee;padding-bottom: 15px;}
.filter-section:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.filter-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}
.filter-title {font-size: 18px;font-weight: 700;color: #333;margin: 0;}
.btn-clear-filters {background: none;border: none;color: #00a1b1;font-size: 13px;cursor: pointer;text-decoration: underline;padding: 0;}
.filter-header-collapsible {display: flex;justify-content: space-between;align-items: center;cursor: pointer;padding: 10px 0;}
.filter-section-title {font-size: 14px;font-weight: 600;color: #333;margin: 0;text-transform: uppercase;}
.filter-arrow {font-size: 12px;color: #666;transition: transform 0.3s;}
.filter-header-collapsible.active .filter-arrow {transform: rotate(180deg);}
.filter-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
.filter-header-collapsible.active + .filter-content {max-height: 1000px;padding-top: 10px;}
.price-range-wrapper {padding: 10px 0;}
.price-inputs {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;}
.price-input {width: 80px;padding: 8px;border: 1px solid #ddd;border-radius: 4px;font-size: 13px;}
.price-separator {color: #666;}
.price-display {display: flex;justify-content: space-between;font-size: 13px;color: #666;margin-bottom: 15px;}
.price-slider {width: 100%;margin: 5px 0;}
.filter-checkboxes {display: flex;flex-direction: column;gap: 10px;}
.filter-checkbox-item {display: flex;align-items: center;gap: 10px;cursor: pointer;font-size: 13px;color: #333;}
.filter-checkbox-item input[type="checkbox"] {width: 16px;height: 16px;cursor: pointer;accent-color: #00a1b1;}
.checkbox-label {cursor: pointer;}
.products-grid {display: grid;}
.product-card {background: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);overflow: hidden;transition: transform 0.3s,box-shadow 0.3s;margin-bottom: 25px;}
.product-card:hover {transform: translateY(-5px);box-shadow: 0 4px 15px rgba(0,0,0,0.15);}
.product-image-wrapper {position: relative;overflow: hidden;background: #f8f9fa;text-align: center;}
.product-card-img {width: 100%;height: 200px;object-fit: cover;transition: transform 0.3s;}
.product-card:hover .product-card-img {transform: scale(1.05);}
.product-discount-badge {position: absolute;top: 10px;left: 10px;background: #ff6b35;color: #fff;padding: 5px 10px;border-radius: 4px;font-size: 11px;font-weight: 600;text-transform: uppercase;}
.product-card-info {padding: 10px;}
.product-card-title {font-size: 14px;font-weight: 600;color: #333;margin-bottom: 10px;line-height: 1.4;min-height: 40px; text-align: center;}
.product-card-title a {color: #333;text-decoration: none;transition: color 0.3s;}
.product-card-title a:hover {color: #00a1b1;}
.product-card-price {display: flex;align-items: center;gap: 10px;margin-bottom: 15px;justify-content: flex-start;}
.product-original-price {color: #999;text-decoration: line-through;font-size: 13px;}
.product-current-price {color: #333;font-size: 16px;font-weight: 700;}
.product-card-actions {display: flex;gap: 8px;flex-wrap: wrap;}
.btn-add-cart {flex: 1;padding: 10px 18px;background: #00a1b1;color: #fff;border: none;border-radius: 4px;font-size: 13px;font-weight: 600;text-align: center;text-decoration: none;transition: background 0.3s;cursor: pointer; width: -webkit-fill-available;}
.btn-add-cart:hover {background: #008a98;color: #fff;}
/* Added button success state - Green color (only color changes, size/padding inherit from original) */
.add-to-cart-btn.btn-success,
.theme-btn.btn-success,
.btn-add-cart.btn-success,
button.btn-success.add-to-cart-btn {
    background: #28a745 !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    border-radius: 4px !important;
    flex: 1 !important;
    width: -webkit-fill-available !important;
}
.add-to-cart-btn.btn-success:hover,
.theme-btn.btn-success:hover,
.btn-add-cart.btn-success:hover,
button.btn-success.add-to-cart-btn:hover {
    background: #218838 !important;
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
}
.btn-buy-now-card {flex: 1;padding: 10px;background: #ff6b35;color: #fff;border: none;border-radius: 4px;font-size: 13px;font-weight: 600;text-align: center;text-decoration: none;transition: background 0.3s;cursor: pointer;}
.btn-buy-now-card:hover {background: #e55a2b;color: #fff;}
.products-pagination {display: flex;justify-content: center;}
@media (max-width: 992px) {.products-grid {padding-left: 0;margin-top: 30px;}.product-filters-sidebar {position: static;}}
@media (max-width: 768px) {
  .page-title {font-size: 20px;}
  .sort-wrapper {flex-direction: inherit;align-items: flex-start;margin-top: 15px;}
  .product-card {margin-bottom: 20px;}
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-area {padding: 80px 0;background: #f8f9fa;}
.login-wrapper {background: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 20px 40px;max-width: 600px;margin: 0 auto;position: relative;overflow: hidden;}
.login-wrapper::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #00a1b1 0%, #ff6b35 100%);}
.login-header {text-align: center;margin-bottom: 35px;}
.login-icon {width: 80px;height: 80px;margin: 0 auto 20px;background: linear-gradient(135deg, #00a1b1 0%, #008a98 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 15px rgba(0,161,177,0.3);}
.login-icon i {font-size: 40px;color: #fff;}
.login-title {font-size: 32px;font-weight: 700;color: #333;margin-bottom: 10px;letter-spacing: 0.5px;}
.login-subtitle {font-size: 15px;color: #666;line-height: 1.6;}
.login-form {margin-bottom: 25px;}
.login-form .form-group {margin-bottom: 25px;}
.login-form .form-label {display: flex;align-items: center;gap: 8px;color: #333;font-size: 14px;font-weight: 600;margin-bottom: 10px;}
.login-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.password-input-wrapper {position: relative;}
.login-input {width: 100%;padding: 14px 45px 14px 18px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 15px;color: #333;background: #fafafa;transition: all 0.3s ease;}
.login-input:focus {outline: none;border-color: #00a1b1;background: #fff;box-shadow: 0 0 0 4px rgba(0,161,177,0.1);}
.login-input::placeholder {color: #999;opacity: 0.7;}
.toggle-password {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);cursor: pointer;color: #999;font-size: 18px;transition: color 0.3s ease;z-index: 10;}
.toggle-password:hover {color: #00a1b1;}
.login-form .error-message {display: flex;align-items: center;gap: 6px;color: #e74c3c;font-size: 13px;margin-top: 8px;font-weight: 500;}
.login-form .error-message i {font-size: 14px;}
.form-options {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 10px;}
.remember-me-checkbox {display: flex;align-items: center;gap: 8px;cursor: pointer;font-size: 14px;color: #666;margin: 0;}
.remember-me-checkbox input[type="checkbox"] {width: 18px;height: 18px;cursor: pointer;accent-color: #00a1b1;margin: 0;}
.remember-me-checkbox .checkmark {display: none;}
.remember-text {user-select: none;}
.forgot-password-link {color: #00a1b1;text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s ease;}
.forgot-password-link:hover {color: #008a98;text-decoration: underline;}
.form-submit {margin-top: 30px;text-align: center;}
.btn-login-submit {width: 100%;padding: 16px 30px;background: linear-gradient(135deg, #00a1b1 0%, #008a98 100%);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(0,161,177,0.3);display: inline-flex;align-items: center;justify-content: center;gap: 8px;}
.btn-login-submit:hover {background: linear-gradient(135deg, #008a98 0%, #007a87 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,161,177,0.4);}
.btn-login-submit:active {transform: translateY(0);}
.login-divider {position: relative;text-align: center;margin: 30px 0;color: #999;font-size: 14px;font-weight: 500;}
.login-divider::before {content: '';position: absolute;left: 0;top: 50%;width: 45%;height: 1px;background: #e0e0e0;}
.login-divider::after {content: '';position: absolute;right: 0;top: 50%;width: 45%;height: 1px;background: #e0e0e0;}
.login-divider span {background: #fff;padding: 0 15px;position: relative;z-index: 1;}
.otp-login-section {margin-top: 25px;padding-top: 25px;border-top: 1px solid #eee;}
.otp-title {font-size: 14px;font-weight: 600;color: #666;margin-bottom: 15px;text-align: center;text-transform: uppercase;letter-spacing: 0.5px;}
.otp-button-wrapper {display: flex;justify-content: center;}
.btn-otp-login {width: 100%;padding: 16px 30px;background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(255,107,53,0.3);display: inline-flex;align-items: center;justify-content: center;gap: 8px;text-decoration: none;}
.btn-otp-login:hover {background: linear-gradient(135deg, #e55a2b 0%, #d44a1b 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(255,107,53,0.4);color: #fff;}
.btn-otp-login:active {transform: translateY(0);}
.otp-link {display: flex;align-items: center;justify-content: center;gap: 8px;color: #666;text-decoration: none;font-size: 13px;font-weight: 500;text-transform: uppercase;margin-bottom: 0;transition: color 0.3s ease;padding: 0;border-top: 1px solid #eee;margin-top: 5px;padding-top: 5px;}
.otp-link:hover {color: #00a1b1;}
.otp-link i {font-size: 16px;}
.login-footer {margin-top: 25px;padding-top: 20px;border-top: 1px solid #eee;text-align: center;}
.login-footer p {font-size: 14px;color: #666;margin: 0;}
.login-footer a {color: #00a1b1;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.login-footer a:hover {color: #008a98;text-decoration: underline;}
.alert {padding: 15px 20px;border-radius: 8px;margin-bottom: 20px;display: flex;align-items: center;gap: 10px;font-size: 14px;line-height: 1.5;}
.alert-success {background: #d4edda;border: 1px solid #c3e6cb;color: #155724;}
.alert-danger {background: #f8d7da;border: 1px solid #f5c6cb;color: #721c24;}
.alert i {font-size: 18px;flex-shrink: 0;}
.alert ul {margin: 0;padding-left: 20px;}
.alert .btn-close {margin-left: auto;background: none;border: none;font-size: 18px;opacity: 0.5;cursor: pointer;transition: opacity 0.3s;}
.alert .btn-close:hover {opacity: 1;}
@media (max-width: 768px) {
  .login-wrapper {padding: 35px 25px;margin: 20px;}
  .login-title {font-size: 26px;}
  .login-subtitle {font-size: 14px;}
  .login-icon {width: 70px;height: 70px;}
  .login-icon i {font-size: 35px;}
  .login-input {padding: 12px 40px 12px 15px;font-size: 14px;}
  .btn-login-submit {padding: 14px 25px;font-size: 15px;}
  .form-options {flex-direction: column;align-items: flex-start;}
  .forgot-password-link {margin-top: 5px;}
  .btn-otp-login {padding: 14px 25px;font-size: 15px;}
  .account-menu-link {padding: 5px 0;}
}

/* ============================================
   OTP LOGIN PAGE
   ============================================ */
.otp-login-area {padding: 80px 0;background: #f8f9fa;}
.otp-login-wrapper {background: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 50px 40px;max-width: 600px;margin: 0 auto;position: relative;overflow: hidden;}
.otp-login-wrapper::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #ff6b35 0%, #e55a2b 100%);}
.otp-login-header {text-align: center;margin-bottom: 35px;}
.otp-login-icon {width: 80px;height: 80px;margin: 0 auto 20px;background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 15px rgba(255,107,53,0.3);}
.otp-login-icon i {font-size: 40px;color: #fff;}
.otp-login-title {font-size: 32px;font-weight: 700;color: #333;margin-bottom: 10px;letter-spacing: 0.5px;}
.otp-login-subtitle {font-size: 15px;color: #666;line-height: 1.6;}
.otp-step {margin-bottom: 25px;}
.otp-login-form,.otp-verify-form {margin-bottom: 25px;}
.otp-login-form .form-group,.otp-verify-form .form-group {margin-bottom: 25px;}
.otp-login-form .form-label,.otp-verify-form .form-label {display: flex;align-items: center;gap: 8px;color: #333;font-size: 14px;font-weight: 600;margin-bottom: 10px;}
.otp-login-form .form-label .required,.otp-verify-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.otp-input {width: 100%;padding: 14px 18px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 15px;color: #333;background: #fafafa;transition: all 0.3s ease;text-align: center;font-size: 18px;letter-spacing: 2px;}
.otp-input:focus {outline: none;border-color: #ff6b35;background: #fff;box-shadow: 0 0 0 4px rgba(255,107,53,0.1);}
.otp-input::placeholder {color: #999;opacity: 0.7;letter-spacing: 0;}
.form-text {display: block;color: #999;font-size: 12px;margin-top: 5px;}
.otp-input-group {display: flex;justify-content: center;margin-bottom: 10px;}
.otp-code-input {width: 200px;padding: 18px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 24px;font-weight: 700;color: #333;background: #fafafa;transition: all 0.3s ease;text-align: center;letter-spacing: 8px;font-family: 'Courier New', monospace;}
.otp-code-input:focus {outline: none;border-color: #ff6b35;background: #fff;box-shadow: 0 0 0 4px rgba(255,107,53,0.1);}
.otp-code-input::placeholder {letter-spacing: 0;color: #ccc;}
.otp-verify-header {text-align: center;margin-bottom: 25px;padding: 15px;background: #f0f8ff;border-radius: 8px;border-left: 4px solid #00a1b1;}
.otp-sent-info {display: flex;align-items: center;justify-content: center;gap: 10px;font-size: 14px;color: #666;}
.otp-sent-info i {font-size: 20px;}
.otp-sent-info strong {color: #333;font-weight: 600;}
.otp-resend-section {text-align: center;margin: 20px 0;}
.otp-resend-section p {font-size: 14px;color: #666;margin-bottom: 10px;}
.resend-otp-link {color: #ff6b35;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.resend-otp-link:hover {color: #e55a2b;text-decoration: underline;}
.otp-timer {font-size: 13px;color: #999;margin-top: 5px;}
.otp-timer #countdown {color: #ff6b35;font-weight: 600;}
.btn-send-otp,.btn-verify-otp {width: 100%;padding: 16px 30px;background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(255,107,53,0.3);display: inline-flex;align-items: center;justify-content: center;gap: 8px;}
.btn-send-otp:hover,.btn-verify-otp:hover {background: linear-gradient(135deg, #e55a2b 0%, #d44a1b 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(255,107,53,0.4);}
.btn-send-otp:active,.btn-verify-otp:active {transform: translateY(0);}
.otp-login-divider {position: relative;text-align: center;margin: 10px 0;color: #999;font-size: 14px;font-weight: 500;}
.otp-login-divider::before {content: '';position: absolute;left: 0;top: 50%;width: 45%;height: 1px;background: #e0e0e0;}
.otp-login-divider::after {content: '';position: absolute;right: 0;top: 50%;width: 45%;height: 1px;background: #e0e0e0;}
.otp-login-divider span {background: #fff;padding: 0 15px;position: relative;z-index: 1;}
.otp-login-footer {margin-top: 0;padding-top: 0;text-align: center;}
.back-to-login {margin-bottom: 15px;}
.back-to-login a {display: inline-flex;align-items: center;gap: 6px;color: #00a1b1;text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s ease;}
.back-to-login a:hover {color: #008a98;}
.register-link-section {font-size: 14px;color: #666;}
.register-link-section a {color: #00a1b1;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.register-link-section a:hover {color: #008a98;text-decoration: underline;}
.otp-help-section {margin-top: 10px;padding: 15px;background: #f8f9fa;border-radius: 8px;border-left: 4px solid #ff6b35;display: flex;gap: 10px;align-items: flex-start;}
.help-icon {flex-shrink: 0;width: 40px;height: 40px;background: #ff6b35;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 18px;}
.help-content h5 {font-size: 15px;font-weight: 600;color: #333;margin-bottom: 10px;}
.help-content ul {margin: 0;padding-left: 20px;font-size: 13px;color: #666;line-height: 1.8;}
.help-content ul li {margin-bottom: 5px;}
@media (max-width: 768px) {
  .otp-login-wrapper {padding: 35px 25px;margin: 20px;}
  .otp-login-title {font-size: 26px;}
  .otp-login-subtitle {font-size: 14px;}
  .otp-login-icon {width: 70px;height: 70px;}
  .otp-login-icon i {font-size: 35px;}
  .otp-input {padding: 12px 15px;font-size: 16px;}
  .otp-code-input {width: 100%;max-width: 250px;font-size: 20px;letter-spacing: 4px;}
  .btn-send-otp,.btn-verify-otp {padding: 14px 25px;font-size: 15px;}
  .otp-help-section {flex-direction: column;text-align: center;}
  .help-icon {margin: 0 auto;}
}

/* ============================================
   SEND OTP PAGE
   ============================================ */
.send-otp-area {padding: 80px 0;background: #f8f9fa;}
.send-otp-wrapper {background: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 50px 40px;max-width: 600px;margin: 0 auto;position: relative;overflow: hidden;}
.send-otp-wrapper::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #00a1b1 0%, #ff6b35 100%);}
.send-otp-header {text-align: center;margin-bottom: 35px;}
.send-otp-icon {width: 80px;height: 80px;margin: 0 auto 20px;background: linear-gradient(135deg, #00a1b1 0%, #008a98 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 15px rgba(0,161,177,0.3);}
.send-otp-icon i {font-size: 40px;color: #fff;}
.send-otp-title {font-size: 32px;font-weight: 700;color: #333;margin-bottom: 10px;letter-spacing: 0.5px;}
.send-otp-subtitle {font-size: 15px;color: #666;line-height: 1.6;}
.send-otp-form {margin-bottom: 25px;}
.send-otp-form .form-group {margin-bottom: 25px;}
.send-otp-form .form-label {display: flex;align-items: center;gap: 8px;color: #333;font-size: 14px;font-weight: 600;margin-bottom: 10px;}
.send-otp-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.send-otp-input {width: 100%;padding: 14px 18px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 15px;color: #333;background: #fafafa;transition: all 0.3s ease;text-align: center;font-size: 18px;letter-spacing: 2px;}
.send-otp-input:focus {outline: none;border-color: #00a1b1;background: #fff;box-shadow: 0 0 0 4px rgba(0,161,177,0.1);}
.send-otp-input::placeholder {color: #999;opacity: 0.7;letter-spacing: 0;}
.send-otp-form .error-message {display: flex;align-items: center;gap: 6px;color: #e74c3c;font-size: 13px;margin-top: 8px;font-weight: 500;}
.send-otp-form .error-message i {font-size: 14px;}
.btn-send-otp-page {width: 100%;padding: 16px 30px;background: linear-gradient(135deg, #00a1b1 0%, #008a98 100%);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(0,161,177,0.3);display: inline-flex;align-items: center;justify-content: center;gap: 8px;}
.btn-send-otp-page:hover {background: linear-gradient(135deg, #008a98 0%, #007a87 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,161,177,0.4);}
.btn-send-otp-page:active {transform: translateY(0);}
.send-otp-footer {margin-top: 25px;padding-top: 20px;border-top: 1px solid #eee;text-align: center;}
.send-otp-footer .back-to-login {margin-bottom: 10px;}
.send-otp-footer .back-to-login a,.send-otp-footer .back-to-email-login a {display: inline-flex;align-items: center;gap: 6px;color: #00a1b1;text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s ease;}
.send-otp-footer .back-to-login a:hover,.send-otp-footer .back-to-email-login a:hover {color: #008a98;}
@media (max-width: 768px) {
  .send-otp-wrapper {padding: 35px 25px;margin: 20px;}
  .send-otp-title {font-size: 26px;}
  .send-otp-subtitle {font-size: 14px;}
  .send-otp-icon {width: 70px;height: 70px;}
  .send-otp-icon i {font-size: 35px;}
  .send-otp-input {padding: 12px 15px;font-size: 16px;}
  .btn-send-otp-page {padding: 14px 25px;font-size: 15px;}
}

/* ============================================
   VERIFY OTP PAGE
   ============================================ */
.verify-otp-area {padding: 80px 0;background: #f8f9fa;}
.verify-otp-wrapper {background: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 50px 40px;max-width: 600px;margin: 0 auto;position: relative;overflow: hidden;}
.verify-otp-wrapper::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #ff6b35 0%, #e55a2b 100%);}
.verify-otp-header {text-align: center;margin-bottom: 35px;}
.verify-otp-icon {width: 80px;height: 80px;margin: 0 auto 20px;background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 15px rgba(255,107,53,0.3);}
.verify-otp-icon i {font-size: 40px;color: #fff;}
.verify-otp-title {font-size: 32px;font-weight: 700;color: #333;margin-bottom: 10px;letter-spacing: 0.5px;}
.verify-otp-subtitle {font-size: 15px;color: #666;line-height: 1.6;}
.otp-sent-info-box {text-align: center;margin-bottom: 25px;padding: 15px;background: #f0f8ff;border-radius: 8px;border-left: 4px solid #00a1b1;display: flex;align-items: center;justify-content: center;gap: 10px;font-size: 14px;color: #666;}
.otp-sent-info-box i {font-size: 20px;}
.otp-sent-info-box strong {color: #333;font-weight: 600;}
.verify-otp-form {margin-bottom: 25px;}
.verify-otp-form .form-group {margin-bottom: 25px;}
.verify-otp-form .form-label {display: flex;align-items: center;gap: 8px;color: #333;font-size: 14px;font-weight: 600;margin-bottom: 10px;}
.verify-otp-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.verify-otp-code-input {width: 200px;padding: 18px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 24px;font-weight: 700;color: #333;background: #fafafa;transition: all 0.3s ease;text-align: center;letter-spacing: 8px;font-family: 'Courier New', monospace;margin: 0 auto;display: block;}
.verify-otp-code-input:focus {outline: none;border-color: #ff6b35;background: #fff;box-shadow: 0 0 0 4px rgba(255,107,53,0.1);}
.verify-otp-code-input::placeholder {letter-spacing: 0;color: #ccc;}
.verify-otp-form .error-message {display: flex;align-items: center;gap: 6px;color: #e74c3c;font-size: 13px;margin-top: 8px;font-weight: 500;justify-content: center;}
.verify-otp-form .error-message i {font-size: 14px;}
.btn-verify-otp-page {width: 100%;padding: 16px 30px;background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(255,107,53,0.3);display: inline-flex;align-items: center;justify-content: center;gap: 8px;}
.btn-verify-otp-page:hover {background: linear-gradient(135deg, #e55a2b 0%, #d44a1b 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(255,107,53,0.4);}
.btn-verify-otp-page:active {transform: translateY(0);}
.verify-otp-footer {margin-top: 25px;padding-top: 20px;border-top: 1px solid #eee;text-align: center;}
.verify-otp-footer .back-to-login {margin-bottom: 10px;}
.verify-otp-footer .back-to-login a,.verify-otp-footer .back-to-email-login a {display: inline-flex;align-items: center;gap: 6px;color: #00a1b1;text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s ease;}
.verify-otp-footer .back-to-login a:hover,.verify-otp-footer .back-to-email-login a:hover {color: #008a98;}
@media (max-width: 768px) {
  .verify-otp-wrapper {padding: 35px 25px;margin: 20px;}
  .verify-otp-title {font-size: 26px;}
  .verify-otp-subtitle {font-size: 14px;}
  .verify-otp-icon {width: 70px;height: 70px;}
  .verify-otp-icon i {font-size: 35px;}
  .verify-otp-code-input {width: 100%;max-width: 250px;font-size: 20px;letter-spacing: 4px;}
  .btn-verify-otp-page {padding: 14px 25px;font-size: 15px;}
}

/* ============================================
   PROFILE PAGES
   ============================================ */
.profile-area {padding: 60px 0;background: #f8f9fa;}
.profile-sidebar {background: #09142b;border-radius: 8px;padding: 15px 15px;margin-bottom: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.profile-header {text-align: center;margin-bottom: 10px;padding-bottom: 20px;border-bottom: 1px solid rgba(255,255,255,0.2);}
.profile-picture-wrapper {margin-bottom: 15px;}
.profile-picture {width: 100px;height: 100px;margin: 0 auto;position: relative;background: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;border: 3px solid #e74c3c;box-shadow: 0 2px 8px rgba(0,0,0,0.1);overflow: hidden;}
.profile-picture i {font-size: 48px;color: #999;}
.profile-pic-img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
.edit-profile-pic {position: absolute;bottom: 0;right: 0;width: 32px;height: 32px;background: #e74c3c;border: 2px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 12px;cursor: pointer;transition: all 0.3s ease;}
.edit-profile-pic:hover {background: #c0392b;transform: scale(1.1);}
.profile-name {font-size: 18px;font-weight: 700;color: #fff;margin: 0;text-transform: uppercase;letter-spacing: 0.5px;}
.profile-menu {list-style: none;padding: 0;margin: 0;}
.profile-menu-item {display: flex;align-items: center;gap: 12px;padding: 15px 20px;color: #fff;text-decoration: none;border-radius: 4px;margin-bottom: 5px;transition: all 0.3s ease;position: relative;font-size: 14px;font-weight: 500;}
.profile-menu-item i {font-size: 18px;color: #fff;width: 20px;text-align: center;}
.profile-menu-item:hover {background: rgba(255,255,255,0.1);color: #fff;}
.profile-menu-item.active {background: rgba(255,255,255,0.15);color: #fff;border-left: 4px solid #e74c3c;padding-left: 16px;}
.profile-menu-item.logout-item {border-top: 1px solid rgba(255,255,255,0.2);margin-top: 10px;padding-top: 15px;color: #fff;}
.profile-menu-item.logout-item:hover {background: rgba(231,76,60,0.2);color: #fff;}
.profile-content {background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.profile-form-section {margin-bottom: 20px;padding-bottom: 5px;border-bottom: 1px solid #eee;}
.profile-form-section:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.section-heading {font-size: 18px;font-weight: 700;color: #1e3a8a;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e74c3c;text-transform: uppercase;letter-spacing: 0.5px;}
.profile-form .form-group {margin-bottom: 20px;}
.profile-form .form-label {display: block;color: #333;font-size: 14px;font-weight: 600;margin-bottom: 8px;}
.profile-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.profile-input {width: 100%;padding: 12px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;color: #333;background: #fafafa;transition: all 0.3s ease;}
.profile-input:focus {outline: none;border-color: #e74c3c;background: #fff;box-shadow: 0 0 0 3px rgba(231,76,60,0.1);}
.profile-input[readonly] {background: #f0f0f0;cursor: not-allowed;}
.profile-form select.profile-input,
.profile-form select {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;background-size: 12px;padding-right: 35px;cursor: pointer;background-color: #fafafa;}
.profile-form select.profile-input:focus {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e74c3c' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-color: #fff;}
.profile-form .form-text {display: block;color: #999;font-size: 12px;margin-top: 5px;}
.profile-form .error-message {display: block;color: #e74c3c;font-size: 12px;margin-top: 5px;}
.form-submit {margin-top: 20px;text-align: center;}
.btn-update-profile,.btn-update-password {padding: 14px 40px;background: #e74c3c;color: #fff;border: none;border-radius: 4px;font-size: 16px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;letter-spacing: 0.5px;}
.btn-update-profile:hover,.btn-update-password:hover {background: #c0392b;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3);}
.password-input-wrapper {position: relative;}
.password-input-wrapper .toggle-password {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);cursor: pointer;color: #999;font-size: 16px;transition: color 0.3s ease;}
.password-input-wrapper .toggle-password:hover {color: #e74c3c;}
.page-title {font-size: 24px;font-weight: 700;color: #1e3a8a;margin-bottom: 10px;}
.page-subtitle {font-size: 14px;color: #666;margin-bottom: 10px;}
.empty-wishlist,.empty-orders,.empty-address {text-align: center;padding: 60px 20px;}
.empty-icon {width: 100px;height: 100px;margin: 0 auto 20px;background: #f8f9fa;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.empty-icon i {font-size: 48px;color: #ccc;}
.empty-wishlist h3,.empty-orders h3,.empty-address h3 {font-size: 20px;font-weight: 600;color: #333;margin-bottom: 10px;}
.empty-wishlist p,.empty-orders p,.empty-address p {font-size: 14px;color: #666;margin-bottom: 25px;}
.btn-shop-now {display: inline-block;padding: 12px 30px;background: #e74c3c;color: #fff;text-decoration: none;border-radius: 4px;font-size: 14px;font-weight: 600;text-transform: uppercase;transition: all 0.3s ease;}
.btn-shop-now:hover {background: #c0392b;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3);}
.wishlist-header,.orders-header,.address-header,.password-header {margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid #eee;}
.address-header {display: flex;justify-content: space-between;align-items: center;}
.btn-add-address {padding: 10px 20px;background: #e74c3c;color: #fff;border: none;border-radius: 4px;font-size: 14px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 8px;}
.btn-add-address:hover {background: #c0392b;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3);}
.address-list {margin-top: 20px;}
.address-card {background: #fff;border: 2px solid #e0e0e0;border-radius: 8px;padding: 20px;position: relative;transition: all 0.3s ease;height: 100%;}
.address-card:hover {border-color: #00a1b1;box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.address-card.default-address {border-color: #e74c3c;background: #fff5f5;}
.address-badge {position: absolute;top: 15px;right: 15px;background: #e74c3c;color: #fff;padding: 4px 12px;border-radius: 4px;font-size: 11px;font-weight: 600;text-transform: uppercase;}
.address-type {display: flex;align-items: center;gap: 8px;margin-bottom: 15px;color: #666;font-size: 14px;}
.address-type i {color: #00a1b1;font-size: 16px;}
.type-label {text-transform: capitalize;font-weight: 600;}
.address-details {margin-bottom: 15px;}
.address-name {font-size: 18px;font-weight: 700;color: #333;margin-bottom: 10px;}
.address-text {font-size: 14px;color: #666;margin-bottom: 5px;line-height: 1.6;}
.address-contact {font-size: 14px;color: #333;margin-top: 10px;padding-top: 10px;border-top: 1px solid #eee;}
.address-contact i {color: #00a1b1;margin-right: 5px;width: 16px;}
.address-actions {display: flex;gap: 10px;flex-wrap: wrap;padding-top: 15px;border-top: 1px solid #eee;}
.btn-address-action {padding: 8px 15px;background: #f8f9fa;color: #333;border: 1px solid #ddd;border-radius: 4px;font-size: 13px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 5px;}
.btn-address-action:hover {background: #e9ecef;border-color: #00a1b1;color: #00a1b1;}
.btn-address-action.btn-delete:hover {background: #fff5f5;border-color: #e74c3c;color: #e74c3c;}
.modal-header {border-bottom: 1px solid #eee;padding: 20px 30px;}
.modal-title {font-size: 20px;font-weight: 700;color: #333;}
.modal-body {padding: 30px;}
.modal-footer {border-top: 1px solid #eee;padding: 20px 30px;}
.modal-footer .btn {padding: 10px 25px;font-weight: 600;}
.modal-footer .btn-primary {background: #e74c3c;border-color: #e74c3c;}
.modal-footer .btn-primary:hover {background: #c0392b;border-color: #c0392b;}

.edit-profile-pic i{font-size: 14px!important;color: #fff;}

/* ============================================
   SELECT BOXES - DROPDOWN ICON
   ============================================ */
select.form-control,
select {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;background-size: 12px;padding-right: 35px;cursor: pointer;}
select.form-control:focus,
select:focus {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 12px center;background-size: 12px;padding-right: 35px;cursor: pointer;background-color: #fafafa;}

/* ============================================
   CHECKOUT SUCCESS PAGE
   ============================================ */
.checkout-success-wrapper {padding: 20px 0;}
.success-icon {margin-bottom: 30px;}
.success-title {font-size: 32px;font-weight: 700;color: #333;margin-bottom: 15px;}
.success-message {font-size: 16px;color: #666;margin-bottom: 30px;line-height: 1.6;}
.order-info-card {background: #fff;border-radius: 8px;padding: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);margin-bottom: 30px;text-align: left;}
.order-info-title {font-size: 20px;font-weight: 700;color: #333;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #f0f0f0;}
.order-detail-row {display: flex;justify-content: space-between;align-items: center;padding:5px 0;border-bottom: 1px solid #eee;}
.order-detail-row:last-child {border-bottom: none;}
.order-detail-label {font-weight: 600;color: #333;font-size: 14px;}
.order-detail-value {color: #666;font-size: 14px;}
.order-number {color: #00a1b1;font-weight: 700;font-size: 15px;}
.order-amount {color: #e74c3c;font-weight: 700;font-size: 16px;}
.order-status {color: #ff9800;font-weight: 600;text-transform: capitalize;}
.order-address-row {flex-direction: column;align-items: flex-start;padding: 12px 0;}
.order-address-label {font-weight: 600;color: #333;font-size: 14px;margin-bottom: 8px;}
.order-address-value {color: #666;font-size: 14px;line-height: 1.6;}
.success-actions {display: flex;gap: 15px;justify-content: center;flex-wrap: wrap;margin-top: 30px;}
.btn-view-orders,.btn-continue-shopping {padding: 12px 30px;font-size: 14px;font-weight: 600;text-decoration: none;display: inline-flex;align-items: center;gap: 8px;}
.btn-view-orders {background: #00a1b1;color: #fff;border: none;border-radius: 4px;transition: all 0.3s ease;}
.btn-view-orders:hover {background: #008a98;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,161,177,0.3);}
.btn-continue-shopping {background: #e74c3c;color: #fff;border: none;border-radius: 4px;transition: all 0.3s ease;}
.btn-continue-shopping:hover {background: #c0392b;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3);}
@media (max-width: 768px) {
  .success-title {font-size: 24px;}
  .order-info-card {padding: 20px;}
  .order-detail-row {flex-direction: column;align-items: flex-start;gap: 5px;}
  .order-detail-value {margin-top: 5px;}
  .success-actions {flex-direction: column;}
  .btn-view-orders,.btn-continue-shopping {width: 100%;justify-content: center;}
}

/* ============================================
   MY ORDERS PAGE
   ============================================ */
.orders-header {margin-bottom: 30px;padding-bottom: 20px;border-bottom: 2px solid #f0f0f0;}
.page-title {font-size: 28px;font-weight: 700;color: #333;margin-bottom: 8px;}
.page-subtitle {font-size: 14px;color: #666;margin: 0;}
.orders-list {display: flex;flex-direction: column;gap: 20px;}
.order-card {background: #fff;border-radius: 8px;padding: 25px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);transition: all 0.3s ease;}
.order-card:hover {box-shadow: 0 4px 15px rgba(0,0,0,0.15);transform: translateY(-2px);}
.order-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #eee;flex-wrap: wrap;gap: 15px;}
.order-header-left {flex: 1;}
.order-number {font-size: 18px;color: #333;margin-bottom: 8px;}
.order-date {font-size: 13px;color: #999;display: flex;align-items: center;gap: 6px;}
.order-header-right {display: flex;gap: 10px;flex-wrap: wrap;}
.order-status-badge {padding: 6px 12px;border-radius: 4px;font-size: 12px;font-weight: 600;text-transform: uppercase;}
.status-pending {background: #fff3cd;color: #856404;}
.status-processing {background: #cfe2ff;color: #084298;}
.status-shipped {background: #d1e7dd;color: #0f5132;}
.status-delivered {background: #d1e7dd;color: #0f5132;}
.status-cancelled {background: #f8d7da;color: #842029;}
.payment-status-badge {padding: 6px 12px;border-radius: 4px;font-size: 12px;font-weight: 600;display: flex;align-items: center;gap: 5px;}
.payment-pending {background: #fff3cd;color: #856404;}
.payment-paid {background: #d1e7dd;color: #0f5132;}
.payment-failed {background: #f8d7da;color: #842029;}
.order-items {margin-bottom: 20px;}
.order-item {display: flex;align-items: center;gap: 15px;padding: 15px 0;border-bottom: 1px solid #f0f0f0;}
.order-item:last-child {border-bottom: none;}
.order-item-image {width: 80px;height: 80px;border-radius: 6px;overflow: hidden;flex-shrink: 0;}
.order-item-image img {width: 100%;height: 100%;object-fit: cover;}
.order-item-details {flex: 1;min-width: 0;}
.order-item-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 8px;line-height: 1.4;}
.order-item-meta {display: flex;align-items: center;gap: 8px;font-size: 13px;color: #666;}
.order-item-price {font-size: 16px;font-weight: 700;color: #e74c3c;white-space: nowrap;}
.order-footer {display: flex;justify-content: space-between;align-items: center;padding-top: 20px;border-top: 2px solid #f0f0f0;flex-wrap: wrap;gap: 15px;}
.order-total {display: flex;align-items: center;gap: 10px;}
.total-label {font-size: 16px;font-weight: 600;color: #333;}
.total-value {font-size: 20px;font-weight: 700;color: #e74c3c;}
.order-actions {display: flex;gap: 10px;flex-wrap: wrap;}
.btn-view-order,.btn-pay-now {padding: 10px 20px;font-size: 14px;font-weight: 600;text-decoration: none;border-radius: 4px;transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 8px;}
.btn-view-order {background: #00a1b1;color: #fff;border: none;}
.btn-view-order:hover {background: #008a98;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,161,177,0.3);}
.btn-pay-now {background: #e74c3c;color: #fff;border: none;}
.btn-pay-now:hover {background: #c0392b;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3);}
.empty-orders {text-align: center;padding: 60px 20px;}
.empty-icon {font-size: 80px;color: #ddd;margin-bottom: 20px;}
.empty-orders h3 {font-size: 24px;color: #333;margin-bottom: 10px;}
.empty-orders p {font-size: 16px;color: #666;margin-bottom: 30px;}
.btn-shop-now {padding: 12px 30px;background: #e74c3c;color: #fff;text-decoration: none;border-radius: 4px;font-weight: 600;display: inline-block;transition: all 0.3s ease;}
.btn-shop-now:hover {background: #c0392b;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3);}
@media (max-width: 768px) {
  .order-header {flex-direction: column;}
  .order-header-right {width: 100%;}
  .order-item {flex-wrap: wrap;}
  .order-item-image {width: 60px;height: 60px;}
  .order-footer {flex-direction: column;align-items: stretch;}
  .order-actions {width: 100%;}
  .btn-view-order,.btn-pay-now {width: 100%;justify-content: center;}
}

@media (max-width: 992px) {
  .profile-sidebar {margin-bottom: 30px;}
}
@media (max-width: 768px) {
  .profile-content {padding: 25px 20px;}
  .section-heading {font-size: 16px;}
  .profile-picture {width: 80px;height: 80px;}
  .profile-picture i {font-size: 36px;}
  .profile-name {font-size: 16px;}
  .address-header {flex-direction: column;align-items: flex-start;gap: 15px;}
  .btn-add-address {width: 100%;justify-content: center;}
}