/* Apple-Inspired Mobile Membership Design */
/* Color Palette: #1B243C, #3A4A6F, #FFDFAA, #FFD286, #FFE3B5, #87580B */

:root {
  --apple-dark-blue: #1B243C;
  --apple-medium-blue: #3A4A6F;
  --apple-gold-light: #FFDFAA;
  --apple-gold: #FFD286;
  --apple-gold-pale: #FFE3B5;
  --apple-bronze: #87580B;
  --apple-white: #FFFFFF;
  --apple-gray-light: #F8F9FA;
  --apple-shadow: rgba(27, 36, 60, 0.08);
  --apple-shadow-medium: rgba(27, 36, 60, 0.12);
  --apple-shadow-strong: rgba(27, 36, 60, 0.16);
  --apple-border: rgba(27, 36, 60, 0.1);
}

/* Mobile-First Global Styles */
body {
  background: var(--apple-white) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--apple-dark-blue) !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation Pills - Mobile Optimized */
.nav-pills {
  background: var(--apple-white) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  margin: 8px 10px 16px 10px !important;
  box-shadow: 0 2px 8px var(--apple-shadow) !important;
  border: 1px solid var(--apple-border) !important;
}

.nav-pills .nav-link {
  color: var(--apple-medium-blue) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  padding: 10px 8px !important;
  font-size: 13px !important;
  text-align: center !important;
  border: none !important;
}

.nav-pills .nav-link:hover {
  background: var(--apple-gray-light) !important;
  color: var(--apple-bronze) !important;
}

.nav-pills .nav-link.active {
  background: var(--apple-dark-blue) !important;
  color: var(--apple-white) !important;
  box-shadow: 0 2px 6px rgba(27, 36, 60, 0.2) !important;
}

/* Tab Content */
.tab-content {
  background: transparent !important;
  padding: 0 !important;
}

/* Membership Items - Mobile Optimized */
.membership-item {
  background: var(--apple-white) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: 12px !important;
  margin: 10px auto !important;
  padding: 16px 12px !important;
  height: auto !important;
  min-height: 70px !important;
  box-shadow: 0 2px 8px var(--apple-shadow) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  width: 95% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}

.membership-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px var(--apple-shadow-medium) !important;
  border-color: var(--apple-gold) !important;
}

.membership-item.selected {
  border-color: var(--apple-bronze) !important;
  background: linear-gradient(135deg, var(--apple-white) 0%, rgba(255, 223, 170, 0.1) 100%) !important;
  box-shadow: 0 4px 12px var(--apple-shadow-strong) !important;
}

/* Time Period - Mobile Layout */
.time-period {
  color: var(--apple-dark-blue) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  flex: 1 !important;
  min-width: 80px !important;
  border-right: 1px solid var(--apple-border) !important;
  padding-right: 8px !important;
  margin-right: 8px !important;
}

/* Price - Mobile Layout */
.price {
  color: var(--apple-bronze) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  flex: 1 !important;
  text-align: center !important;
  min-width: 60px !important;
}

.previous-price {
  color: var(--apple-medium-blue) !important;
  font-size: 12px !important;
  opacity: 0.7 !important;
  text-decoration: line-through !important;
  flex: 1 !important;
  text-align: right !important;
  min-width: 50px !important;
}

/* Special Price Badge - Mobile */
.special-price {
  background: linear-gradient(135deg, var(--apple-bronze) 0%, var(--apple-gold) 100%) !important;
  color: var(--apple-white) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  position: absolute !important;
  top: -6px !important;
  right: 8px !important;
  box-shadow: 0 2px 4px rgba(135, 88, 11, 0.3) !important;
}

