/* UI/UX enhancement layer v0.2.4-20260123-0144
 * Purpose: Non-invasive visual improvements, animations, and responsiveness
 * Target: Duda-exported template (no template file modification)
 * Scope: Global theme vars, button styles, mobile fixes, track page layout
 */

/* === Global Theme Variables === */
:root{
  --primary:rgba(23,70,93,.91);
  --secondary:#4CAF50;
  --uiux-ease:cubic-bezier(.4,0,.2,1);
  --uiux-delay:0ms;
}

/* === Unified Button Styles === */
#dmRoot input[type="submit"],
#dmRoot .dmButtonLink{
  border-radius:12px!important;
  transition:all 220ms var(--uiux-ease)!important;
  font-weight:600!important;
  box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
}
#dmRoot input[type="submit"]:hover,
#dmRoot .dmButtonLink:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.18)!important;
  transform:translateY(-1px);
}

/* === Mobile Button Centering === */
@media (max-width:767px){
  /* CTA buttons */
  .dmButtonLink.dmWidget{
    display:flex!important;
    width:min(320px,100%);
    margin-left:auto!important;
    margin-right:auto!important;
  }
  /* Form submit buttons (except track form #id1864340175) */
  #dmRoot #dm .dmformsubmit:not(#id1864340175){
    width:100%;
    display:flex;
    justify-content:center;
  }
  #dmRoot #dm .dmformsubmit:not(#id1864340175) input[type="submit"]{
    width:min(320px,100%);
  }
}

/* === Input Fields === */
#dmRoot #dm input[type="text"],
#dmRoot #dm input[type="email"],
#dmRoot #dm input[type="tel"],
#dmRoot #dm textarea{
  border:2px solid rgba(23,70,93,.18)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.92)!important;
  transition:box-shadow 160ms var(--uiux-ease),border-color 160ms var(--uiux-ease);
}
#dmRoot #dm input[type="text"]:focus,
#dmRoot #dm input[type="email"]:focus,
#dmRoot #dm input[type="tel"]:focus,
#dmRoot #dm textarea:focus{
  outline:none!important;
  border-color:rgba(23,70,93,.35)!important;
  box-shadow:0 0 0 6px rgba(23,70,93,.12);
}

/* === Reveal Animation === */
.uiux-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 520ms var(--uiux-ease),transform 520ms var(--uiux-ease);
  transition-delay:var(--uiux-delay,0ms);
  will-change:opacity,transform
}
.uiux-reveal.uiux-inview{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .uiux-reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   TRACK PAGE - COMPLETE REDESIGN (Reference: Gemini Design)
   ============================================================ */

/* --- Track Page Wrapper --- */
.track-page-wrapper{
  width:100%;
  min-height:100vh;
  background:linear-gradient(180deg, #e8f4f8 0%, #f5f9fb 50%, #fff 100%);
}

/* Search-only layout: center the search module in the main content area */
.track-page-wrapper--searchonly{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 80px);
}
.track-page-wrapper--searchonly .track-hero{
  flex:1;
  display:flex;
  align-items:center;
}
.track-page-wrapper--searchonly .track-hero-content{
  width:100%;
}
.track-page-wrapper--searchonly .track-content{
  display:none;
}

/* --- Content Container (Status + Timeline + No results) --- */
.track-content{
  max-width:900px;
  margin:0 auto;
  padding:0 20px 60px;
}

/* --- Hero Section --- */
.track-hero{
  position:relative;
  /* Keep hero content below the fixed header (prevents title being covered on desktop). */
  padding:96px 20px 32px;
  text-align:center;
  overflow:hidden;
}
.track-hero-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, #dbeef5 0%, #f0f7fa 50%, #e8f0f5 100%);
  z-index:0;
}
.track-hero-bg::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle at 30% 70%, rgba(76,175,80,0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(23,70,93,0.06) 0%, transparent 50%);
  animation:heroFloat 20s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2%,2%)}
}
.track-hero-content{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0 auto;
}

/* --- Track Title --- */
.track-title{
  font-family:'Playfair Display', 'Georgia', serif;
  font-size:clamp(32px,8vw,56px);
  font-weight:500;
  font-style:italic;
  color:rgba(23,70,93,0.92);
  margin:0 0 32px;
  letter-spacing:-0.02em;
  line-height:1.1;
}

