/* SMART WAY MARINE CARGO LLC - shared brand tokens */
:root{
  --brand-blue:#3E87FB;
  --brand-blue-hover:#2c6ed1;
  --brand-black:#000000;
  --brand-white:#FFFFFF;
  --surface-gray:#F4F6FA;
  --border-gray:#E2E8F0;
  --text-main:#0F172A;
  --text-muted:#64748B;
  --status-success:#16A34A;
  --status-warning:#F59E0B;
  --status-info:#0EA5E9;
  --status-danger:#DC2626;
  --radius-md:0.75rem;
  --radius-lg:1rem;
  --shadow-md:0 10px 25px -5px rgba(0,0,0,.05),0 8px 10px -6px rgba(0,0,0,.01);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--surface-gray);color:var(--text-main);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4,.brand-display{font-family:'Baloo 2','Poppins',sans-serif;font-weight:800;color:var(--brand-black);letter-spacing:-.01em}

a{color:var(--brand-blue);text-decoration:none}
a:hover{text-decoration:underline}

.logo-wrap{background:#fff;display:inline-block;padding:.5rem 1rem;border:none;box-shadow:none;border-radius:0}
.logo-wrap img{display:block;max-height:80px;width:auto;height:auto}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:var(--radius-md);
  border:1px solid transparent;font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--brand-blue);color:#fff}
.btn-primary:hover{background:var(--brand-blue-hover);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--text-main);border-color:var(--border-gray)}
.btn-ghost:hover{border-color:var(--brand-blue);color:var(--brand-blue);text-decoration:none}
.btn-danger{background:var(--status-danger);color:#fff}
.btn-danger:hover{background:#b91c1c;text-decoration:none}

.badge{display:inline-block;padding:.18rem .55rem;border-radius:1rem;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.badge-success{background:#dcfce7;color:var(--status-success)}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-info{background:#e0f2fe;color:#075985}
.badge-danger{background:#fee2e2;color:var(--status-danger)}
.badge-muted{background:#f1f5f9;color:var(--text-muted)}

.alert{padding:.85rem 1.1rem;border-radius:.6rem;margin-bottom:1rem;font-size:.9rem}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a}

.input,select,textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--border-gray);border-radius:.55rem;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--text-main);transition:border-color .15s, box-shadow .15s}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(62,135,251,.15)}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:.82rem;font-weight:600;margin:0 0 .35rem;color:#1e293b}
.form-row{margin-bottom:1rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:680px){.form-grid{grid-template-columns:1fr}}
.required-mark{color:var(--status-danger)}

/* Wave divider — subtle nod to the maritime motif */
.wave-divider{height:18px;background:linear-gradient(90deg,transparent,var(--border-gray) 25%,var(--border-gray) 75%,transparent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 9 Q 50 0 100 9 T 200 9 T 300 9 T 400 9 T 500 9 T 600 9 T 700 9 T 800 9 T 900 9 T 1000 9 T 1100 9 T 1200 9 V18 H0Z' fill='black'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 9 Q 50 0 100 9 T 200 9 T 300 9 T 400 9 T 500 9 T 600 9 T 700 9 T 800 9 T 900 9 T 1000 9 T 1100 9 T 1200 9 V18 H0Z' fill='black'/></svg>") center/100% 100% no-repeat;}


/* Animated announcement bar keyframes (shared: public bar + settings preview) */
@keyframes swmcAnnSlide   { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes swmcAnnPulse   { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.25)} }
@keyframes swmcAnnShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }


/* ===================================================================
   Themed native inputs — date, datetime-local, file, color, select
   =================================================================== */
/* Brand accent for native controls (calendar highlight, checkboxes, radios) */
:root{ color-scheme: light; }
input, select, textarea{ accent-color: var(--brand-blue); }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"]{
  font-family:inherit; color:var(--text-main); position:relative; accent-color:var(--brand-blue);
  background:#fff; border:1px solid var(--border-gray); border-radius:.55rem;
}
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus, input[type="month"]:focus{
  outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(62,135,251,.15);
}
/* Recolor the native calendar/clock picker indicator to brand blue */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.7; border-radius:.3rem; padding:2px;
  filter:invert(41%) sepia(84%) saturate(2445%) hue-rotate(202deg) brightness(101%) contrast(94%);
  transition:opacity .15s, background .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover{ opacity:1; background:rgba(62,135,251,.12) }

