/* CupsByAA Theme extracted from React src/index.css (Tailwind parts removed) */

/* Design System */
:root {
  --primary-color: #E55E99;
  --primary-dark: #d14a85;
  --primary-light: #FFAFCC;
  --secondary-color: #FFC8DC;
  --accent-color: #EBB9DF;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --text-primary: #2d1b24;
  --text-secondary: #5a3d47;
  --text-light: #8a6a73;
  --bg-primary: #ffffff;
  --bg-secondary: #fef9fb;
  --bg-tertiary: #fcf4f7;
  --border-color: #f5e8ed;
  --border-light: #f9f0f4;
  --shadow-sm: 0 1px 2px 0 rgba(229, 94, 153, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(229, 94, 153, 0.1), 0 2px 4px -1px rgba(229, 94, 153, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(229, 94, 153, 0.1), 0 4px 6px -2px rgba(229, 94, 153, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(229, 94, 153, 0.1), 0 10px 10px -5px rgba(229, 94, 153, 0.04);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { max-width: 100vw; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: linear-gradient(135deg, #CDB4DA 0%, #FFC8DC 35%, #EBB9DF 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100vw;
  overflow-x: hidden;
  width: 100%;
}

/* Header */
.header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1rem;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-color);
  width: 100%; max-width: 100vw; overflow-x: hidden;
}
.header-container { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; gap:0.75rem; width:100%; }
.header-left { display:flex; align-items:center; gap:0.75rem; flex:1; min-width:0; overflow:hidden; }
.header-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.header .logo { width:50px; height:auto; transition: transform var(--transition-normal); }
.header .logo:hover { transform: scale(1.05); }
.header h1 { margin:0; font-size:clamp(0.75rem, 2.5vw, 1.1rem); font-weight:700; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lang-switcher { display:flex; gap:var(--spacing-sm); flex-shrink:0; }
.lang-btn { padding:var(--spacing-xs); border:2px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-primary); cursor:pointer; transition:all var(--transition-fast); display:flex; align-items:center; justify-content:center; width:44px; height:34px; }
.flag-img { width:30px; height:20px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
.lang-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-color); }
.lang-btn.active { border-color: var(--primary-color); background: rgba(229, 94, 153, 0.1); box-shadow: var(--shadow-sm); }
.admin-link { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color:#fff; padding:0.5rem 0.75rem; border-radius:var(--radius-md); text-decoration:none; font-weight:600; font-size:0.8rem; display:flex; align-items:center; gap:0.35rem; box-shadow:var(--shadow-sm); transition:all var(--transition-normal); white-space:nowrap; flex-shrink:0; }
.admin-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.admin-text { display:none; }
@media (min-width: 480px) { .admin-text { display:inline; } }

/* Container */
.container { max-width:700px; width:100%; margin: var(--spacing-2xl) auto var(--spacing-md); padding: var(--spacing-2xl); background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow-x:hidden; border:1px solid rgba(255,255,255,0.2); animation: fadeInUp 0.6s var(--transition-normal); }
@keyframes fadeInUp { from { opacity:0; transform: translateY(30px);} to {opacity:1; transform: translateY(0);} }
.container h2 { text-align:center; margin-bottom: var(--spacing-xl); color: var(--primary-color); font-size:1.875rem; }

/* Form */
.order-form { display:flex; flex-direction:column; gap: var(--spacing-lg); }
.form-group { display:flex; flex-direction:column; gap: var(--spacing-sm); }
.form-group label { font-weight:600; display:flex; align-items:center; gap: var(--spacing-sm); color: var(--text-primary); font-size:1rem; text-transform:uppercase; letter-spacing:0.05em; }
.form-group input, .form-group select { width:100%; padding: var(--spacing-md) var(--spacing-lg); font-size:1rem; border:2px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-primary); color: var(--text-primary); transition: all var(--transition-normal); font-family: inherit; }
.form-group input:focus, .form-group select:focus { outline:none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(229, 94, 153, 0.1); transform: translateY(-2px); }
.form-group input:hover, .form-group select:hover { border-color: var(--primary-light); transform: translateY(-1px); }
.required-asterisk { color: var(--error-color); margin-left: 4px; font-weight:bold; }
.field-help { font-size:0.875rem; color: var(--text-light); }
.error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--error-color); padding: var(--spacing-md); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg); }

