:root{
    --bg: #ffffff;
    --card-bg: #F9F9F9;
    --card-outline: #F3F4F6;
    --text: #101828;
    --muted: #6A7282;
    --accent: #FF5C30;
    --dot-inactive: #9E9E9E;
  
    --screen-w: 393px;
    --screen-h: 852px;
  
    --side-pad: 20px;
    --cta-h: 56px;
    --cta-bottom: 24px;
  
    --card-w: 353px;
    --card-h: calc(
        var(--screen-h) 
        - var(--card-top)
        - var(--cta-h)
        - var(--cta-bottom)
        - var(--gap-card-cta)
      );
      
    --card-top: 166px;
  
    --ring-size: 306px;
    --ring-hole: 208px;     /* diametro foro interno (bordo sottile) */
    --ring-thickness: 48px; /* spessore visivo dell’anello */
    --lantern-size: 90px;
    --tablet-size: 130px;
    --gap-card-cta: 20px; /* quanto spazio vuoi tra card e CTA */

  }
  
  *{ box-sizing: border-box; }
  html, body{ height: 100%; }
  
  body{
    margin: 0;
    background: var(--bg);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  /* Frame (Figma 393x852) */
  .screen{
    width: var(--screen-w);
    height: var(--screen-h);
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin: 0 auto;
  }
  
  /* Title */
  .title{
    width: 319px;
    height: 106px;
    position: absolute;
    left: 24px;
    top: 22px;
  
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.37px;
  }
  .title__accent{ color: var(--accent); }
  .title__main{ color: var(--text); }
  
  /* Pager */
/* Pager (fisso) */
.pager{
    position: absolute;
    left: 184px;
    top: 128px;
    display: flex;
    gap: 10px;
    z-index: 60; /* sopra carousel */
  }
  
  .pager__dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dot-inactive);
    transition: background 160ms ease, transform 160ms ease;
  }
  
  /* stato attivo */
  .pager__dot--active{ background: var(--accent); }
  .pager__dot--inactive{ background: var(--dot-inactive); }
  
  
  /* Card */
  .card{
    width: var(--card-w);
    height: var(--card-h);
    position: absolute;
    left: var(--side-pad);
    top: var(--card-top);
  
    background: var(--card-bg);
    border-radius: 12.61px;
    outline: 0.49px solid var(--card-outline);
    outline-offset: -0.49px;
    box-shadow: 0px 0.79px 1.58px -0.79px rgba(0,0,0,0.10);
  
    padding: 19.4px;
    overflow: hidden;
  }
  
  .card__title{
    margin: 0;
    color: var(--text);
    font-size: 20px;
    font-weight: 600;
    line-height: 18.91px;
  }
  
  .card__subtitle{
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 15.76px;
    max-width: 315px;
  }
  
  /* Time */
  .time-value{
    width: 319px;
    position: absolute;
    left: 37px;
    top: 311px;
  
    text-align: center;
    color: var(--text);
    font-size: 64px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.37px;
  
    z-index: 3;
  }
  
  /* CTA */
  .cta{
    width: calc(100% - (var(--side-pad) * 2));
    height: var(--cta-h);
  
    position: absolute;
    left: var(--side-pad);
    bottom: var(--cta-bottom);
  
    background: var(--accent);
    border: 0;
    border-radius: 14px;
  
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  
    cursor: pointer;
    z-index: 50;
  }
  
  .cta:active{
    transform: translateY(1px);
    opacity: 0.97;
  }
  
  /* Visual layer (sotto CTA) */
  .visual{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  
  /* === RING WRAP (ancorato alla card) === */
  .ring-wrap{
    pointer-events: auto;
    touch-action: none;      /* importantissimo su mobile: evita scroll mentre trascini */
    cursor: grab;
    position: absolute;
    left: calc(var(--side-pad) + (var(--card-w) / 2
));


.ring-wrap:active{ cursor: grabbing; }

top: calc(var(--card-top) + var(--card-h) - var(--ring-size) - 48px);
    transform: translateX(-50%);
    width: var(--ring-size);
    height: var(--ring-size);
    z-index: 2;
  }
  
  /* === EASY PARK STYLE RING (stroke + rotation) === */
  
  /* Track grigio sotto */
  .ring-track{
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #EAEAEB;
    z-index: 1;
  }
  
  .ring-progress{
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    z-index: 2;
  
    /* gradiente angolare “EasyPark style” */
    background: conic-gradient(
      from 90deg at 50% 50%,
      #FF4F1F 0deg,
      #FFD7CD 360deg
    );
  
    /* ✅ rotazione controllata da JS */
    transform: rotate(var(--ring-rot, 0deg));
    transform-origin: 50% 50%;
  }
  
  
  /* Foro interno che crea lo “stroke” (buca il disco) */
  .ring-hole{
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--ring-size) - var(--ring-thickness));
    height: calc(var(--ring-size) - var(--ring-thickness));
    transform: translate(-50%, -50%);
    border-radius: 9999px;
  
    /* deve essere uguale allo sfondo del contenitore (card) */
    background: var(--card-bg);
  
    /* bordino interno sottile come nel mock */
    border: 1px solid #EAEAEB;
  
    z-index: 3;
  }
  
  /* Immagine centrale (asset lantern) */
  .lantern{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--lantern-size);
    height: auto;
    z-index: 10;
    pointer-events: none;
  }
  

  .tablet{

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--tablet-size);
    height: auto;
    z-index: 10;
    pointer-events: none;

  }



/* Scroll laterale SOLO del contenuto */
.carousel{
    position: absolute;
    inset: 0;                 /* occupa tutta la screen */
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  
    /* lascia spazio a header/dots e CTA */
    padding-top: 0px;       /* stesso punto dove iniziava la card */
    padding-bottom: 0;

  }
  
  .slide{
    flex: 0 0 var(--screen-w);
    height: var(--screen-h);
    position: relative;
    scroll-snap-align: start;
  }
  
  /* nasconde scrollbar */
  .carousel::-webkit-scrollbar{ display:none; }
  .carousel{ scrollbar-width:none; }



  /* === interazione ring (perché .visual è pointer-events:none) === */
.ring-wrap {
    pointer-events: auto;
    touch-action: none; /* importantissimo per drag su mobile */
  }
  
  .ring-progress {
    cursor: grab;
  }
  
  .ring-progress:active {
    cursor: grabbing;
  }
  
  /* dots fixed: assicurati che siano visibili e “default grigi” */
  .pager__dot {
    background: var(--dot-inactive);
  }
  
  .pager__dot--active {
    background: var(--accent);
  }
  
  .pager__dot--inactive {
    background: var(--dot-inactive);
  }
  
  /* CTA states */
  .cta.is-disabled {
    background: #EAEAEB;
    color: #6A7282;
    cursor: not-allowed;
  }