/* CHIPREGISTER_GPS_TRACKER_PAGE_V2 */
:root{--gps-navy:#032852;--gps-deep:#001e41;--gps-green:#0b8b34;--gps-green2:#0a722a;--gps-text:#062653;--gps-line:#e3edf4;--gps-shadow:0 8px 28px rgba(6,38,83,.08)}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--gps-text)}
.gps-page{font-family:Arial,Helvetica,sans-serif;background:#fff}
.gps-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.gps-hero{width:100%;background:var(--gps-deep)}
.gps-hero img{display:block;width:100%;height:auto}
.gps-how{padding:24px 0 30px}
.gps-title{text-align:center;font-size:34px;line-height:1.1;margin:0 0 28px;font-weight:800}
.gps-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.gps-step{text-align:center;position:relative;padding:0 6px}
.gps-step:not(:last-child)::after{content:"→";position:absolute;right:-18px;top:57px;color:var(--gps-green);font-size:38px}
.gps-step-num{position:absolute;left:13%;top:-8px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gps-green);color:#fff;font-size:18px;font-weight:800;border:3px solid #fff}
.gps-step-visual{width:132px;height:132px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff,#edf3f7);display:grid;place-items:center}
.gps-step h3{font-size:18px;margin:0 0 9px;line-height:1.25}
.gps-step p{font-size:14px;line-height:1.55;margin:0}
.gps-svg{width:74px;height:74px}
.gps-grid{display:grid;grid-template-columns:1fr 1.28fr;gap:20px;margin-bottom:18px}
.gps-card{border:1px solid var(--gps-line);border-radius:14px;background:#fff;box-shadow:var(--gps-shadow);padding:25px}
.gps-identity-copy h2{margin:0 0 14px;font-size:25px;line-height:1.2}
.gps-identity-copy .green{color:var(--gps-green)}
.gps-identity-copy p{margin:0;font-size:15px;line-height:1.65}
.gps-image-card{padding:18px;display:flex;align-items:center;justify-content:center}
.gps-image-card img{display:block;width:100%;height:auto}
.gps-lower{display:grid;grid-template-columns:.95fr 1.25fr;gap:20px;margin-bottom:18px}
.gps-coverage h2,.gps-multi h2{font-size:22px;margin:0 0 10px}
.gps-coverage p,.gps-multi p{font-size:14px;line-height:1.58;margin:5px 0}
.gps-coverage-media{display:grid;grid-template-columns:1fr 112px;gap:18px;align-items:end;margin-top:14px}
.gps-world,.gps-multi-img{display:block;width:100%;height:auto}
.gps-sim{display:block;width:100%;height:auto;max-height:210px;object-fit:contain}
.gps-multi-img{margin-top:13px}
.gps-security{margin-top:14px;border-radius:13px;background:linear-gradient(135deg,#002b59,#001b3a);color:#fff;display:grid;grid-template-columns:70px 1fr;gap:15px;align-items:center;padding:18px}
.gps-security img{width:64px;height:64px;object-fit:contain}
.gps-security h3{margin:0 0 6px;font-size:17px}
.gps-security p{margin:0;font-size:13px;line-height:1.55}
.gps-cta{margin:0 auto 12px;border-radius:13px;background:linear-gradient(90deg,#077226,#0a8b32);display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:18px;padding:17px 22px;color:#fff}
.gps-cta-icon{width:70px;height:70px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center}
.gps-cta-icon img{width:58px;height:58px;object-fit:contain;border-radius:50%}
.gps-cta h2{margin:0 0 3px;font-size:25px;line-height:1.15}
.gps-cta p{margin:0;font-size:14px;line-height:1.45}
.gps-register-btn{min-width:310px;min-height:62px;border-radius:10px;background:#fff;color:var(--gps-green2);text-decoration:none;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 22px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.gps-register-btn::before{content:"🐾";font-size:24px}
.gps-register-btn::after{content:"→";font-size:30px}
.gps-note{width:max-content;max-width:calc(100% - 30px);margin:0 auto 28px;padding:9px 18px;border-radius:999px;background:#f0f5fa;font-size:12px;text-align:center}
.gps-note::before{content:"ⓘ";margin-right:8px;color:#0e5aa7;font-size:17px}
@media(max-width:900px){
 .gps-steps{grid-template-columns:repeat(2,1fr);gap:28px}.gps-step:nth-child(2)::after{display:none}
 .gps-grid,.gps-lower{grid-template-columns:1fr}.gps-cta{grid-template-columns:70px 1fr}
 .gps-register-btn{grid-column:1/-1;width:100%;min-width:0}
}
@media(max-width:600px){
 .gps-wrap{width:min(100% - 20px,1180px)}.gps-how{padding:18px 0 22px}.gps-title{font-size:27px}
 .gps-steps{grid-template-columns:1fr;gap:30px}.gps-step::after{display:none!important}.gps-step-visual{width:122px;height:122px}
 .gps-card{padding:18px}.gps-grid,.gps-lower{gap:14px}.gps-coverage-media{grid-template-columns:1fr 84px;gap:10px}
 .gps-security{grid-template-columns:54px 1fr;padding:15px;gap:10px}.gps-security img{width:48px;height:48px}
 .gps-cta{grid-template-columns:52px 1fr;padding:14px;gap:10px}.gps-cta-icon{width:48px;height:48px}.gps-cta-icon img{width:42px;height:42px}
 .gps-cta h2{font-size:20px}.gps-cta p{font-size:13px}.gps-register-btn{font-size:15px;min-height:54px}.gps-note{font-size:11px;border-radius:14px}
}


/* ==================================================
   CHIPREGISTER GPS TRACKER PAGE V2.1
   ================================================== */


/*
 * TOP:
 * NON modificato.
 */


/*
 * MASSIMO CIRCA 6 MM
 * TRA FINE HERO E TITOLO
 */

.gps-how {
    padding-top:22px !important;
}

.gps-title {
    margin-top:0 !important;
}


/*
 * STEP APPROVATI
 * IMMAGINI REALI
 */

.gps-step-images {
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:18px;
    align-items:start;
    width:100%;
}

.gps-step-image-card {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    min-width:0;
}

.gps-step-image-card img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
    border:0;
}


/*
 * I VECCHI SVG V2
 * NON DEVONO COMPARIRE.
 */

.gps-steps {
    display:none !important;
}


/*
 * SCUDO:
 * elimina visivamente gli angoli
 * bianchi dell'immagine.
 */

.gps-security img {
    border-radius:50% !important;
    overflow:hidden !important;
    background:transparent !important;
}


/*
 * HEADER SEMPRE DAVANTI
 */

.site-header {
    position:relative;
    z-index:100;
}


/*
 * TABLET
 */

@media (max-width:900px) {

    .gps-step-images {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px;
    }

}


/*
 * SMARTPHONE
 */

@media (max-width:600px) {

    .gps-how {
        padding-top:18px !important;
    }

    .gps-step-images {
        grid-template-columns:1fr;
        gap:12px;
    }

}


/* CHIPREGISTER_GPS_TRACKER_PAGE_V2_2_FIX1 */

/* Desktop only: crop the empty dark lower band contained in the hero source. */
@media (min-width:901px) {
    .gps-hero {
        position:relative;
        width:100%;
        overflow:hidden !important;
        aspect-ratio:3.72 / 1 !important;
        background:#001e41;
    }

    .gps-hero img {
        display:block;
        width:100% !important;
        height:auto !important;
        max-width:none !important;
        object-fit:initial !important;
        object-position:top center !important;
    }
}

/* Wider desktop composition: Step PNG text becomes substantially larger. */
@media (min-width:1200px) {
    .gps-wrap {
        width:min(1580px,calc(100% - 48px)) !important;
        max-width:none !important;
    }

    .gps-step-images {
        gap:12px !important;
    }

    .gps-identity-copy h2 {
        font-size:28px;
        line-height:1.18;
    }

    .gps-identity-copy p {
        font-size:16px;
        line-height:1.62;
    }
}

/* Keep the requested maximum ~6 mm gap. */
.gps-how {
    padding-top:22px !important;
}

/* Smartphone hero remains complete and uncropped. */
@media (max-width:600px) {
    .gps-hero {
        aspect-ratio:auto !important;
        height:auto !important;
        overflow:visible !important;
    }

    .gps-hero img {
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center !important;
    }

    .gps-wrap {
        width:calc(100% - 20px) !important;
        max-width:1180px !important;
    }
}


/* ==========================================================
   CHIPREGISTER GPS TRACKER PAGE V2.3 - APPROVED LAYOUT
   Visual target: approved screenshot supplied by user.
   ========================================================== */


/* ----------------------------------------------------------
   HERO DESKTOP
   ----------------------------------------------------------
   The original source image must remain intact.
   We only hide the EXCESS EMPTY BLACK BAND at the bottom.
   The visible composition uses the real source proportion
   seen in the approved reference: about 2.14 : 1.
   ---------------------------------------------------------- */

@media (min-width:901px) {

    .gps-hero {
        position:relative !important;
        width:100% !important;

        /*
         * Approved visible crop:
         * 854 x 399 = 2.14035...
         */
        aspect-ratio:2.14 / 1 !important;

        height:auto !important;
        overflow:hidden !important;
        background:#001e41 !important;
    }

    .gps-hero img {
        display:block !important;

        width:100% !important;
        max-width:none !important;

        height:auto !important;

        object-fit:initial !important;
        object-position:top center !important;

        margin:0 !important;
        padding:0 !important;
        border:0 !important;
    }
}


/* ----------------------------------------------------------
   HOW IT WORKS - WIDTH AND SPACING
   ----------------------------------------------------------
   On a 1536 px desktop this produces about 68 px side
   margins, matching the approved reference.
   ---------------------------------------------------------- */

@media (min-width:1100px) {

    .gps-wrap {
        width:min(1400px,calc(100% - 64px)) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .gps-step-images {
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:18px !important;
        width:100% !important;
        align-items:start !important;
    }

    .gps-step-image-card {
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
    }

    .gps-step-image-card img {
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        margin:0 auto !important;
    }
}


/* ----------------------------------------------------------
   HERO -> "COME FUNZIONA?"
   ----------------------------------------------------------
   Keep it visually close, as in the approved reference.
   18px is under the requested maximum of 6 mm.
   ---------------------------------------------------------- */

.gps-how {
    padding-top:18px !important;
    padding-bottom:26px !important;
}

.gps-title {
    margin:0 0 16px !important;
    padding:0 !important;

    font-size:32px !important;
    line-height:1.12 !important;
    text-align:center !important;
}


/* ----------------------------------------------------------
   IDENTITY BLOCK
   ---------------------------------------------------------- */

.gps-identity-copy h2 {
    line-height:1.18 !important;
}

.gps-identity-copy .green {
    display:inline-block !important;
    color:#0b8b34 !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (min-width:601px) and (max-width:900px) {

    /*
     * Keep the complete hero on smaller devices.
     * No desktop crop here.
     */

    .gps-hero {
        aspect-ratio:auto !important;
        height:auto !important;
        overflow:visible !important;
    }

    .gps-hero img {
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
    }

    .gps-wrap {
        width:calc(100% - 28px) !important;
        max-width:none !important;
    }

    .gps-step-images {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
    }
}


/* ----------------------------------------------------------
   SMARTPHONE
   ---------------------------------------------------------- */

@media (max-width:600px) {

    /*
     * Smartphone stays FULL and UN-CROPPED.
     */

    .gps-hero {
        aspect-ratio:auto !important;
        height:auto !important;
        overflow:visible !important;
    }

    .gps-hero img {
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center !important;
    }

    .gps-how {
        padding-top:16px !important;
    }

    .gps-title {
        font-size:27px !important;
        margin-bottom:14px !important;
    }

    .gps-wrap {
        width:calc(100% - 20px) !important;
        max-width:none !important;
    }

    .gps-step-images {
        grid-template-columns:1fr !important;
        gap:12px !important;
    }
}


/* CHIPREGISTER_GPS_TRACKER_PAGE_V2_3_APPROVED_LAYOUT_END */


/* ==========================================================
   CHIPREGISTER GPS TRACKER PAGE V2.4 - HERO FULL VISIBLE
   IMPORTANT:
   Do NOT crop the hero. The complete source image must render.
   ========================================================== */

/* Override every previous desktop crop rule. */
@media (min-width:901px) {
    .gps-hero {
        width:100% !important;
        height:auto !important;
        aspect-ratio:auto !important;
        overflow:visible !important;
        line-height:0 !important;
        background:#001e41 !important;
    }

    .gps-hero img {
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        min-height:0 !important;
        object-fit:contain !important;
        object-position:center !important;
        margin:0 !important;
        padding:0 !important;
    }
}

/* Keep the next section close to the ACTUAL bottom of the full hero. */
.gps-how {
    margin-top:0 !important;
    padding-top:18px !important;
}

/* CHIPREGISTER_GPS_TRACKER_PAGE_V2_4_HERO_FULL_VISIBLE_END */

/* ==========================================================
   CHIPREGISTER GPS TRACKER PAGE V2.5
   TRIM ONLY THE EMBEDDED EMPTY BLACK BAND
   ----------------------------------------------------------
   The hero image itself remains COMPLETE and UNMODIFIED.
   We do NOT crop the dog, cat, SIM panel, icons or phone.
   Instead the following white section is moved upward over
   only the empty black pixels embedded at the bottom of PNG.

   Calibration from current production screenshot:
   excess empty band ~= 10.65% of rendered hero width.
   This leaves approximately 15 CSS px (~4 mm) of black space
   below the lowest useful graphic content.
   ========================================================== */

@media (min-width:901px) {

    .gps-hero {
        position:relative !important;
        width:100% !important;
        height:auto !important;
        aspect-ratio:auto !important;
        overflow:visible !important;
        z-index:1 !important;
    }

    .gps-hero img {
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center !important;
    }

    /*
     * Cover the EMPTY embedded lower band.
     * Percentage follows hero scaling because vw follows width.
     */
    .gps-how {
        position:relative !important;
        z-index:2 !important;
        margin-top:calc(-10.65vw + 15px) !important;
        padding-top:18px !important;
        background:#ffffff !important;
    }
}

/* Tablet and smartphone: preserve the complete natural hero. */
@media (max-width:900px) {
    .gps-how {
        margin-top:0 !important;
    }
}

/* CHIPREGISTER_GPS_TRACKER_PAGE_V2_5_TRIM_BLACK_BAND_END */


/* ==========================================================
   CHIPREGISTER GPS TRACKER PAGE V2.7
   STEP MODAL - DESKTOP + TABLET ONLY (>600px)
   ========================================================== */
@media (min-width:601px){
  .gps-step-image-card[data-gps-step-open]{cursor:zoom-in;border-radius:12px;transition:transform .16s ease,box-shadow .16s ease}
  .gps-step-image-card[data-gps-step-open]:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,38,83,.13)}
  .gps-step-image-card[data-gps-step-open]:focus-visible{outline:3px solid #0b8b34;outline-offset:4px}
  html.gps-modal-open,body.gps-modal-open{overflow:hidden!important}
  .gps-step-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px}
  .gps-step-modal.is-open{display:flex}
  .gps-step-modal-backdrop{position:absolute;inset:0;background:rgba(0,18,42,.88);backdrop-filter:blur(3px);cursor:zoom-out}
  .gps-step-modal-dialog{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:96vw;max-height:95vh;padding:14px;border-radius:16px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.38)}
  .gps-step-modal-image{display:block;width:auto;height:auto;max-width:92vw;max-height:90vh;object-fit:contain;border-radius:10px}
  .gps-step-modal-close{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#062653;box-shadow:0 4px 16px rgba(0,0,0,.20);cursor:pointer;font:700 34px/1 Arial,sans-serif}
  .gps-step-modal-close:hover,.gps-step-modal-close:focus-visible{background:#f2f7f4}
  .gps-step-modal-close:focus-visible{outline:3px solid #0b8b34;outline-offset:2px}
}
@media (max-width:600px){
  .gps-step-image-card[data-gps-step-open]{cursor:default!important;transform:none!important;box-shadow:none!important;outline:none!important}
  .gps-step-modal,.gps-step-modal.is-open{display:none!important}
}
/* CHIPREGISTER_GPS_TRACKER_PAGE_V2_7_STEP_MODAL_END */
