/* ViraWise Experience v4 — Loading experience & account center
   Contrast-forward UI without changing route, Firebase, payment or PRO logic. */

/* Never let presentation overrides make hidden screens visible. */
#loading-view.hidden,
#profile-modal.hidden { display:none!important; }

/* ─────────────────────────────── Route preparing ────────────────────────── */
#loading-view {
  display:flex!important;
  background:linear-gradient(155deg,#f5fbfa 0%,#edf6fc 49%,#f9fbff 100%)!important;
  color:#173348!important;
  isolation:isolate;
}
#loading-view::before {
  content:'';
  position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(#b9d8da 1px,transparent 1px);
  background-size:32px 32px;
  opacity:.30;
  mask-image:radial-gradient(ellipse at center,transparent 12%,black 90%);
  pointer-events:none;
}
.v4-loading-ambient {
  position:absolute;pointer-events:none;
  width:min(55vw,620px);aspect-ratio:1;
  border-radius:50%;filter:blur(68px);opacity:.42;z-index:-1;
}
.v4-loading-ambient-left {left:-24%;top:-38%;background:#beece3;}
.v4-loading-ambient-right {right:-23%;bottom:-44%;background:#c3dff9;}
.v4-loading-card {
  width:min(100%,560px);
  position:relative;
  text-align:center;
  padding:24px clamp(22px,4vw,46px) 33px;
  border:1px solid #dbe9eb;
  border-radius:32px;
  background:#fff;
  box-shadow:0 34px 105px rgba(22,74,97,.15),0 2px 7px rgba(22,74,97,.05);
  overflow:hidden;
}
.v4-loading-card::before {
  content:'';
  position:absolute;left:22%;right:22%;top:-1px;height:3px;
  background:linear-gradient(90deg,transparent,#1bbba4,transparent);
}
.v4-loading-brand {
  display:flex;gap:9px;align-items:center;justify-content:center;
  font-family:Manrope,'DM Sans',sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.065em;color:#17364a;
}
.v4-loading-brand-icon {
  display:grid;place-items:center;width:31px;height:31px;
  border-radius:10px;
  color:#fff;background:#0a847d;
}
.v4-loading-brand-tag {
  padding:5px 8px;
  border:1px solid #d9ebe7;
  border-radius:7px;background:#f0f9f7;
  font-family:'DM Sans',sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.075em;color:#187f77;margin-left:3px;
}
.v4-loading-art {
  position:relative;
  display:grid;place-items:center;
  width:218px;height:204px;
  margin:12px auto 7px;
}
.v4-loading-orbit {
  position:absolute;border-radius:50%;
  border:1px solid rgba(12,130,135,.18);
}
.v4-loading-orbit-one {width:192px;height:192px;}
.v4-loading-orbit-two {
  width:152px;height:152px;
  border-style:dashed;border-color:rgba(12,132,125,.26);
  animation:v4-orbit-spin 14s linear infinite;
}
.v4-loading-sweep {
  position:absolute;
  width:170px;height:170px;
  border-radius:50%;
  background:conic-gradient(from 15deg,transparent 0 270deg,rgba(22,178,164,.07) 305deg,rgba(22,178,164,.32) 360deg);
  animation:v4-orbit-spin 5s linear infinite;
}
.v4-loading-globe {
  display:grid;place-items:center;width:102px;height:102px;
  border-radius:29px;
  border:1px solid #d4ebe6;
  color:#07867c;background:linear-gradient(140deg,#e4faf4,#dceefb);
  box-shadow:0 12px 35px rgba(12,121,120,.12),inset 0 1px 0 #fff;
  font-size:47px;z-index:2;
}
.v4-loading-pin {
  position:absolute;z-index:3;
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:13px;
  background:#fff;border:1px solid #cbe4e4;
  box-shadow:0 8px 22px rgba(26,92,106,.13);
}
.v4-loading-pin-one {right:14px;top:39px;color:#0d9a87;animation:v4-pin-float 2.8s ease-in-out infinite;}
.v4-loading-pin-two {left:18px;bottom:25px;color:#2976b8;animation:v4-pin-float 2.8s ease-in-out -1.4s infinite;}
.v4-loading-eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #cbe8e1;background:#edfaf6;border-radius:999px;
  padding:8px 12px;color:#0b766e;
  font-size:10px;font-weight:900;letter-spacing:.115em;
}
.v4-loading-eyebrow > span {width:7px;height:7px;border-radius:50%;background:#11ad9d;box-shadow:0 0 0 4px rgba(17,173,157,.14);}
#loading-view .v4-loading-title {
  font-family:Manrope,'DM Sans',sans-serif;
  font-size:clamp(23px,4.5vw,31px)!important;
  letter-spacing:-.065em;
  line-height:1.21;
  font-weight:800!important;
  color:#163549!important;
  opacity:1!important;
  animation:none!important;
  text-shadow:none!important;
  margin:17px auto 10px!important;
}
#loading-view .v4-loading-desc {
  color:#456175!important;
  font-size:13px!important;line-height:1.68;
  max-width:390px;margin:0 auto 23px;opacity:1!important;
}
.v4-loading-journey {
  display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  gap:6px;align-items:center;
  padding:13px 14px;
  background:#f4f9fb;
  border:1px solid #e0ecf0;
  border-radius:17px;text-align:left;
  max-width:445px;margin:0 auto 23px;
}
.v4-loading-journey div {min-width:0;}
.v4-loading-journey small {
  display:block;margin-bottom:4px;
  color:#5f7686;font-size:9px;font-weight:800;letter-spacing:.12em;
}
.v4-loading-journey strong {
  display:block;color:#1d3c50!important;font-size:14px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v4-loading-journey-arrow {text-align:center;color:#0d9688;font-size:17px;}
.v4-loading-progress {
  width:100%;height:6px;overflow:hidden;border-radius:99px;
  background:#e6f0ef;position:relative;max-width:445px;margin:0 auto 13px;
}
.v4-loading-progress span {
  position:absolute;left:-34%;top:0;height:100%;width:34%;
  border-radius:99px;background:linear-gradient(90deg,#25c3b2,#1584ac);
  animation:v4-loader-move 2.1s ease-in-out infinite;
}
#loading-view .v4-loading-note {
  color:#5b7283!important;font-size:11px!important;
  letter-spacing:normal!important;
  line-height:1.5;font-weight:500;opacity:1!important;
}
.v4-loading-note i {color:#158b84;margin-right:5px;}
@keyframes v4-orbit-spin {to{transform:rotate(360deg)}}
@keyframes v4-pin-float {50%{transform:translateY(-6px)}}
@keyframes v4-loader-move {0%{left:-34%}50%{left:47%}100%{left:100%}}

/* ─────────────────────────────── Account center ────────────────────────── */
#profile-modal {
  overscroll-behavior:contain;
  padding:clamp(9px,2vw,24px);
}
#profile-modal .v4-profile-panel {
  width:min(100%,850px);height:auto;max-height:min(92dvh,850px);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:#f8fbfd!important;
  color:#1a3447!important;
  border:1px solid #e1eaf0!important;
  border-radius:27px!important;
  box-shadow:0 32px 110px rgba(8,31,53,.32)!important;
  overflow:hidden;
}
.v4-profile-heading {
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:19px clamp(18px,3vw,29px);
  background:#fff;border-bottom:1px solid #e7eef3;
}
.v4-profile-kicker {
  display:inline-flex;gap:7px;align-items:center;color:#08786f!important;
  font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
}
#profile-modal .v4-profile-heading h2 {
  color:#182f43!important;font-family:Manrope,sans-serif;
  font-size:23px;font-weight:800;letter-spacing:-.055em;
  margin:5px 0 2px;
}
#profile-modal .v4-profile-heading p {font-size:12px;color:#5a7284!important;}
.v4-profile-close {
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;
  background:#f1f5f8!important;color:#345469!important;
  border:1px solid #dce8ee!important;border-radius:12px;
  transition:background .2s ease;
}
.v4-profile-close:hover {background:#e0eeec!important;}
.v4-profile-scroll {
  min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:22px clamp(14px,3vw,28px) 26px;
  scrollbar-width:thin;scrollbar-color:#b9d7d5 transparent;
}
.v4-profile-summary {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;
  border:1px solid #e1eaf0;
  box-shadow:0 10px 25px rgba(34,72,97,.045);
  border-radius:20px;padding:19px 21px;margin-bottom:20px;
}
.v4-profile-user {display:flex;gap:15px;align-items:center;min-width:0;}
.v4-avatar-zone {width:77px;height:77px;flex:0 0 77px;}
.v4-profile-avatar-button {
  display:block;position:relative;
  width:77px;height:77px;overflow:visible;
  border-radius:22px;border:3px solid #e1f4ed;
  background:#e8f1f4;
  cursor:pointer;
}
.v4-profile-avatar {width:100%;height:100%;border-radius:19px;object-fit:cover;}
.v4-avatar-camera {
  position:absolute;right:-6px;bottom:-5px;display:grid;place-items:center;
  width:27px;height:27px;border:2px solid white;border-radius:9px;
  color:white!important;background:#08796f!important;font-size:10px;
}
.v4-profile-personal {min-width:0;}
.v4-profile-welcome {color:#087b72!important;font-size:9px;letter-spacing:.13em;font-weight:850;}
.v4-profile-name-row {display:flex;align-items:center;gap:7px;}
#profile-modal #profile-name {font-size:20px;font-family:Manrope,sans-serif;font-weight:800;color:#19374a!important;letter-spacing:-.055em;overflow-wrap:anywhere;}
.v4-name-edit {
  flex-shrink:0;width:27px;height:27px;border:1px solid #d9e7ec;border-radius:9px;
  background:#f6fafb;color:#395a6f!important;display:grid;place-items:center;
  font-size:11px;
}
.v4-profile-name-edit {display:flex;align-items:center;gap:5px;margin:5px 0;}
.v4-profile-name-edit.hidden {display:none!important;}
.v4-profile-name-edit input {
  width:min(210px,42vw);min-width:0;
  padding:8px 10px;border-radius:9px;border:1px solid #cbdce2!important;
  background:#fff!important;color:#1a3447!important;
  font-size:13px;
}
.v4-profile-name-edit button {
  flex:0 0 32px;height:32px;border-radius:9px;display:grid;place-items:center;
  border:1px solid #d9e7ec;background:#f2f8f8;color:#166e6b!important;
}
#profile-modal .v4-profile-email {
  font-size:12px;color:#567184!important;margin-top:3px;
  overflow-wrap:anywhere;
}
.v4-profile-stats {display:grid;grid-template-columns:repeat(3,minmax(66px,1fr));gap:8px;min-width:265px;}
.v4-profile-stats > div {
  text-align:center;padding:11px 7px;background:#f4f9fa;
  border-radius:12px;border:1px solid #e6eef1;
}
.v4-profile-stats strong {display:block;color:#153c50!important;font-size:23px;font-family:Manrope,sans-serif;line-height:1.1;font-weight:800;}
.v4-profile-stats span {display:block;margin-top:7px;font-size:9px;letter-spacing:.08em;font-weight:800;color:#657d8d!important;}
.v4-profile-grid {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start;}
.v4-profile-main,.v4-profile-side {min-width:0;}
.v4-profile-section-heading {margin:0 0 12px;}
#profile-modal .v4-profile-section-heading h3 {
  font-size:14px;font-weight:800;color:#193549!important;
  letter-spacing:-.025em;
}
#profile-modal .v4-profile-section-heading p {font-size:11px;color:#607889!important;margin-top:3px;}
.v4-profile-actions {display:grid;gap:8px;}
.v4-profile-action {
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 13px;border:1px solid #deeaef;border-radius:13px;
  background:#fff!important;color:#264357!important;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.v4-profile-action:hover {border-color:#8fcfc4;background:#f2faf8!important;transform:translateY(-1px);}
.v4-profile-action > i:first-child {
  display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;
  border-radius:12px;background:#e9f7f3;color:#087d74!important;font-size:15px;
}
.v4-profile-action:nth-child(2) > i:first-child {background:#eaf1ff;color:#3972b1!important;}
.v4-profile-action:nth-child(3) > i:first-child {background:#fff3e9;color:#c26c31!important;}
.v4-profile-action > span {display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;}
.v4-profile-action strong {font-size:13px;color:#1f3b4e!important;}
.v4-profile-action small {font-size:11px;color:#667d8f!important;}
.v4-profile-action > i:last-child {font-size:11px;color:#91a5b2!important;}
.v4-profile-recent {
  border:1px solid #dfebf0;border-radius:16px;padding:16px;
  background:#fff;margin-top:19px;
}
.v4-profile-inline-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;}
#profil-rota-sayaci {
  color:#0b756d!important;background:#edf8f5;border:1px solid #cee9df;
  border-radius:999px;font-size:10px;font-weight:800;padding:5px 9px;
}
#profil-rotalar-listesi {display:grid;gap:7px;}
#profile-modal #profil-rotalar-listesi > div {
  padding:10px 12px!important;border:1px solid #e0eaef!important;
  border-radius:11px;background:#f8fafb!important;color:#213b4f!important;
}
#profile-modal #profil-rotalar-listesi .text-white {color:#233f52!important;}
#profile-modal .v4-profile-empty {font-size:12px;color:#647c8c!important;text-align:center;padding:14px;}
#profile-modal #pro-promo-box {
  display:block;
  padding:17px!important;
  border:1px solid #cbe5df!important;
  border-radius:16px!important;
  box-shadow:none!important;
  background:linear-gradient(135deg,#eaf8f2,#eff7fc)!important;
  min-height:0;
  overflow:hidden;
  color:#244658!important;
}
#profile-modal #pro-promo-box .v4-member-standard {display:flex;flex-direction:column;gap:10px;}
.v4-member-tag {display:inline-flex;align-items:center;gap:8px;font-weight:850;font-size:14px;color:#174c4b!important;}
.v4-member-tag i {color:#b97926;}
#profile-modal #pro-promo-box :is(h3,.text-white) {font-size:15px!important;color:#23475a!important;}
#profile-modal #pro-promo-box :is(p,li,.text-slate-300) {font-size:11px!important;line-height:1.6;color:#4d6779!important;}
#profile-modal #pro-promo-box button.bg-amber-500,
#profile-modal #pro-promo-box button.bg-gradient-to-r,
#profile-modal #pro-promo-box .v4-member-upgrade {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:auto!important;max-width:100%;
  min-height:38px;padding:9px 15px!important;
  border-radius:11px!important;border:0!important;
  background:#0a7f77!important;color:#fff!important;
  box-shadow:none!important;font-size:12px!important;font-weight:800!important;
}
#profile-modal #pro-promo-box .relative.z-10.text-center {
  display:grid!important;
  justify-items:start!important;
  align-items:center!important;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:8px;row-gap:6px;text-align:left!important;
}
#profile-modal #pro-promo-box .relative.z-10.text-center > .w-14 {display:none!important;}
#profile-modal #pro-promo-box .relative.z-10.text-center h3,
#profile-modal #pro-promo-box .relative.z-10.text-center p {grid-column:1 / -1;margin:0!important;}
#profile-modal #pro-promo-box .relative.z-10.text-center > span {grid-column:1;grid-row:auto;margin:4px 0!important;font-size:9px!important;}
#profile-modal #pro-promo-box .relative.z-10.text-center > .border-t {grid-column:1 / -1;width:100%;padding-top:8px!important;margin-top:0;}
#profile-modal #pro-promo-box .relative.z-10.text-center > .border-t button {
  text-decoration:underline;color:#925511!important;font-size:11px!important;
}
#profile-modal #pro-promo-box > .relative.z-10:not(.text-center) > ul {display:none!important;}
#profile-modal #pro-promo-box > .relative.z-10:not(.text-center) h3 {margin-bottom:0;}
#profile-modal #pro-promo-box > .relative.z-10:not(.text-center) > div:first-child {margin-bottom:10px!important;}
#profile-modal #pro-promo-box :is(.text-amber-400,.text-amber-500) {color:#a66011!important;}
#profile-modal #pro-promo-box :is(.text-emerald-400,.text-emerald-500) {color:#087d72!important;}
.v4-profile-badges {
  margin-top:15px;
  background:#fff;border:1px solid #deeaef;border-radius:15px;
  overflow:hidden;
}
.v4-profile-badges summary {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 14px;
  color:#264353!important;cursor:pointer;list-style:none;font-size:12px;font-weight:800;
}
.v4-profile-badges summary::-webkit-details-marker {display:none;}
.v4-profile-badges summary span {display:inline-flex;align-items:center;gap:8px;}
.v4-profile-badges summary span i {color:#b77b2f;}
.v4-profile-badges summary > i {color:#648095;transition:transform .2s ease;font-size:11px;}
.v4-profile-badges[open] summary > i {transform:rotate(180deg);}
.v4-badges-grid {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;padding:0 12px 13px;
}
.v4-badge-item {
  min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#f4f8fa;border:1px solid #e2ebef;border-radius:10px;
  padding:10px 3px;color:#486277!important;
}
.v4-badge-item i {color:#0f8f86!important;font-size:16px;}
.v4-badge-item span {color:#526b7b!important;font-size:9px;line-height:1.3;text-align:center;font-weight:700;}
.v4-profile-footer {
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px clamp(18px,3vw,29px);
  background:#fff;border-top:1px solid #e3ebf0;
}
.v4-profile-footer > span {font-size:11px;color:#667e8e!important;}
.v4-profile-footer > span i {color:#138a7e;margin-right:5px;}
#profile-modal .v4-profile-logout {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:38px;flex-shrink:0;border-radius:10px;
  padding:9px 15px;border:1px solid #f0d8dd!important;
  background:#fff4f5!important;color:#a63e52!important;font-weight:750;font-size:12px;
}
#profile-modal .v4-profile-logout :is(span,i) {color:#a63e52!important;}
#profile-modal .v4-profile-logout:hover {background:#fdecef!important;}
#profile-modal :where(button,input,summary):focus-visible {
  outline:3px solid #0e9489!important;outline-offset:2px!important;
}
/* Small screens: compact identity, one column, reachable account footer. */
@media(max-width:760px) {
  #profile-modal .v4-profile-panel {max-height:94dvh;border-radius:22px!important;}
  .v4-profile-scroll {padding:15px;}
  .v4-profile-summary {flex-direction:column;align-items:stretch;gap:15px;padding:15px;}
  .v4-profile-stats {min-width:0;}
  .v4-profile-grid {grid-template-columns:1fr;}
  .v4-profile-side {display:grid;grid-template-columns:1fr;gap:0;}
  .v4-profile-heading {padding:14px 17px;}
  #profile-modal .v4-profile-heading h2 {font-size:20px;}
}
@media(max-width:460px) {
  #loading-view {padding:13px!important;}
  .v4-loading-card {padding:16px 15px 23px;border-radius:24px;}
  .v4-loading-art {width:182px;height:166px;margin:7px auto;}
  .v4-loading-orbit-one {width:164px;height:164px;}
  .v4-loading-orbit-two {width:127px;height:127px;}
  .v4-loading-sweep {width:146px;height:146px;}
  .v4-loading-globe {width:82px;height:82px;font-size:37px;border-radius:25px;}
  .v4-loading-pin {width:31px;height:31px;}
  #loading-view .v4-loading-title {font-size:23px!important;}
  .v4-loading-brand-tag {font-size:8px;}
  .v4-loading-journey {padding:11px 10px;}
  .v4-loading-journey strong {font-size:12px;}
  .v4-profile-heading p {display:none;}
  .v4-profile-footer > span {display:none;}
  .v4-profile-footer {justify-content:flex-end;padding:10px 14px;}
  .v4-profile-stats strong {font-size:20px;}
  .v4-avatar-zone,.v4-profile-avatar-button {width:66px;height:66px;}
  .v4-avatar-zone {flex-basis:66px;}
}
@media(prefers-reduced-motion:reduce) {
  .v4-loading-orbit-two,.v4-loading-sweep,.v4-loading-pin,
  .v4-loading-progress span {animation:none!important;}
  .v4-loading-progress span {left:0!important;width:65%!important;}
  .v4-profile-action,.v4-profile-badges summary > i {transition:none!important;}
}
@media print {
  #loading-view,#profile-modal {display:none!important;}
}