/* ── CSS derived from spa2.html - Modernized for iOS Look ── */
:root {
  --ios-blue: #007aff;
  --ios-bg: rgba(255, 255, 255, 0.72);
  --ios-card-bg: #fff;
  --ios-border: rgba(0, 0, 0, 0.08);
  --ios-text: #000;
  --ios-sub: #8e8e93;
  --glass: blur(20px) saturate(180%);
}

#spa {
  display: flex;
  width: 100%;
  background: #f2f2f7;
  position: relative;
  min-height: 80vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

#nav {
  width: 240px;
  min-width: 240px;
  background: var(--ios-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-right: 1px solid var(--ios-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.nav-logo { padding: 22px 20px 18px; flex-shrink: 0 }
.nav-logo-t { font-size: 15px; font-weight: 700; color: #000; letter-spacing: -0.4px }
.nav-logo-s { font-size: 11px; color: var(--ios-sub); margin-top: 2px }

#nav-list { flex: 1; padding: 10px 0 }
.nav-item {
  display: flex; align-items: center; padding: 10px 16px; margin: 2px 10px;
  border-radius: 10px; cursor: pointer; font-size: 14px; color: #3a3a3c;
  transition: all 0.2s; user-select: none; gap: 10px; text-decoration: none !important;
}
.nav-item:hover { background: rgba(0, 0, 0, 0.04); color: #000 }
.nav-item.active { background: var(--ios-blue); color: #fff; font-weight: 600 }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #c7c7cc }
.nav-item.active .nav-dot { background: #fff }

#main { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0 }
#topbar {
  padding: 12px 20px; border-bottom: 1px solid var(--ios-border);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  background: var(--ios-bg); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  position: sticky; top: 0; z-index: 100;
}
#tb-title { font-size: 15px; font-weight: 700; flex: 1; color: #000; }

#content { flex: 1; padding: 20px; padding-bottom: 100px; }

.sec-label { font-size: 12px; font-weight: 600; color: var(--ios-sub); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px }

.ccard {
  border: none; border-radius: 14px; background: #fff; overflow: hidden;
  position: relative; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: left;
  cursor: pointer;
}
.ccard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08) }

.ccard.horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 20px;
}
.ccard.horizontal .cico { flex-shrink: 0; }
.ccard.horizontal .cmain-info {
  flex: 1.2;
  min-width: 0;
  padding: 0 20px;
}
.ccard.horizontal .cduration-box {
  width: 130px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--ios-border);
  border-right: 1px solid var(--ios-border);
  padding: 0 15px;
  height: 50px;
}
.ccard.horizontal .cdesc {
  flex: 1.5;
  padding: 0 24px;
  margin: 0;
  font-size: 13.5px;
  color: #3a3a3c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccard.horizontal .cacts {
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  min-width: 140px;
  padding-left: 20px;
}

.cduration-box {
  display: flex;
  flex-direction: column;
}
.cdur-val { font-weight: 700; color: #1c1c1e; font-size: 15px; }
.cdur-lab { font-size: 10px; color: #8e8e93; text-transform: uppercase; margin-top: 2px; letter-spacing: 0.05em; }


.cdesc {
  padding: 0 16px 12px;
  font-size: 13px;
  color: #3a3a3c;
  line-height: 1.4;
}
.cico {
  width: 44px; height: 44px; min-width: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.cinfo { flex: 1; min-width: 0 }
.ctitle { 
  font-size: 17px; 
  font-weight: 700; 
  color: #000; 
  line-height: 1.3; 
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cuni { font-size: 13px; color: var(--ios-sub); margin-bottom: 8px }
.csumm { font-size: 14px; color: #3a3a3c; line-height: 1.45 }

.ctags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.tag {
  font-size: 11px; padding: 4px 10px; border-radius: 8px;
  background: #f2f2f7; color: #636366; font-weight: 500;
}

.cacts { padding: 0 16px 16px; display: flex; gap: 10px; align-items: center }
.btn-enr {
  font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 20px;
  background: var(--ios-blue); color: #fff; border: none; cursor: pointer;
  transition: opacity 0.2s; text-decoration: none !important;
}
.btn-enr:hover { opacity: 0.8; color: #fff }
.btn-cmp {
  font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 20px;
  background: #f2f2f7; color: var(--ios-blue); border: none; cursor: pointer;
  transition: all 0.2s;
}
.btn-cmp:hover { background: #e5e5ea }

.chov {
  position: absolute; top: 12px; right: 12px; font-size: 11px;
  font-weight: 600; color: var(--ios-blue); cursor: pointer;
  padding: 4px 10px; background: rgba(0,122,255,0.08); border-radius: 10px;
}

.acc-sec { border-top: 1px solid var(--ios-border); padding: 12px 16px; font-size: 13px; color: #8e8e93; display: flex; gap: 15px }

/* ── Comparison Bottom Bar ── */
#cmp-bottom-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: rgba(28, 28, 30, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 12px 24px; border-radius: 40px; display: flex; align-items: center; gap: 20px;
  z-index: 1500; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3); color: #fff; width: auto; min-width: 320px; opacity: 0;
}
#cmp-bottom-bar.vis { transform: translateX(-50%) translateY(0); opacity: 1; }
.cmp-count { font-size: 14px; font-weight: 600; white-space: nowrap }
.cmp-btn-main {
  background: var(--ios-blue); color: #fff; border: none; padding: 10px 24px;
  border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.1s;
}
.cmp-btn-main:hover { transform: scale(1.03) }
.cmp-btn-clear {
  background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.2s;
}
.cmp-btn-clear:hover { background: rgba(255,255,255,0.25); }

#cmp-bar { display: none !important; } /* Hide the old top bar if needed, or keep for desktop */

/* ── Modal Overlays ── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; z-index: 2000; padding: 20px;
}
.overlay.vis { display: flex }
/* Scope under .overlay to override Bootstrap 5's .modal styles */
.overlay .modal {
  background: #fff; border-radius: 24px; width: 100%; max-width: 520px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.2); overflow: hidden;
  animation: iosModal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block; position: relative; pointer-events: auto;
}
.overlay .modal.modal-lg { max-width: 900px }
@keyframes iosModal { from { opacity: 0; transform: scale(0.9) translateY(40px) } to { opacity: 1; transform: scale(1) translateY(0) } }

.mhdr { padding: 20px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ios-border) }
.mico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800 }
.mtitle { font-size: 17px; font-weight: 700; color: #000 }
.msub { font-size: 13px; color: var(--ios-sub); margin-top: 2px }
.mx { background: #f2f2f7; border: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #8e8e93; cursor: pointer }

/* ── Comparison Table ── */
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed }
.cmp-table th { background: #f2f2f7; padding: 14px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--ios-border) }
.cmp-table th:first-child { width: 140px; color: var(--ios-sub) }
.cmp-table td { padding: 14px; border-bottom: 1px solid var(--ios-border); color: #1c1c1e; vertical-align: top }
.rl { font-size: 11px; color: var(--ios-sub); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 12px;
  padding: 10px 20px; font-size: 13px; z-index: 3000; opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
#toast.show { opacity: 1 }

/* ── FAB ── */
.fab-consult {
  position: fixed; bottom: 24px; left: 24px;
  background: linear-gradient(135deg, #34c759 0%, #2ea34d 100%);
  color: #fff; border-radius: 30px; padding: 13px 22px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 30px rgba(52, 199, 89, 0.4);
  z-index: 1100; text-decoration: none !important; transition: all 0.25s;
  border: none; cursor: pointer;
}
.fab-consult:hover { transform: translateY(-3px) scale(1.03); color: #fff; box-shadow: 0 12px 40px rgba(52, 199, 89, 0.55); }
.fab-pulse {
  position: fixed; bottom: 24px; left: 24px; z-index: 1090;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(52, 199, 89, 0.3); pointer-events: none;
  animation: fabPulse 2s ease-out infinite;
}
@keyframes fabPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ── Consultancy Form Modal ── */
.consult-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: none; align-items: flex-end; justify-content: center;
  z-index: 3500; padding: 0;
}
.consult-overlay.vis { display: flex; }
.consult-sheet {
  background: #fff; width: 100%; max-width: 540px;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.2);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden; max-height: 90vh; overflow-y: auto;
}
@media(min-width: 600px) {
  .consult-overlay { align-items: center; padding: 20px; }
  .consult-sheet { border-radius: 28px; max-height: 85vh; }
}
@keyframes slideUp { from { opacity: 0; transform: translateY(60px) } to { opacity: 1; transform: translateY(0) } }

.consult-header {
  background: linear-gradient(135deg, #1c3d5a 0%, #0f6e56 100%);
  padding: 28px 28px 24px; color: #fff; position: relative;
}
.consult-header-icon {
  width: 52px; height: 52px; background: rgba(255,255,255,0.15);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 14px;
}
.consult-header h3 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.consult-header p { font-size: 14px; opacity: 0.8; margin: 0; }
.consult-close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.consult-close:hover { background: rgba(255,255,255,0.3); }
.consult-body { padding: 28px; }
.consult-field {
  margin-bottom: 18px;
}
.consult-field label {
  display: block; font-size: 12px; font-weight: 700; color: #636366;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.consult-field input, .consult-field select, .consult-field textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid #e5e5ea; font-size: 15px; outline: none;
  transition: border-color 0.2s; background: #fafafa;
  font-family: inherit;
}
.consult-field input:focus, .consult-field select:focus, .consult-field textarea:focus {
  border-color: var(--ios-blue); background: #fff;
}
.consult-field textarea { resize: none; height: 90px; }
.consult-submit {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
  color: #fff; border: none; border-radius: 16px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: all 0.2s; margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0,122,255,0.3);
}
.consult-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0,122,255,0.4); }
.consult-submit:active { transform: translateY(0); }
.consult-trust {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #8e8e93; margin-top: 16px; justify-content: center;
}
.consult-success {
  text-align: center; padding: 40px 20px; display: none;
}
.consult-success .tick {
  width: 72px; height: 72px; background: linear-gradient(135deg, #34c759, #2ea34d);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin: 0 auto 20px; color: #fff;
  box-shadow: 0 10px 30px rgba(52,199,89,0.35);
  animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popIn { from { opacity: 0; transform: scale(0.5) } to { opacity: 1; transform: scale(1) } }
.consult-success h4 { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: #000; }
.consult-success p { font-size: 14px; color: #8e8e93; }

/* Detail specific */
.detail-hero { border-radius: 20px !important; margin-bottom: 30px !important; padding: 40px 30px !important; }
.desc-box { border-radius: 16px !important; background: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; font-size: 15px !important; line-height: 1.6 !important; }

/* ── Mobile ── */
@media(max-width: 768px) {
  #spa { flex-direction: column; }
  #nav { width: 100%; min-width: 100%; height: auto; border-right: none }
  #nav-list { display: flex; overflow-x: auto; padding: 8px; white-space: nowrap }
  .nav-item { margin: 0 5px; padding: 8px 14px; flex-shrink: 0 }
  #cmp-bottom-bar { bottom: 16px; min-width: 90%; width: 90%; }
}