/*
|--------------------------------------------------------------------------
| How It Works (public page)  -  resources/views/guest/how-it-works.blade.php
|--------------------------------------------------------------------------
| Everything is scoped under .hiw so nothing here touches other pages.
| Colours match the homepage (home-v2.css).
*/

.hiw {
    --hiw-red: #ef233c;
    --hiw-red-dark: #cc1530;
    --hiw-navy: #071a3d;
    --hiw-navy-2: #0a2b57;
    --hiw-blue: #1167f1;
    --hiw-cyan: #eef7ff;
    --hiw-ink: #101828;
    --hiw-muted: #5b6678;
    --hiw-line: #e7ecf3;
    --hiw-bg: #f7f9fc;
    --hiw-radius: 18px;
    --hiw-shadow: 0 14px 36px rgba(8, 31, 65, 0.10);

    color: var(--hiw-ink);
    background: #fff;
    font-family: 'Cairo', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

.hiw *, .hiw *::before, .hiw *::after { box-sizing: border-box; }

.hiw-wrap {
    width: min(calc(100% - 32px), 1550px);
    margin-inline: auto;
}

.hiw h1, .hiw h2, .hiw h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.hiw p { margin: 0; }
.hiw ul, .hiw ol { margin: 0; padding: 0; list-style: none; }
.hiw a { color: var(--hiw-blue); font-weight: 700; text-decoration: none; }
.hiw a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.hiw .hiw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 12px;
    border: 2px solid transparent;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.hiw .hiw-btn:hover { transform: translateY(-2px); text-decoration: none; }
.hiw .hiw-btn:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.hiw .hiw-btn-red { background: var(--hiw-red); color: #fff; }
.hiw .hiw-btn-red:hover { background: var(--hiw-red-dark); color: #fff; }
.hiw .hiw-btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.hiw .hiw-btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------- Small labels ---------- */
.hiw-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fc4ff;
    margin-bottom: 14px;
}

.hiw-eyebrow-dark { color: var(--hiw-red); }

/* ---------- Hero ---------- */
.hiw-hero {
    background:
        radial-gradient(900px 420px at 85% 10%, rgba(17, 103, 241, 0.45), transparent 60%),
        linear-gradient(160deg, var(--hiw-navy) 0%, var(--hiw-navy-2) 100%);
    color: #fff;
    padding: 72px 0 84px;
}

.hiw-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.hiw-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    color: #fff;
}

.hiw-hero h1 span { color: #9fc4ff; }

.hiw-lead {
    margin-top: 20px !important;
    max-width: 54ch;
    font-size: 1.1rem;
    color: #d5e2f7;
}

.hiw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hiw-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    margin-top: 40px !important;
    padding-top: 26px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hiw-hero-facts strong { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.hiw-hero-facts span { font-size: 0.9rem; color: #b9cbe6; }

/* Route illustration */
.hiw-route { position: relative; aspect-ratio: 520 / 360; width: 100%; max-width: 520px; margin-inline: auto; }
.hiw-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.hiw-route-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 2.5;
    stroke-dasharray: 3 11;
    stroke-linecap: round;
}

.hiw-route-dot { fill: var(--hiw-red); stroke: #fff; stroke-width: 3; }

.hiw-stop {
    position: absolute;
    width: 132px;
    padding: 14px 10px;
    text-align: center;
    background: #fff;
    color: var(--hiw-ink);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -50%);
}

.hiw-stop i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 12px;
    background: var(--hiw-cyan);
    color: var(--hiw-blue);
    font-size: 1.1rem;
}

.hiw-stop b { display: block; font-size: 0.98rem; line-height: 1.2; }
.hiw-stop small { display: block; font-size: 0.74rem; color: var(--hiw-muted); line-height: 1.3; margin-top: 2px; }

.hiw-stop-a { left: 13.5%; top: 72%; }
.hiw-stop-b { left: 50%; top: 22%; }
.hiw-stop-b i { background: var(--hiw-red); color: #fff; }
.hiw-stop-c { left: 86.5%; top: 72%; }

/* ---------- Stores strip ---------- */
.hiw-stores { background: #fff; border-bottom: 1px solid var(--hiw-line); padding: 26px 0; }

.hiw-stores-label {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hiw-muted);
    margin-bottom: 16px !important;
}

.hiw-stores-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.hiw-stores-row li {
    display: grid;
    place-items: center;
    width: 132px;
    height: 58px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--hiw-line);
    border-radius: 12px;
}

.hiw-stores-row img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hiw-stores-row span { font-weight: 800; font-size: 0.9rem; }

/* ---------- Sections ---------- */
.hiw-section { padding: 80px 0; }
.hiw-section-tint { background: var(--hiw-bg); }

.hiw-heading { margin: 0 auto 48px; text-align: center; }
.hiw-heading h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; }
.hiw-heading p { margin-top: 12px; color: #fff7f8; font-size: 1.05rem; }

/* ---------- Steps (timeline) ---------- */
.hiw-steps { position: relative; max-width: 860px; margin-inline: auto !important; }

.hiw-steps::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #c9d6ea 0 6px, transparent 6px 14px);
}

.hiw-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 24px; }
.hiw-step + .hiw-step { margin-top: 22px; }

.hiw-step-no {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hiw-navy);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    box-shadow: 0 0 0 6px #fff;
}

.hiw-step-ours .hiw-step-no { background: var(--hiw-red); }

.hiw-step-card {
    position: relative;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--hiw-line);
    border-radius: var(--hiw-radius);
    box-shadow: 0 4px 14px rgba(8, 31, 65, 0.05);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.hiw-step-card:hover { box-shadow: var(--hiw-shadow); transform: translateY(-2px); }