/* Checked Icon - Mobile */
.membership-item.selected .checked {
  background: var(--apple-bronze) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.membership-item.selected .checked::after {
  content: '✓' !important;
  color: var(--apple-white) !important;
  font-weight: bold !important;
  font-size: 12px !important;
}

/* Membership Select Header - Mobile */
.membership-select-header {
  background: var(--apple-gray-light) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 0 auto 12px auto !important;
  max-width: calc(100% - 20px) !important;
  width: calc(100% - 20px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: 1px solid var(--apple-border) !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.membership-select-header div:first-child {
  color: var(--apple-dark-blue) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* Badge - Mobile */
.badge.text-bg-warning {
  background: var(--apple-gold) !important;
  color: var(--apple-bronze) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  border: 1px solid var(--apple-bronze) !important;
  min-width: 120px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* Countdown Timer - Prevent Badge Resizing */
#ctp_time_left { 
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.1px !important;
  display: inline-block !important;
  min-width: 100px !important;
  text-align: center !important;
}

/* Badge responsive adjustments */
@media (max-width: 360px) {
  .badge.text-bg-warning {
    min-width: 100px !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
  
  #ctp_time_left {
    min-width: 80px !important;
    font-size: 10px !important;
  }
}

@media (min-width: 768px) {
  .badge.text-bg-warning {
    min-width: 140px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  
  #ctp_time_left {
    min-width: 120px !important;
  }
}

/* Alert - Mobile */
.alert-info {
  background: rgba(255, 223, 170, 0.2) !important;
  border: 1px solid var(--apple-gold) !important;
  color: var(--apple-bronze) !important;
  border-radius: 10px !important;
  margin: 0 auto !important;
  max-width: calc(100% - 20px) !important;
  width: calc(100% - 20px) !important;
  padding: 12px !important;
  font-size: 13px !important;
}

 
.pay-method .membership-item {
  height: 50px !important;
  margin: 6px 1% !important;
  border-radius: 10px !important;
  width: 30% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}

.pay-item-title {
  color: var(--apple-dark-blue) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* Global Payment - Mobile */
#globalpay-card-element {
  background: var(--apple-white) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px auto !important;
  max-width: calc(100% - 20px) !important;
  width: calc(100% - 20px) !important;
  box-shadow: 0 2px 8px var(--apple-shadow) !important;
  border: 1px solid var(--apple-border) !important;
}

/* Payment Agreements - Mobile */
.payment-agreements {
  background: var(--apple-gray-light) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin: 16px auto !important;
  max-width: calc(100% - 20px) !important;
  width: calc(100% - 20px) !important;
  text-align: center !important;
}

.payment-agreements .btn-link {
  color: var(--apple-bronze) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  transition: color 0.25s ease !important;
}

.payment-agreements .btn-link:hover {
  color: var(--apple-dark-blue) !important;
}

/* Payment Bar - Mobile Fixed Bottom */
.payment-bar {
  background: var(--apple-white) !important;
  border-top: 1px solid var(--apple-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 8px var(--apple-shadow) !important;
  padding: 16px 20px !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

.total-price {
  color: var(--apple-bronze) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

.payment-bar .btn-warning {
  background: var(--apple-bronze) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--apple-white) !important;
  transition: all 0.25s ease !important;
  min-height: 44px !important;
}

.payment-bar .btn-warning:hover {
  background: var(--apple-dark-blue) !important;
  transform: scale(1.02) !important;
}

/* VIP Page Styles - Mobile */
.item-title {
  background: var(--apple-white) !important;
  border-left: 3px solid var(--apple-bronze) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  margin: 12px auto 12px auto!important;
  box-shadow: 0 2px 6px var(--apple-shadow) !important;
  border-top: 1px solid var(--apple-border) !important;
  border-right: 1px solid var(--apple-border) !important;
  border-bottom: 1px solid var(--apple-border) !important;
}

.item-title h6 {
  color: var(--apple-dark-blue) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

.item-list {
  background: var(--apple-white) !important;
  border-radius: 12px !important;
  padding: 16px 8px !important;
  margin: 0 auto 16px auto !important; 
  box-shadow: 0 2px 8px var(--apple-shadow) !important;
  border: 1px solid var(--apple-border) !important;
}

.item-list .col-4 { 
  text-align: center !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
  margin-bottom: 12px !important;
} 

.item-list .col-4 img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
} 

.item-info {
  color: var(--apple-dark-blue) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
}

/* Bottom Button Container */
div[style*="bottom: 0"][style*="position: fixed"] {
  background: var(--apple-white) !important;
  border-top: 1px solid var(--apple-border) !important;
  box-shadow: 0 -2px 8px var(--apple-shadow) !important;
  padding: 12px !important;
}

/* VIP upgrade button - Mobile */
.btn-warning {
  background: var(--apple-bronze) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  color: var(--apple-white) !important;
  transition: all 0.25s ease !important;
  min-height: 44px !important;
  font-size: 15px !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: var(--apple-dark-blue) !important;
  color: var(--apple-white) !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--apple-shadow-strong) !important;
}

/* Touch-friendly interactions */
.membership-item,
.nav-link,
.btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* Responsive adjustments for very small screens */
@media (max-width: 360px) {
  .membership-item {
    padding: 12px 8px !important;
    margin: 8px auto !important;
  }
  
  .time-period {
    font-size: 12px !important;
  }
  
  .price {
    font-size: 16px !important;
  }
  
  .previous-price {
    font-size: 11px !important;
  }
  
  .nav-pills .nav-link {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  
  .item-info {
    font-size: 11px !important;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .payment-bar {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  
  div[style*="bottom: 0"][style*="position: fixed"] {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* Smooth scrolling for iOS */
* {
  -webkit-overflow-scrolling: touch !important;
}

/* Remove focus outline for touch devices */
@media (pointer: coarse) {
  .nav-link:focus,
  .btn:focus,
  .membership-item:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--apple-gold) !important;
  }
}

/* Form Styles for modifyInfo.php and other form pages */
.card-body {
  background: var(--apple-white) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin: 16px 10px !important;
  box-shadow: 0 4px 16px var(--apple-shadow) !important;
  border: 1px solid var(--apple-border) !important;
}

/* Form Labels */
.form-label {
  color: var(--apple-dark-blue) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 8px !important;
}

/* Form Controls */
.form-control {
  border: 2px solid var(--apple-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  color: var(--apple-dark-blue) !important;
  background: var(--apple-white) !important;
  transition: all 0.25s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.form-control:focus {
  border-color: var(--apple-medium-blue) !important;
  box-shadow: 0 0 0 3px rgba(58, 74, 111, 0.1) !important;
  outline: none !important;
}

.form-control-lg {
  padding: 16px 18px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

.form-control::placeholder {
  color: var(--apple-medium-blue) !important;
  opacity: 0.6 !important;
}

/* Input Group */
.input-group {
  margin-bottom: 0 !important;
}

.input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  flex: 1 !important;
}

.input-group .btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border: 2px solid var(--apple-medium-blue) !important;
  border-left: none !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-width: 100px !important;
}

/* Buttons */
.btn-primary {
  background: var(--apple-medium-blue) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--apple-white) !important;
  transition: all 0.25s ease !important;
  min-height: 50px !important;
  box-shadow: 0 2px 8px rgba(58, 74, 111, 0.2) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--apple-dark-blue) !important;
  color: var(--apple-white) !important;
  border: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(27, 36, 60, 0.3) !important;
}

.btn-success {
  background: var(--apple-medium-blue) !important;
  border: none !important;
  color: var(--apple-white) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: var(--apple-dark-blue) !important;
  color: var(--apple-white) !important;
  border: none !important;
}

.btn-success:disabled {
  background: var(--apple-medium-blue) !important;
  opacity: 0.6 !important;
  color: var(--apple-white) !important;
}

.btn-link {
  color: var(--apple-medium-blue) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--apple-dark-blue) !important;
  background: rgba(58, 74, 111, 0.05) !important;
  text-decoration: none !important;
}

/* Alert Messages */
.alert-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.3) !important;
  color: #dc3545 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

/* Form Group Spacing */
.mb-3 {
  margin-bottom: 20px !important;
}

/* International Phone Input Styling */
.iti {
  width: 100% !important;
}

.iti__flag-container {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.iti__selected-flag {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border: 2px solid var(--apple-border) !important;
  border-right: none !important;
  padding: 14px 12px !important;
  background: var(--apple-white) !important;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
  border-color: var(--apple-medium-blue) !important;
  background: var(--apple-gray-light) !important;
}

.iti__country-list {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px var(--apple-shadow-strong) !important;
  border: 1px solid var(--apple-border) !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

.iti__country {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--apple-border) !important;
  transition: background 0.2s ease !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
  background: var(--apple-gray-light) !important;
}

.iti__country-name {
  color: var(--apple-dark-blue) !important;
  font-weight: 500 !important;
}

.iti__dial-code {
  color: var(--apple-medium-blue) !important;
}

/* Form Validation States */
.form-control.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

.form-control.is-valid {
  border-color: var(--apple-medium-blue) !important;
  box-shadow: 0 0 0 3px rgba(58, 74, 111, 0.1) !important;
}

/* Mobile Form Optimizations */
@media (max-width: 480px) {
  .card-body {
    margin: 8px 5px !important;
    padding: 16px !important;
  }
  
  .form-control,
  .form-control-lg {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
  
  .btn-primary {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  
  .btn-link {
    width: 100% !important;
    text-align: center !important;
  }
  
  .input-group .btn {
    min-width: 80px !important;
    font-size: 12px !important;
    padding: 16px 12px !important;
  }
}

/* Form Focus States for Better Accessibility */
.form-control:focus,
.btn:focus {
  outline: 2px solid var(--apple-medium-blue) !important;
  outline-offset: 2px !important;
}

/* Disable zoom on iOS for form inputs */
@media screen and (max-width: 767px) {
  .form-control,
  .form-control-lg,
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    font-size: 16px !important;
  }
}