/* frontend/Tour_Guide/tour.css */

#welcome-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
     TYPE-A (INDEPENDENT)
     ========================= */


/* Main Card */
#welcome-tour-modal {
  width: 470px;
  height: 586px;
  background: #F7F9FC;
  display: flex;
  flex-direction: column;
  overflow: visible;
  font-family: inherit;
  border-radius: 37.206px;
  box-shadow: 0 2px 12px 4px rgba(26, 26, 26, 0.55);
}

/* Header */
.welcome-top {
  background: #57d163;
  color: #000;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  position: relative;
  border-top-left-radius: 38px;
  border-top-right-radius: 38px;

}
.welcome-top-span{
color: #000;
font-family: "M PLUS 1", sans-serif;
font-size: 23.254px;
font-style: normal;
font-weight: 500;
line-height: 30.695px; /* 132% */
}

.welcome-close{
  position: absolute;
  right: 14px;
  top: 15px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
}

.welcome-close svg {
  transition: transform 0.25s ease;
  
}
.welcome-close:hover svg path{
  stroke: #000;
  transition: stroke 0.25s ease;

}
/* REMOVE this (causes outer black) */
/* .welcome-close:hover { background:#000; } */

/* ADD / CHANGE only these */
.welcome-close:hover svg circle{
  fill:#000;
}

.welcome-close:hover svg{
  transform: rotate(90deg);
}

.welcome-close:hover svg line{
  stroke:#fff;
}


/* Content */
.welcome-content {
  width: 470px;
  height: 439px;
  flex: 1;
  padding: 0px;
  text-align: center;
  position: relative;      /* ⬅️ IMPORTANT */
  overflow: hidden;
}

.welcome-text {
  position: absolute;
  top: 18px;           /* ✅ adjust: 12–24px */
  left: 0;
  width: 100%;
  margin: 0;           /* ✅ remove margin-bottom */
  z-index: 3;
  text-align: center;

  font-size: 18.603px;
  margin-bottom: 12px;
  color: #000;
  font-family: "M PLUS 1", sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 26.044px; /* 140% */
}

.welcome-illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ⬅️ THIS fixes stretching */
  display: block;
  margin: 0;
}

/* Footer Buttons */
.welcome-actions {
  background: #57d163;
  padding: 18px;
  display: flex;
  justify-content: space-evenly;
  gap: 12px;
  border-bottom-left-radius: 38px;
  border-bottom-right-radius: 38px;
}

#w-start , #g-next{
  display: flex;
  justify-content: center;
  align-items: center;

  height: 52.089px;
  padding: 14.883px 22.324px;
  gap: 7.441px;

  border: none;
  border-radius: 37.206px;

  background: #649208;
  box-shadow: 3.721px 3.721px 0 #21330B;

  color: #fff;
  font-family: "M PLUS 1", sans-serif;
  font-size: 14.883px;
  font-weight: 500;
  line-height: 22.324px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
#w-start:hover,  #g-next:hover {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 #21330B;
}