.hiw-step-ours .hiw-step-card { background: #fff7f8; border-color: #ffd5db; }

.hiw-step-icon {
    float: right;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 0 8px 16px;
    border-radius: 12px;
    background: var(--hiw-cyan);
    color: var(--hiw-blue);
    font-size: 1.1rem;
}

.hiw-step-ours .hiw-step-icon { background: #ffe3e7; color: var(--hiw-red); }

.hiw-step-card h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 8px; }
.hiw-step-card p { color: var(--hiw-muted); max-width: 62ch; }

.hiw-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hiw-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hiw-ways { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px !important; }

.hiw-ways li {
    padding: 14px 16px;
    background: var(--hiw-bg);
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--hiw-muted);
}

.hiw-ways b { display: block; color: var(--hiw-ink); }

/* ---------- Delivery ---------- */
.hiw-ship { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.hiw-ship-card {
    padding: 30px 26px;
    background: #fff;
    border: 1px solid var(--hiw-line);
    border-radius: var(--hiw-radius);
    border-top: 5px solid var(--hiw-blue);
}

.hiw-ship-sea { border-top-color: var(--hiw-navy); }
.hiw-ship-door { border-top-color: var(--hiw-red); }

.hiw-ship-card > i { font-size: 1.6rem; color: var(--hiw-blue); margin-bottom: 14px; }
.hiw-ship-sea > i { color: var(--hiw-navy); }
.hiw-ship-door > i { color: var(--hiw-red); }

.hiw-ship-card h3 { font-size: 1.05rem; color: var(--hiw-muted); font-weight: 700; }
.hiw-ship-time { font-size: 2.3rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; margin: 2px 0 10px !important; }
.hiw-ship-card p:last-child { color: var(--hiw-muted); }

/* ---------- Tips ---------- */
.hiw-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }

.hiw-tips article { padding-top: 18px; border-top: 2px solid var(--hiw-ink); }
.hiw-tips i { font-size: 1.2rem; color: var(--hiw-red); margin-bottom: 10px; }
.hiw-tips h3 { font-size: 1.1rem; margin-bottom: 6px; }
.hiw-tips p { color: var(--hiw-muted); }

/* ---------- Help ---------- */
.hiw-help { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hiw-help h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
.hiw-help p { color: var(--hiw-muted); max-width: 46ch; }

.hiw-help-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.hiw .hiw-help-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--hiw-line);
    border-radius: 12px;
    color: var(--hiw-ink);
    transition: border-color 160ms ease, transform 160ms ease;
}

.hiw .hiw-help-links a:hover { border-color: var(--hiw-blue); transform: translateY(-2px); text-decoration: none; }
.hiw-help-links i { color: var(--hiw-blue); width: 20px; text-align: center; }

/* ---------- Closing call to action ---------- */
.hiw-cta {
    background: linear-gradient(160deg, var(--hiw-navy) 0%, var(--hiw-navy-2) 100%);
    color: #fff;
    padding: 76px 0;
    text-align: center;
}

.hiw-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; }
.hiw-cta p { margin-top: 10px; color: #d5e2f7; font-size: 1.05rem; }

.hiw-cta-form {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 28px auto 0;
    padding: 8px;
    background: #fff;
    border-radius: 16px;
}

.hiw-cta-form input {
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1rem;
    color: var(--hiw-ink);
}

.hiw-cta-form:focus-within { box-shadow: 0 0 0 3px #ffd166; }
.hiw-cta-note { font-size: 0.95rem !important; }
.hiw .hiw-cta-note a { color: #fff; text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .hiw-hero { padding: 52px 0 60px; }
    .hiw-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hiw-section { padding: 60px 0; }
    .hiw-ship { grid-template-columns: 1fr; }
    .hiw-tips { grid-template-columns: 1fr 1fr; }
    .hiw-help { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Phone ---------- */
@media (max-width: 575px) {
    .hiw-hero-actions .hiw-btn { flex: 1 1 100%; }
    .hiw-stop { width: 104px; padding: 10px 6px; }
    .hiw-stop i { width: 36px; height: 36px; font-size: 0.95rem; }
    .hiw-stop b { font-size: 0.85rem; }
    .hiw-stop small { font-size: 0.68rem; }
    .hiw-stop-a { left: 17%; }
    .hiw-stop-c { left: 83%; }
    .hiw-stores-row li { width: calc(50% - 6px); }
    .hiw-heading { margin-bottom: 32px; }
    .hiw-steps::before { left: 19px; }
    .hiw-step { grid-template-columns: 40px 1fr; gap: 14px; }
    .hiw-step-no { width: 40px; height: 40px; font-size: 1.05rem; box-shadow: 0 0 0 4px #fff; }
    .hiw-step-card { padding: 20px 18px; }
    .hiw-step-card h3 { font-size: 1.15rem; }
    .hiw-ways { grid-template-columns: 1fr; }
    .hiw-tips { grid-template-columns: 1fr; gap: 26px; }
    .hiw-help-links { grid-template-columns: 1fr; }
    .hiw-cta { padding: 56px 0; }
    .hiw-cta-form { flex-direction: column; background: transparent; padding: 0; }
    .hiw-cta-form input { background: #fff; border-radius: 12px; }
    .hiw-cta-form:focus-within { box-shadow: none; }
    .hiw-cta-form input:focus { box-shadow: 0 0 0 3px #ffd166; }
}

@media (prefers-reduced-motion: reduce) {
    .hiw .hiw-btn, .hiw-step-card, .hiw .hiw-help-links a { transition: none; }
    .hiw-route-dot { display: none; }
}

header {
    height: 20vh;
}