/* --- Search Box --- */
.track-search-form{
  width:100%;
  max-width:600px;
  margin:0 auto;
}
.track-search-box{
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:50px;
  box-shadow:0 4px 24px rgba(23,70,93,0.12), 0 1px 3px rgba(0,0,0,0.06);
  padding:6px 6px 6px 20px;
  gap:8px;
  transition:box-shadow 0.3s ease, transform 0.2s ease;
}
.track-search-box:focus-within{
  box-shadow:0 6px 32px rgba(23,70,93,0.18), 0 2px 8px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
.track-search-icon{
  color:rgba(23,70,93,0.4);
  font-size:18px;
  flex-shrink:0;
}
.track-search-input{
  flex:1;
  border:none!important;
  background:transparent!important;
  font-size:17px;
  font-weight:500;
  padding:12px 8px!important;
  color:#1f2a33;
  outline:none!important;
  box-shadow:none!important;
  min-width:0;
}
.track-search-input::placeholder{
  color:rgba(23,70,93,0.4);
}
.track-search-btn{
  /* NOTE: some theme CSS overrides generic <button> styles with !important,
     so we use !important here to ensure the submit button stays visible. */
  background:linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:50px !important;
  padding:14px 32px !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0.08em;
  cursor:pointer;
  transition:all 0.25s ease;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
}

/* Force-override higher-specificity theme button styles */
body#dmRoot .dmInner .track-page-wrapper .track-search-box button.track-search-btn{
  background:linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;
  background-color:#1a5276 !important;
  background-image:linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* If any theme CSS hides button text (font-size:0, text-indent, etc), force it back. */
body#dmRoot .dmInner .track-page-wrapper .track-search-box button.track-search-btn,
body#dmRoot .dmInner .track-page-wrapper .track-search-box button.track-search-btn *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:14px !important;
  line-height:1.1 !important;
  text-indent:0 !important;
  letter-spacing:0.5px !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  text-shadow:none !important;
}
body#dmRoot .dmInner .track-page-wrapper .track-search-box button.track-search-btn::before,
body#dmRoot .dmInner .track-page-wrapper .track-search-box button.track-search-btn::after{
  content:none !important;
  display:none !important;
}
.track-search-btn:hover{
  background:linear-gradient(135deg, #3498db 0%, #2471a3 100%) !important;
  transform:scale(1.02);
  box-shadow:0 4px 12px rgba(41,128,185,0.3);
}

/* --- Status Card --- */
.track-status-card{
  max-width:800px;
  margin:-24px auto 30px;
  background:linear-gradient(135deg, #1a5568 0%, #2c7a7b 40%, #38a89d 100%);
  border-radius:20px;
  padding:28px 32px;
  color:#fff;
  box-shadow:0 8px 32px rgba(23,70,93,0.2);
  position:relative;
}
.track-status-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:12px;
}
.track-status-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.track-status-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  opacity:0.8;
}
.track-status-id{
  font-size:22px;
  font-weight:700;
  letter-spacing:0.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.track-status-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(76,175,80,0.95);
  padding:8px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  flex:0 0 auto;
}
.track-status-badge i{
  font-size:14px;
}

/* --- Progress Steps --- */
.track-progress{
  position:relative;
  padding-top:10px;
}
.track-progress-line{
  position:absolute;
  top:35px;
  left:10%;
  right:10%;
  height:4px;
  background:rgba(255,255,255,0.25);
  border-radius:2px;
  z-index:0;
}
.track-progress-fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:#fff;
  border-radius:2px;
}
.track-progress-steps{
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.track-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  flex:1;
  max-width:120px;
}
.track-step-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  margin-bottom:12px;
  transition:all 0.3s ease;
  border:3px solid transparent;
}
.track-step.completed .track-step-icon{
  background:#fff;
  color:#1a5568;
}
.track-step.active .track-step-icon{
  background:#fff;
  color:#38a89d;
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 0 0 6px rgba(255,255,255,0.15);
}
.track-step-flag{
  font-size:28px!important;
  background:rgba(255,255,255,0.3)!important;
}
.track-step-country i{
  font-size:20px;
}
.track-step-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  opacity:0.75;
  margin-bottom:4px;
}
.track-step-value{
  font-size:14px;
  font-weight:600;
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- Timeline Section --- */
.track-timeline-section{
  max-width:800px;
  margin:0 auto;
  padding:20px 0 0;
}
.track-timeline-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:30px;
}
.track-timeline-emoji{
  font-size:28px;
}
.track-timeline-header h2{
  font-family:'Lato', sans-serif;
  font-size:clamp(20px, 4.6vw, 26px)!important;
  font-weight:400;
  color:#333;
  margin:0;
  text-transform:lowercase;
  line-height:1.2;
}

/* --- Timeline --- */
.track-timeline{
  position:relative;
  padding:0 10px;
}
.track-timeline::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, #e0e0e0 0%, #bdbdbd 100%);
  transform:translateX(-50%);
}

/* --- Timeline Item --- */
.track-timeline-item{
  position:relative;
  display:flex;
  align-items:center;
  margin-bottom:20px;
  width:100%;
}
.track-timeline-item.left{
  flex-direction:row;
  padding-right:calc(50% + 30px);
}
.track-timeline-item.right{
  flex-direction:row-reverse;
  padding-left:calc(50% + 30px);
}

