/* ============================================
   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;background: #fff;border-radius: 8px;}
.account-login-form .form-group {position: relative;margin-bottom: 20px;}
.account-login-form .form-group label {display: block;color: #333;font-size: 14px;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: 12px 40px 12px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;color: #333;background: #fff;transition: all 0.3s ease;box-sizing: border-box;}
.account-login-form .form-group input:focus {outline: none;border-color: #ff6b35;box-shadow: 0 0 0 2px rgba(255,107,53,0.1);}
.account-login-form .form-group input::placeholder {color: #999;}
.account-login-form .form-icon {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);color: #999;font-size: 16px;pointer-events: none;}
.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;flex-wrap: wrap;gap: 10px;}
.forgot-password-link {color: #007bff;text-decoration: none;font-weight: 500;transition: color 0.3s ease;font-size: 12px;text-transform: uppercase;}
.forgot-password-link:hover {color: #0056b3;text-decoration: underline;}
.remember-me {display: flex;align-items: center;gap: 6px;color: #666;cursor: pointer;margin: 0;font-size: 12px;}
.remember-me input[type="checkbox"] {width: 16px;height: 16px;cursor: pointer;accent-color: #ff6b35;flex-shrink: 0;}
.remember-me span {user-select: none;}
.btn-login {width: 100%;padding: 12px 20px;background: #ff6b35;color: #fff;border: none;border-radius: 4px;font-size: 14px;font-weight: 600;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;margin-bottom: 15px;letter-spacing: 0.5px;}
.btn-login:hover {background: #e55a2b;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(255,107,53,0.3);}
.btn-login:active {transform: translateY(0);}
.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;padding: 8px 0;}
.register-link:hover {color: #ff6b35;}
.register-link i {font-size: 14px;}
.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: 8px 0;border-top: 1px solid #eee;margin-top: 10px;padding-top: 15px;}
.otp-link:hover {color: #ff6b35;}
.otp-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: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.profile-form-section {margin-bottom: 30px;padding-bottom: 20px;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: #333;margin-bottom: 25px;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: 500;margin-bottom: 8px;}
.profile-form .form-label .required {color: #e74c3c;margin-left: 2px;}
.profile-input {width: 100%;padding: 10px 12px;border: 1px solid #ddd;border-radius: 0;font-size: 14px;color: #333;background: #fff;transition: all 0.3s ease;box-sizing: border-box;}
.profile-input:focus {outline: none;border-color: #999;background: #fff;box-shadow: none;}
.profile-input[readonly] {background: #fff;cursor: not-allowed;border-color: #ddd;}
.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: #fff;}
.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='%23333' 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;font-weight: normal;}
.profile-form .error-message {display: block;color: #e74c3c;font-size: 12px;margin-top: 5px;}
.form-submit {margin-top: 30px;text-align: right;}
.btn-update-profile,.btn-update-password {padding: 12px 30px;background: #e74c3c;color: #fff;border: none;border-radius: 0;font-size: 14px;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(-1px);box-shadow: 0 2px 8px 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;}
}

/* ============================================
   FOOTER - Contact icons + Follow us icons
   ============================================ */