#w-skip, #g-back {
  display: flex;
  height: 52.089px;
  padding: 14.883px 22.324px;
  justify-content: center;
  align-items: center;
  gap: 7.441px;

  border-radius: 37.206px;
  border: 2px solid var(--Green-shade-5, #649208);
  background: var(--Green-shade-2, #DFF5D6);

  color: var(--Green-shade-5, #649208);
  font-family: "M PLUS 1", sans-serif;
  font-size: 14.883px;
  font-weight: 600;
  line-height: 22.324px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-shadow: 3.721px 3.721px 0 0 #21330B;
}

#w-skip:hover, #g-back:hover {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 #21330B;
}





/* ===== Overlay ===== */
#tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

/* =========================
     Hardware or Ai-Mode
     ========================= */

/* ===== Modal ===== */
.tour-modal {
  background: #f7f9fc;
  border-radius: 40px;
  box-shadow: 0 9px 24px 8px rgba(12, 12, 12, 0.35);
  overflow: hidden;
}

/* size as per figma */
.tour-modal--split {
  width: 698px;
  height: 439px;
  border-radius: 40px;
background: var(--Off-white-shade, #F7F9FC);
box-shadow: 0 9px 24px 8px rgba(12, 61, 0, 0.45);
}

/* ===== Header ===== */
.tour-header {
  height: 64px;
  background: #57d163;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tour-title {
  font-family: "M PLUS 1", sans-serif;
  font-size: 25px;
  font-weight: 500;
  color: #000;
font-style: normal;
line-height: 33px; /* 132% */
}

/* ===== Body ===== */
.tour-body {
  height: calc(100% - 64px);
  display: flex;
  position: relative;
}

.tour-body--split {
  background: #ffffff;
}

/* ===== Cards ===== */
.tour-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* visuals */
.tour-card-visual {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.tour-card-visual--hardware {
  background: #ffffff;
}

.tour-card-visual--ai {
  background: #ffffff;
}

/* footer buttons */
.tour-card-footer {
  height: 75px;
  background: #57d163;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Divider ===== */
.tour-divider {
  width: 4px;
  background: #7be07f;
  background: linear-gradient(
    to bottom,
    #7be07f 0%,
    #7be07f 80%,
    #ffffff 80.5%,
    #ffffff 100%
  );
}

/* ===== Buttons ===== */
.tour-btn {
  border-radius: 999px;
  padding: 14px 28px;
  font-family: "M PLUS 1", sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* hardware */
.tour-btn--hardware {
  background: #7ea80a;
  color: #fff;
  box-shadow: 3px 3px 0 #21330b;
}

/* ai */
.tour-btn--ai {
  background: #0a3d91;
  color: #fff;
  box-shadow: 3px 3px 0 #0b1d33;
}

/* hover */
.tour-btn:hover {
  transform: translate(2px,2px);
  box-shadow: 1.5px 1.5px 0 rgba(0,0,0,0.4);
}

.tour-card-visual--hardware img{
width: 226.13px;
height: 267.698px;
transform: scale(1.3);
}

.tour-card-visual--hardware .hardware-shadow{
  width: 250px;
height: 15px;
border-radius: 22.6px;
background: rgba(72, 72, 72, 0.50);
filter: blur(8.788888931274414px);
}
.tour-card-visual--ai img{
width: 226.13px;
height: 270.698px;
}


  /* =========================
     TYPE-B (CONTINUOUS)
     ========================= */


.welcome-top-popup {
  /* background: #57d163; */
  color: #000;
  text-align: start;
  padding: 0px 20px;
  position: relative;
  font-style: normal;
  font-weight: 800;
  line-height: 28px; /* 140% */
  padding-top: 10px;
}
.welcome-top-span-popup{
color: #000;
font-family: "M PLUS 1", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 28px; /* 140% */
}

/* Content */
.welcome-content-popup {
  /* width: 470px; */
  width: 100%;
  height: 439px;
  flex: 1;
  padding: 0px 20px;
  text-align: center;
  position: relative;      /* ⬅️ IMPORTANT */
  overflow: hidden;
}
.welcome-text-popup {
  /* width: 100%; */
  /* margin: 10px 25px; */
  z-index: 3;
  text-align: start;
  font-size: 20px;
  /* margin-bottom: 12px; */
  color: #000;
  font-family: "M PLUS 1", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  padding: 5px;
  margin: 2px;
}

.welcome-actions-popup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #57d163;
  padding: 10px;
  display: flex;
  gap: 12px;
  border-bottom-left-radius: 38px;
  border-bottom-right-radius: 38px;
}

.btn-skip {
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 20px;
  color: #000;
/* Medium/16@typo */
font-family: "M PLUS 1", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}

.action-right {
  display: flex;
  margin-right: 20px;
  gap: 12px;
}

#tour-arrow-wrapper {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

#tour-arrow {
  transform-origin: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* .tour-caret {
  color: white;
  background-color: red;
  position: absolute;
  top: 24px;
  left: -18px;          ← caret comes OUTSIDE modal
  z-index: 5;
  transform-origin: center;
  background: transparent;
} */

.tour-caret {
  position: absolute;
  z-index: 100000;
  pointer-events: none;
}