/* --- Timeline Card --- */
.track-timeline-card{
  background:#fff;
  border-radius:12px;
  padding:16px 20px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  border-left:4px solid #2980b9;
  flex:1;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.track-timeline-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.track-timeline-card-time{
  font-size:12px;
  color:#8a97a3;
  white-space:nowrap;
  flex:0 0 auto;
}
.track-timeline-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.track-timeline-item.right .track-timeline-card{
  border-left:none;
  border-right:4px solid #4CAF50;
}
.track-timeline-card-title{
  font-size:clamp(14px, 3.8vw, 16px)!important;
  font-weight:700;
  color:#1a5568;
  margin:0 0 6px;
  line-height:1.2;
}
.track-timeline-card-location{
  font-size:13px;
  color:#666;
  margin:0 0 4px;
}
.track-timeline-card-desc{
  font-size:13px;
  color:#888;
  margin:0;
}

/* --- Timeline Node --- */
.track-timeline-node{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#fff;
  z-index:2;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}
.track-timeline-node.blue{
  background:linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
}
.track-timeline-node.green{
  background:linear-gradient(135deg, #4CAF50 0%, #2e7d32 100%);
}

/* --- No Results --- */
.track-no-results{
  text-align:center;
  padding:60px 20px;
  color:#666;
}
.track-no-results i{
  font-size:48px;
  color:#bbb;
  margin-bottom:20px;
}
.track-no-results h3{
  font-size:20px;
  color:#555;
  margin:0 0 8px;
}
.track-no-results p{
  margin:0;
  color:#888;
}

/* --- Mobile Responsive --- */
@media (max-width:768px){
  .track-page-wrapper--searchonly{
    min-height:calc(100vh - 64px);
  }
  .track-page-wrapper--searchonly .track-hero{
    padding:72px 16px 22px;
  }
  .track-hero{
    /* Keep hero content below the fixed mobile header (prevents title being covered). */
    padding:72px 16px 22px;
  }
  .track-title{
    font-size:clamp(28px,7vw,42px);
    margin-bottom:24px;
  }
  .track-search-box{
    flex-direction:column;
    border-radius:16px;
    padding:12px;
    gap:10px;
  }
  .track-search-icon{
    display:none;
  }
  .track-search-input{
    width:100%;
    text-align:center;
    padding:14px!important;
    font-size:16px;
  }
  .track-search-btn{
    width:100%;
    padding:14px 24px;
  }
  
  .track-content{
    padding:0 0 40px;
  }
  .track-status-card{
    margin:-12px 16px 24px;
    padding:20px;
    border-radius:16px;
  }
  .track-status-header{
    /* Badge should stay on the same row as Tracking ID on mobile. */
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap;
    width:100%;
  }
  .track-status-id{
    font-size:18px;
  }
  .track-status-badge{
    padding:6px 12px;
    font-size:12px;
  }
  .track-progress-line{
    display:none;
  }
  .track-progress-steps{
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
  }
  .track-step{
    flex:0 0 calc(50% - 8px);
    max-width:none;
  }
  .track-step-icon{
    width:44px;
    height:44px;
    font-size:18px;
  }
  
  .track-timeline-section{
    padding:16px 16px 0;
  }
  .track-timeline-header h2{
    font-size:clamp(18px, 6vw, 24px)!important;
  }
  .track-timeline-card-title{
    font-size:clamp(14px, 4.4vw, 16px)!important;
  }
  .track-timeline-card-head{
    flex-wrap:wrap;
  }
  .track-timeline-card-time{
    width:100%;
    white-space:normal;
  }
  .track-timeline::before{
    left:21px;
  }
  .track-timeline-item,
  .track-timeline-item.left,
  .track-timeline-item.right{
    flex-direction:row;
    padding:0 0 0 60px;
  }
  .track-timeline-node{
    left:21px;
    width:36px;
    height:36px;
    font-size:14px;
  }
  .track-timeline-card,
  .track-timeline-item.right .track-timeline-card{
    border-left:4px solid #2980b9;
    border-right:none;
  }
  .track-timeline-item:nth-child(even) .track-timeline-card{
    border-left-color:#4CAF50;
  }
}

/* === Mobile Drawer: Overlay Pointer Events Fix === */
.runtime-module-container .layout-drawer-overlay{
  pointer-events:none;
  transition:opacity .3s ease;
}
.runtime-module-container .layout-drawer-overlay.active{
  pointer-events:initial;
}
/* Drawer nav links: only clickable when drawer is open */
#hamburger-drawer,
#hamburger-drawer nav,
#hamburger-drawer nav a,
#layout-drawer-overlay nav,
#layout-drawer-overlay nav a,
.d-desktop-hidden nav,
.d-desktop-hidden nav a{
  pointer-events:none;
}
.layout-drawer-overlay.active ~ * #hamburger-drawer,
.layout-drawer-overlay.active ~ * #hamburger-drawer nav,
.layout-drawer-overlay.active ~ * #hamburger-drawer nav a,
.layout-drawer-overlay.active nav,
.layout-drawer-overlay.active nav a,
body.drawer-open #hamburger-drawer,
body.drawer-open #hamburger-drawer nav,
body.drawer-open #hamburger-drawer nav a,
body.drawer-open #layout-drawer-overlay nav,
body.drawer-open #layout-drawer-overlay nav a{
  pointer-events:auto;
}