.ul-footer-top-widget-links .contact-icon{
  color: var(--ul-primary, #00a1b1);
  margin-right: 8px;
  font-size: 14px;
  vertical-align: middle;
}
.follow-us{color: #fff;}
.follow-us .social-links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.follow-us .social-links a{
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  display: inline-flex;
  width: 36px;
  height: 36px;
  line-height: 36px;
  aspect-ratio: 1/1;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  transition: all 0.2s ease;
}
.follow-us .social-links a:hover{
  background-color: #ffffff;
  border-color: #ffffff;
}
.follow-us .social-links a i{
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}
.follow-us .social-links a:hover i{
  color: var(--ul-primary, #00a1b1);
}

/* ============================================
   Product listing - make all product images equal
   ============================================ */
.product-listing .ul-product-img img,
.ul-inner-products-wrapper .ul-product-img img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}

/* Fix min/max height so all product cards remain visually equal */
.product-listing .ul-product-img,
.ul-inner-products-wrapper .ul-product-img{
  min-height: 262px;
  max-height: 262px;
}
.product-listing .ul-product-img img,
.ul-inner-products-wrapper .ul-product-img img{
  min-height: 262px;
  max-height: 262px;
}

/* ============================================
   Product title (listing vs details)
   ============================================ */
/* Listing page: show product name in max 2 lines */
.ul-product-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  /* Fix title area height so product cards align */
  min-height: 36px;
  max-height: 36px;
  line-height: 18px;
}
.ul-product-title a{
  display: block;
}

/* ============================================
   Move price to bottom (listing + product detail)
   ============================================ */
/* Product listing cards: move .ul-product-heading (price) below img + title */
.ul-product{
  display: flex;
  flex-direction: column;
}
.ul-product .ul-product-heading{
  order: 4;
  margin-top: auto; /* price card ke neeche push */
  justify-content: center !important;
}
.ul-product .ul-product-img{
  order: 1;
}
.ul-product .ul-product-txt{
  order: 2;
}
.ul-product .ul-product-title{
  margin-top: 6px;
}

/* Details page: ensure full title is visible (no clamping) */
.ul-product-details-title{
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* ============================================
   HERO / BREADCRUMB (site-breadcrumb)
   Needed because web.layouts.index doesn't include
   the older style.css where these rules originally lived.
   ============================================ */
.site-breadcrumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-repeat:no-repeat !important;
  background-position:center !important;
  position:relative;
  padding-top:120px;
  padding-bottom:80px;
  z-index:0;
  background-attachment:fixed !important;
  background-size:80% auto !important;

  /* Fallback theme colors */
  --hero-overlay-color: rgba(0,0,0,0.6);
  --color-white: #ffffff;
  --theme-color: #00a1b1;
}

.site-breadcrumb::before{
  content:"";
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background: var(--hero-overlay-color);
  opacity:0.7;
  z-index:-1;
}

.site-breadcrumb .breadcrumb-title{
  font-size:45px;
  color: var(--color-white);
  font-weight:700;
  margin-bottom:10px;
  text-transform:capitalize;
}

.site-breadcrumb .breadcrumb-menu{
  position:relative;
  z-index:1;
  list-style:none;
  padding:0;
  margin:0;
}

.site-breadcrumb .breadcrumb-menu li{
  display:inline-block;
  margin-left:25px;
  color: var(--color-white);
  font-weight:500;
  text-transform:capitalize;
}

.site-breadcrumb .breadcrumb-menu li:first-child{
  margin-left:0;
}

/* Separator arrow between breadcrumb items */
.site-breadcrumb .breadcrumb-menu li::before{
  position:absolute;
  content: '›';
  right: -21px;
  top: 1px;
  text-align:center;
  font-size:16px;
  color: var(--color-white);
}
.site-breadcrumb .breadcrumb-menu li:last-child::before{
  display:none;
}

.site-breadcrumb .breadcrumb-menu li a{
  color: var(--color-white);
  text-decoration:none;
  transition: all 0.5s ease-in-out;
}

.site-breadcrumb .breadcrumb-menu li a:hover{
  color: var(--theme-color);
}

.site-breadcrumb .breadcrumb-menu li.active{
  color: var(--theme-color);
}

/* ============================================
   Product detail - Main image zoom popup (+/-)
   ============================================ */
.product-image-popup{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.product-image-popup.open{
  display: flex;
}

.product-image-popup__content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0;
  overflow: hidden;
}

.product-image-popup__toolbar{
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  z-index: 2;
}

.product-image-zoom-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,161,177,0.35);
  background: rgba(0,161,177,0.08);
  color: var(--ul-primary, #00a1b1);
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-image-zoom-btn:hover{
  background: rgba(0,161,177,0.16);
}

.product-image-close-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-image-close-btn:hover{
  background: #000;
}

.product-image-popup__image-wrap{
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  position: relative;
  overflow: hidden;
}

/* ============================================
   Product detail page - remove inline styles
   ============================================ */
.dex-inline-form{
  display: inline;
}
.dex-original-price-strike{
  text-decoration: line-through;
  color: #999;
  margin-left: 10px;
}
.dex-product-pricing{
  display: flex;
  align-items: center;
  gap: 10px;
}
.dex-product-pricing .dex-original-price-strike{
  margin-left: 0; /* gap se align rahe */
}
.dex-mt-20{
  margin-top: 20px;
}

/* ============================================
   Utility spacing classes used in templates
   (ex: blog-details uses py-80, mb-20, mb-10)
   ============================================ */
.py-80{ padding: 80px 0; }
.mb-20{ margin-bottom: 20px; }
.mb-10{ margin-bottom: 10px; }
.mt-20{ margin-top: 20px; }

/* ============================================
   Product detail - Item Description tab UI
   ============================================ */
.tabs-section{
  margin-top: 26px;
}
.tabs-section .tabs{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,161,177,0.06);
}
.tabs-section .tab-btn{
  border: 1px solid rgba(0,161,177,0.25);
  background: transparent;
  color: #333;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tabs-section .tab-btn:hover{
  background: rgba(0,161,177,0.10);
}
.tabs-section .tab-btn.active{
  background: var(--ul-primary, #00a1b1);
  border-color: var(--ul-primary, #00a1b1);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,161,177,0.22);
}
.tabs-section .tab-content{
  margin-top: 14px;
}
.tabs-section .tab-panel{
  display: none;
}
.tabs-section .tab-panel.active{
  display: block;
}

.ul-product-details-long-descr-wrapper{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}
.ul-product-details-inner-title{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  color: #111;
}
.ul-product-details-long-descr-wrapper p{
  margin: 0;
  color: #444;
  line-height: 1.85;
  font-size: 15px;
}
.ul-product-details-long-descr-wrapper .dex-mt-20 p{
  margin-top: 5px;
}
.ul-product-details-long-descr-wrapper .dex-mt-20 strong{
  color: var(--ul-primary, #00a1b1);
}

/* ============================================
   Product detail - main image uniform height
   ============================================ */
figure.main-image{
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
}
figure.main-image img#main-display{
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 690/582; /* same ratio as theme product details image */
  min-height: 260px;
  max-height: 420px;
}

.ratings-reviews{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}
.ratings-reviews h3{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 900;
  color: #111;
}

/* ============================================
   Blog details (legacy markup in blog-details.blade.php)
   ============================================ */
.blog-single-wrapper{
  background: #fff;
  border-radius: 14px;
  padding: 0;
}
.blog-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.blog-meta .blog-meta-left ul{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.blog-meta .blog-meta-left ul li{
  font-weight: 500;
}
.blog-meta i{
  margin-right: 5px;
  color: var(--ul-primary, #00a1b1);
}
.blog-meta a{
  color: #202227;
  font-weight: 500;
  text-decoration: none;
}
.blog-meta a:hover{
  color: var(--ul-primary, #00a1b1);
}

.blog-details-title{
  font-weight: 900;
  font-size: 34px;
  color: #202227;
  margin-bottom: 0;
}

.blog-single-area .widget{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 18px;
}
.blog-single-area .widget-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #111;
}

.blog-single-area .recent-post-single{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.blog-single-area .recent-post-single:last-child{
  margin-bottom: 0;
}
.blog-single-area .recent-post-img{
  flex: 0 0 80px;
  width: 80px;
  overflow: hidden;
  border-radius: 10px;
}
.blog-single-area .recent-post-img img{
  width: 80px;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.blog-single-area .recent-post-bio h6{
  margin: 0 0 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}
.blog-single-area .recent-post-bio h6 a{
  color: #111;
  text-decoration: none;
}
.blog-single-area .recent-post-bio h6 a:hover{
  color: var(--ul-primary, #00a1b1);
}
.blog-single-area .recent-post-bio span{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--ul-primary, #00a1b1);
  font-size: 13px;
}
.blog-single-area .recent-post-bio span i{
  font-size: 14px;
}

/* Blog sidebar - Search / Category / Share (legacy markup) */
.blog-single-area .blog-thumb-img img{
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.blog-single-area .blog-thumb-img{
  margin-bottom: 30px;
}

.blog-single-area .widget .widget-title{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 14px;
  color: #111;
}

.blog-single-area .widget .search-form{
  position: relative;
  margin-top: 6px;
}
.blog-single-area .widget .search-form .form-control{
  padding: 12px 52px 12px 15px;
  border-radius: 10px;
  box-shadow: none;
}
.blog-single-area .widget .search-form .form-control:focus{
  border-color: var(--ul-primary, #00a1b1);
}
.blog-single-area .widget .search-form button{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  border: none;
  background: transparent;
  color: var(--ul-primary, #00a1b1);
  padding: 0;
}

.blog-single-area .widget .category-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blog-single-area .widget .category-list a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  color: #111;
  font-weight: 500;
}
.blog-single-area .widget .category-list a:hover{
  color: var(--ul-primary, #00a1b1);
}
.blog-single-area .widget .category-list a i{
  color: var(--ul-primary, #00a1b1);
}
.blog-single-area .widget .category-list a span{
  margin-left: auto;
  color: #6f6f6f;
  font-weight: 600;
}
.blog-single-area .widget .category-list a:last-child{
  border-bottom: none;
}

.blog-single-area .widget .social-share-link{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.blog-single-area .widget .social-share-link a{
  width: 38px;
  height: 38px;
  line-height: 38px;
  border: 2px solid rgba(0,161,177,0.4);
  color: var(--ul-primary, #00a1b1);
  text-align: center;
  border-radius: 10px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blog-single-area .widget .social-share-link a:hover{
  background: var(--ul-primary, #00a1b1);
  color: #fff;
  border-color: var(--ul-primary, #00a1b1);
}
.blog-single-area .widget .social-share-link a i{
  font-size: 16px;
}

@media (max-width: 576px){
  .blog-meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

#product-image-popup-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  /* At zoom=1 image viewport me fit rahe, zoom me transform se bada hoga */
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
  touch-action: none; /* mobile me scroll/zoom interfere na kare */
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 576px){
  .product-image-zoom-btn,
  .product-image-close-btn{
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 34px;
  }

  /* Reduce left/right gap on mobile for tabs + description card */
  .tabs-section{
    margin-top: 18px;
  }
  .tabs-section .tabs{
    padding: 6px 6px;
    gap: 8px;
  }
  .tabs-section .tab-btn{
    padding: 10px 14px;
  }
  .ul-product-details-long-descr-wrapper{
    padding: 14px 12px;
  }

  /* Buttons me padding kam (left side overflow/gap kam ho jayega) */
  .ul-product-details-actions .left button{
    padding: 0 clamp(6px, 0.8vw, 12px);
  }

  /* Mobile: fixed 262px heights se cards bahut bade/cut ho rahe the.
     Theme aspect-ratio follow karke image ko responsive rakhte hain. */
  .product-listing .ul-product-img,
  .ul-inner-products-wrapper .ul-product-img{
    min-height: 0 !important;
    max-height: none !important;
  }
  .product-listing .ul-product-img img,
  .ul-inner-products-wrapper .ul-product-img img{
    min-height: 0 !important;
    max-height: none !important;
  }

  
}

@media (max-width: 991px){
  .site-breadcrumb{ padding-top:60px; }
  .site-breadcrumb .breadcrumb-title{ font-size:34px; }
  .cart-summary{padding: 10px;}
  .account-user-info {  padding: 10px;}
  .ul-product { padding: 5px}
  
  .dex-original-price-strike { font-size: 12px;}
  .ul-product-price { font-size: 14px;}

  .footer-logo {margin-bottom: 0!important;}


}

/* ============================================
   Side scroll (quick add) layout tweak
   Left image ko chhota, right details ko bada
   ============================================ */
#ul-side-scroll .row.mt-4 > .col:first-child{
  flex: 0 0 38%;
  max-width: 38%;
}
#ul-side-scroll .row.mt-4 > .col:last-child{
  flex: 0 0 62%;
  max-width: 62%;
}
#ul-side-scroll .ul-scroll-img{
  display: flex;
  /* Image ko upar align karke extra vertical gap kam hoga */
  align-items: flex-start;
  justify-content: center;
}
#ul-side-scroll #scroll-product-img{
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

/* Side scroll ke padding + top spacing ko compact karo */
#ul-side-scroll{
  padding: 20px !important;
  min-height: 420px !important;
}
#ul-side-scroll .row.mt-4{
  margin-top: 10px !important;
}

@media (max-width: 768px){
  #ul-side-scroll .row.mt-4 > .col:first-child,
  #ul-side-scroll .row.mt-4 > .col:last-child{
    flex: 0 0 100%;
    max-width: 100%;
  }
}