/* Product card selector */
.cup-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}
.cup-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 120px;
  aspect-ratio: 1 / 1;
  padding: 8px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.cup-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-light); }
.cup-option.checked { border-color: var(--primary-color); background: linear-gradient(135deg, rgba(229, 94, 153, 0.08), rgba(255, 175, 204, 0.05)); box-shadow: 0 0 0 3px rgba(229, 94, 153, 0.12); }
.cup-option.checked::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cup-option input[type="checkbox"], .cup-option input[type="radio"] { display: none; }
.cup-image-container { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }
.cup-option img { width: 60px; height: 60px; object-fit: contain; transition: transform var(--transition-normal); }
.cup-option:hover img { transform: scale(1.1); }
.cup-option span { font-weight: 700; text-align: center; color: var(--text-primary); font-size: 0.85rem; line-height: 1.2; }
.cup-option small { font-size: 0.7rem; color: var(--text-light); text-align: center; line-height: 1.15; }
.four-oz-note { margin-top: 8px; padding: 8px 12px; background: rgba(245,158,11,0.1); border-radius: var(--radius-md); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; font-style: italic; }

/* Tabs */
.product-tabs { margin-bottom: var(--spacing-lg); }
.tab-headers { display:flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); overflow-x:auto; }
.tab-btn { padding: var(--spacing-sm) var(--spacing-md); border:2px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); cursor:pointer; transition: all var(--transition-fast); font-size:0.9rem; font-weight:600; white-space:nowrap; }
.tab-btn:hover { border-color: var(--primary-light); }
.tab-btn.active { border-color: var(--primary-color); background: rgba(229, 94, 153, 0.1); color: var(--primary-color); }
.tab-content { display:none; background: var(--bg-secondary); padding: var(--spacing-lg); border-radius: var(--radius-lg); border:2px solid var(--border-light); }
.tab-content.active { display:block; }
.tab-content h3 { margin-bottom: var(--spacing-md); color: var(--primary-color); font-size:1.2rem; }

/* Turnaround options */
.turnaround-options { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing-sm); }
.turnaround-option { display:flex; align-items:center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--bg-primary); border:2px solid var(--border-color); border-radius: var(--radius-lg); cursor:pointer; transition: all var(--transition-normal); font-size:0.85rem; }
.turnaround-option:hover { border-color: var(--primary-light); transform: translateY(-1px); }
.turnaround-option.checked { border-color: var(--primary-color); background: rgba(229, 94, 153, 0.1); }
.turnaround-option input { accent-color: var(--primary-color); }
.turnaround-option span { font-weight:500; font-size:0.85rem; }

/* Checkbox/radio groups */
.checkbox-group { display:flex; align-items:center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--spacing-lg); border:2px solid var(--border-light); transition: all var(--transition-normal); cursor:pointer; }
.checkbox-group:hover { border-color: var(--primary-light); background: rgba(229, 94, 153, 0.05); }
.checkbox-group input[type="checkbox"] { width:20px; height:20px; accent-color: var(--primary-color); cursor:pointer; }
.checkbox-group label { margin:0; cursor:pointer; font-weight:500; text-transform:none; letter-spacing:normal; }

