/* Wallet Manager Styles */

/* Layout controls for form rows and containers */
.field-row {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.field-row .col-4,
.field-row .col-7,
.field-row .col-1 {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.field-row .col-4 { max-width: 33.333333% !important; width: 33.333333% !important; }
.field-row .col-7 { max-width: 58.333333% !important; width: 58.333333% !important; }
.field-row .col-1 { max-width: 8.333333% !important; width: 8.333333% !important; }

.col-lg-7 .field-row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.row.g-2 { margin-left: 0 !important; margin-right: 0 !important; }
.row.g-2 > * { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

.field-label { max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; }
.field-value { max-width: 100% !important; }

.token-select {
  max-width: 180px !important; min-width: 120px;
  border-color: #6c757d; transition: all 0.3s ease;
}
.token-select:hover { border-color: #495057; box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25); }
.token-select:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
.token-select option:checked { background: linear-gradient(135deg, #0d6efd, #0b5ed7); color: #fff; font-weight: 600; }
.token-select option:hover { background: linear-gradient(135deg, #e9ecef, #dee2e6); color: #495057; }
.token-select option[value=""] { background: #f8f9fa; color: #6c757d; font-style: italic; }
.token-select option[value*="customer"] { border-left: 3px solid #28a745; }
.token-select option[value*="points"]   { border-left: 3px solid #ffc107; }
.token-select option[value*="stamps"]   { border-left: 3px solid #17a2b8; }
.token-select option[value*="coupon"]   { border-left: 3px solid #dc3545; }
.token-select option[value*="membership"] { border-left: 3px solid #6f42c1; }

.field-label-updated { animation: fieldUpdated 0.5s ease-in-out; }
@keyframes fieldUpdated { 0%{transform:scale(1);}50%{transform:scale(1.02);}100%{transform:scale(1);} }

.token-update-confirmation {
  animation: slideInConfirmation 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
}
@keyframes slideInConfirmation {
  0%{ opacity:0; transform: translateY(-10px) scale(0.9);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

.btn-outline-danger { min-width: 38px !important; max-width: 38px !important; width: 38px !important; }

#header_container,
#primary_container,
#secondary_container,
#aux_container,
#back_container { width: 100% !important; max-width: 100% !important; overflow: hidden; }

.card-body { width: 100% !important; max-width: 100% !important; overflow: hidden; }

.field-row { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.field-row > div { flex-shrink: 0 !important; flex-grow: 0 !important; }

form, .tab-content, .tab-pane, .mb-3, .card, .container-fluid, .page-wrapper { width: 100% !important; max-width: 100% !important; overflow: hidden; }

.row.g-2 { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.row.g-2 > div { flex-shrink: 0 !important; flex-grow: 0 !important; }

/* iPhone preview styles */
.iphone-mockup { transition: transform 0.3s ease; animation: slideInScale 0.8s ease-out; }
@keyframes slideInScale { 0%{opacity:0; transform: scale(0.35) translateY(20px);} 100%{opacity:1; transform: scale(0.4) translateY(0);} }

.iphone-frame {
  position: relative;
  background: linear-gradient(145deg, #1f1f23, #0a0a0c);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 15px 30px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.02), inset 0 -2px 0 rgba(0,0,0,0.2);
}
.iphone-frame::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 55px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.dynamic-island { background: #000; box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.3); }
.dynamic-island::before { content: ''; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.dynamic-island::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.05); }

.phone-screen { background: linear-gradient(180deg, #000, #1c1c1e); scrollbar-width: none; -ms-overflow-style: none; }
.phone-screen::-webkit-scrollbar { display: none; }

@media (max-width: 768px) { .iphone-mockup { transform: scale(0.3) !important; } }
@media (max-width: 480px) { .iphone-mockup { transform: scale(0.25) !important; } }

#pkpassPreview {
  background: transparent; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  font-weight: 400; letter-spacing: -0.01em; transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#pkpassPreview:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15); }
.pass-content { padding: 24px; }
.status-bar { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; font-weight: 600; letter-spacing: -0.02em; }