/* File input — style the "choose file" button */
input[type="file"]{ padding:.45rem .6rem; cursor:pointer; }
input[type="file"]::file-selector-button{
  font-family:inherit; font-weight:600; font-size:.85rem; cursor:pointer;
  background:var(--brand-blue); color:#fff; border:0; border-radius:.5rem;
  padding:.5rem .9rem; margin-right:.85rem; transition:background .15s, transform .15s;
}
input[type="file"]::file-selector-button:hover{ background:var(--brand-blue-hover); transform:translateY(-1px); }
/* WebKit fallback */
input[type="file"]::-webkit-file-upload-button{
  font-family:inherit; font-weight:600; font-size:.85rem; cursor:pointer;
  background:var(--brand-blue); color:#fff; border:0; border-radius:.5rem;
  padding:.5rem .9rem; margin-right:.85rem;
}

/* Color picker swatches */
input[type="color"]{ -webkit-appearance:none; appearance:none; width:100%; height:42px; padding:.2rem; cursor:pointer;
  border:1px solid var(--border-gray); border-radius:.55rem; background:#fff; }
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0 }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:.35rem }

/* Native select arrow in brand color */
select.input{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233E87FB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.2rem;
}


/* ===================================================================
   Site Pre-loaders — full-screen, perfectly centered, responsive
   =================================================================== */
#swmcPreloader{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:#fff;transition:opacity .5s ease, visibility .5s ease}
#swmcPreloader.pl-hide{opacity:0;visibility:hidden;pointer-events:none}
#swmcPreloader .pl-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:1rem}
#swmcPreloader .pl-logo{max-width:150px;max-height:70px;width:auto;height:auto;object-fit:contain;
  animation:plLogoFade 1.6s ease-in-out infinite}
@keyframes plLogoFade{0%,100%{opacity:.55}50%{opacity:1}}
:root{--pl-color:#3E87FB}

/* Shared scene: a vehicle travelling along a dashed road with moving cargo dashes */
.pl-scene{position:relative;width:220px;height:96px;color:var(--pl-color);overflow:hidden}
.pl-scene .pl-vehicle{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  animation:plHover 1.4s ease-in-out infinite}
.pl-scene .pl-vehicle svg{width:80px;height:56px;display:block}
.pl-scene .pl-road{position:absolute;left:0;right:0;bottom:14px;height:4px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden}
.pl-scene .pl-road::before{content:'';position:absolute;top:0;left:0;height:100%;width:200%;
  background:repeating-linear-gradient(90deg,var(--pl-color) 0 14px,transparent 14px 30px);
  animation:plRoad .7s linear infinite;opacity:.85}
@keyframes plRoad{0%{transform:translateX(0)}100%{transform:translateX(-30px)}}
@keyframes plHover{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}

/* Clouds/waves drifting behind for depth */
.pl-scene .pl-trail{position:absolute;top:20px;left:0;right:0;height:40px;pointer-events:none}
.pl-scene .pl-trail span{position:absolute;height:5px;border-radius:99px;background:var(--pl-color);opacity:.22;
  animation:plTrail 1.1s linear infinite}
.pl-scene .pl-trail span:nth-child(1){top:4px;width:26px;left:100%;animation-delay:0s}
.pl-scene .pl-trail span:nth-child(2){top:20px;width:38px;left:100%;animation-delay:.35s}
.pl-scene .pl-trail span:nth-child(3){top:34px;width:20px;left:100%;animation-delay:.7s}
@keyframes plTrail{from{transform:translateX(0)}to{transform:translateX(-260px)}}

.pl-caption{font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem;color:var(--text-muted);letter-spacing:.03em}

/* AIR — plane flying */
.pl-air .pl-vehicle{animation:plFly 1.6s ease-in-out infinite}
@keyframes plFly{0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg)}50%{transform:translateX(-50%) translateY(-8px) rotate(3deg)}}

/* SEA — ship bobbing on a wave */
.pl-sea .pl-road{background:transparent}
.pl-sea .pl-road::before{height:100%;
  background:repeating-linear-gradient(90deg,var(--pl-color) 0 10px,transparent 10px 22px);
  border-radius:99px}
.pl-sea .pl-vehicle{animation:plBob 1.8s ease-in-out infinite}
@keyframes plBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-4deg)}50%{transform:translateX(-50%) translateY(-6px) rotate(4deg)}}

@media (max-width:640px){
  #swmcPreloader .pl-logo{max-width:120px;max-height:56px}
  .pl-scene{width:180px;height:84px}
  .pl-scene .pl-vehicle svg{width:66px;height:48px}
}