.lids-color-section { margin-top: var(--spacing-md); padding: var(--spacing-lg); background: var(--bg-secondary); border-radius: var(--radius-lg); border:2px solid var(--border-light); }
.lids-color-section .color-label { display:block; margin-bottom: var(--spacing-md); font-weight:600; color: var(--text-primary); font-size:0.95rem; }
.radio-group { display:flex; gap: var(--spacing-md); flex-wrap:wrap; }
.radio-option { display:flex; align-items:center; gap: var(--spacing-sm); cursor:pointer; padding: var(--spacing-sm) var(--spacing-md); background: var(--bg-primary); border-radius: var(--radius-md); border:2px solid var(--border-color); transition: all var(--transition-normal); }
.radio-option:hover { border-color: var(--primary-light); background: rgba(229, 94, 153, 0.05); }
.radio-option input[type="radio"] { accent-color: var(--primary-color); width:18px; height:18px; }
.radio-option span { font-weight:500; color: var(--text-primary); }

/* Price/Info */
.price-display { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color:#fff; padding: var(--spacing-lg); border-radius: var(--radius-xl); font-size:1.25rem; font-weight:700; text-align:center; box-shadow: var(--shadow-lg); display:flex; align-items:center; justify-content:center; gap: var(--spacing-sm); }
.processing-fee-hint { text-align:center; opacity:0.8; font-size:0.9rem; color: var(--text-secondary); margin-top: calc(var(--spacing-sm) * -1); }
.expected-date { background: rgba(255,255,255,0.8); padding: var(--spacing-md); border-radius: var(--radius-lg); text-align:center; border:1px solid var(--border-light); display:flex; flex-direction:column; align-items:center; gap: var(--spacing-xs); }
.expected-date strong { color: var(--primary-color); display:flex; align-items:center; gap: var(--spacing-xs); }

/* Submit Button */
.submit-btn { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color:#fff; padding: var(--spacing-lg) var(--spacing-xl); border:none; border-radius: var(--radius-xl); font-size:1.125rem; font-weight:600; cursor:pointer; transition: all var(--transition-normal); box-shadow: var(--shadow-lg); text-transform: uppercase; letter-spacing: 0.05em; }
.submit-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
.submit-btn:disabled { opacity:0.6; cursor:not-allowed; }

/* Footer */
.footer { background: rgba(255,255,255,0.1); backdrop-filter: blur(20px); color:#fff; text-align:center; padding: var(--spacing-md) var(--spacing-lg); margin-top: var(--spacing-md); }
.footer-top { margin-bottom: var(--spacing-sm); display:flex; justify-content:center; align-items:center; }
.footer-icon { width:40px; height:40px; transition: transform var(--transition-normal); opacity:0.9; }
.footer-icon:hover { transform: translateY(-3px) scale(1.1); }
.footer-bottom { font-size:0.875rem; opacity:0.9; }
.footer-bottom a { color:#fff; text-decoration:none; font-weight:600; }

/* Admin tables and stats */
.admin-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); }
.stat-card { background:#fff; padding: var(--spacing-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.stat-label { font-size:0.875rem; color: var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom: var(--spacing-sm); }
.stat-value { font-size:1.75rem; font-weight:700; color: var(--primary-color); }

.orders-table-container { overflow-x:auto; }
.orders-table { width:100%; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border-collapse:collapse; overflow:hidden; }
.orders-table thead { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color:#fff; }
.orders-table th { padding: var(--spacing-lg); text-align:left; font-weight:600; white-space:nowrap; }
.orders-table td { padding: var(--spacing-md) var(--spacing-lg); border-bottom:1px solid var(--border-color); }
.orders-table tbody tr:hover { background: var(--bg-tertiary); }
.order-number { font-weight:600; color: var(--primary-color); }
.phone-link { color: var(--primary-color); text-decoration:none; }
.phone-link:hover { text-decoration:underline; }
.price { font-weight:600; }
.status-badge { display:inline-block; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); font-size:0.875rem; font-weight:600; text-transform:capitalize; }
.status-badge.paid { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }
.status-badge.pending { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }

.admin-login-container { display:flex; align-items:center; justify-content:center; min-height:100vh; padding: var(--spacing-lg); }
.admin-login-card { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: var(--radius-2xl); padding: var(--spacing-2xl); box-shadow: var(--shadow-xl); width:100%; max-width:400px; }
.admin-login-card h2 { text-align:center; margin-bottom: var(--spacing-xl); color: var(--text-primary); }
.admin-login-form { display:flex; flex-direction:column; gap: var(--spacing-lg); }

.admin-grid { display:grid; gap: var(--spacing-lg); }
.admin-list { overflow-x:auto; }
.admin-form { background: var(--bg-secondary); padding: var(--spacing-xl); border-radius: var(--radius-lg); }
.btn { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); border:1px solid var(--border-color); background: var(--bg-primary); cursor:pointer; transition: all var(--transition-fast); font-size:0.875rem; }
.btn:hover { background: var(--bg-tertiary); border-color: var(--primary-light); }
.alert-success { background: rgba(16, 185, 129, 0.1); border:1px solid rgba(16, 185, 129, 0.2); color: var(--success-color); padding: var(--spacing-md); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg); }

/* Success/Cancel page styles */
.success-container, .cancel-container { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: var(--radius-2xl); padding: var(--spacing-2xl); box-shadow: var(--shadow-xl); text-align:center; }
.success-title, .cancel-title { color: var(--text-primary); font-size:2rem; font-weight:700; margin-bottom: var(--spacing-md); }
.success-subtitle, .cancel-subtitle { color: var(--text-secondary); font-size:1.125rem; margin-bottom: var(--spacing-2xl); }
.action-buttons { display:flex; gap: var(--spacing-md); justify-content:center; flex-wrap:wrap; }
.button { display:inline-block; padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-lg); font-weight:600; text-decoration:none; transition: all var(--transition-normal); cursor:pointer; border:none; font-size:1rem; }
.button.primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color:#fff; box-shadow: var(--shadow-md); }
.button.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.button.secondary { background:#fff; color: var(--primary-color); border:2px solid var(--primary-color); }
.button.secondary:hover { background: var(--bg-tertiary); }

/* Modal */
.modal-overlay { 
  position:fixed; 
  top:0; 
  left:0; 
  right:0; 
  bottom:0; 
  background: rgba(0,0,0,0.5); 
  display:flex; 
  align-items:flex-start; 
  justify-content:center; 
  z-index:2000; 
  padding: var(--spacing-lg); 
  overflow-y:auto; 
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior: contain; /* Prevent scroll chaining */
}
.modal-content { 
  background:#fff; 
  border-radius: var(--radius-xl); 
  padding: var(--spacing-2xl); 
  max-width:600px; 
  width:100%; 
  max-height:90vh; 
  overflow-y:auto; 
  margin-top:2rem; 
  margin-bottom:2rem; 
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior: contain; /* Prevent scroll chaining */
  position: relative; /* For proper stacking context */
  box-shadow: var(--shadow-xl); /* Better visibility */
}
.modal-content h2 { margin-bottom: var(--spacing-xl); color: var(--primary-color); }
.order-details-grid { display:grid; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); }
.detail-item { padding: var(--spacing-md); background: var(--bg-tertiary); border-radius: var(--radius-md); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .container { margin: var(--spacing-md); padding: var(--spacing-lg); max-width: calc(100vw - 2rem); border-radius: var(--radius-xl); }
  .container h2 { font-size: 1.5rem; }
  .header { padding: 0.625rem 0.75rem; }
  .header .logo { width:40px; }
  .cup-selector { grid-template-columns: repeat(2, 1fr); }
  .turnaround-options { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cup-selector { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .cup-option { width: 100px; padding: 6px; }
  .cup-image-container { width: 54px; height: 54px; }
  .cup-option img { width: 50px; height: 50px; }
  .cup-option span { font-size: 0.75rem; }
  .cup-option small { font-size: 0.65rem; }
}

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