/* css/selector.css */

/* =========================================================
   SELECTOR SECTION
========================================================= */

.selector-section {

  padding-bottom: 120px;
}

/* =========================================================
   LAYOUT
========================================================= */

.selector-layout {

  display: grid;

  grid-template-columns:
    1.8fr 0.9fr;

  gap: 24px;

  align-items: start;
}

/* =========================================================
   MAIN CARD
========================================================= */

.selector-main {

  padding: 42px;
}

/* =========================================================
   HEADER
========================================================= */

.selector-header {

  margin-bottom: 34px;
}

.selector-header h2 {

  font-size: 42px;

  line-height: 1.1;

  font-weight: 800;

  color:
    var(--text);
}

/* =========================================================
   PRODUCT TYPES
========================================================= */

.selector-types {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 24px;

  margin-bottom: 42px;
}

/* =========================================================
   TYPE CARD
========================================================= */

.selector-type {

  padding: 34px 28px;

  border-radius:
    var(--radius-md);

  border:
    1px solid var(--border);

  background:
    white;

  text-align: center;

  cursor: pointer;

  transition:
    var(--transition);
}

/* HOVER */

.selector-type:hover {

  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow-md);
}

/* ACTIVE */

.selector-type.active {

  border:
    2px solid var(--accent);

  box-shadow:
    0 12px 30px rgba(255,59,29,0.08);
}

/* IMAGE */

.selector-type img {

  width: 110px;

  height: 80px;

  object-fit: contain;

  margin: 0 auto 24px;
}

/* TITLE */

.selector-type h3 {

  font-size: 28px;

  margin-bottom: 12px;

  color:
    var(--text);
}

/* DESCRIPTION */

.selector-type p {

  font-size: 16px;

  line-height: 1.5;

  color:
    var(--text-light);
}

/* =========================================================
   STEPS
========================================================= */

.selector-steps {

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

  margin-bottom: 42px;
}

/* LINE */

.selector-steps::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 2px;

  background:
    rgba(0,0,0,0.08);

  z-index: 1;
}

/* STEP */

.step {

  width: 54px;
  height: 54px;

  border-radius: 999px;

  background:
    white;

  border:
    1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  font-weight: 700;

  position: relative;

  z-index: 2;
}

/* ACTIVE STEP */

.step.active {

  background:
    var(--accent);

  color:
    white;

  border:
    none;

  box-shadow:
    0 10px 20px rgba(255,59,29,0.18);
}

/* =========================================================
   FOOTER
========================================================= */

.selector-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

  padding-top: 30px;

  border-top:
    1px solid var(--border);
}

/* =========================================================
   HELP
========================================================= */

.selector-help strong {

  display: block;

  font-size: 20px;

  margin-bottom: 10px;
}

.selector-help p {

  color:
    var(--text-light);

  line-height: 1.6;
}

/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.selector-whatsapp {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 240px;

  height: 60px;

  padding-left: 28px;
  padding-right: 28px;

  border-radius:
    999px;

  background:
    var(--accent);

  color:
    white;

  font-weight: 700;

  transition:
    var(--transition);
}

/* HOVER */

.selector-whatsapp:hover {

  background:
    var(--accent-dark);
}

/* =========================================================
   INFO TITLE
========================================================= */

.info-title {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 10px;
}

/* =========================================================
   ICON
========================================================= */

.info-icon {

  width: 34px;
  height: 34px;

  border-radius: 999px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(255,59,29,0.08);

  color:
    var(--accent);

  font-size: 18px;

  font-weight: 700;

  flex-shrink: 0;
}

/* =========================================================
   INFO PANEL
========================================================= */

.selector-info {

  padding: 42px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-self: start;

  min-height: fit-content;
}

/* =========================================================
   INFO PANEL TITLE
========================================================= */

.selector-info h3 {

  font-size: 36px;

  font-weight: 800;

  margin-bottom: 40px;

  color:
    var(--text);
}

/* =========================================================
   INFO ITEM
========================================================= */

.info-item {

  padding-bottom: 26px;

  margin-bottom: 26px;

  border-bottom:
    1px solid rgba(0,0,0,0.06);
}

.info-item:last-child {

  margin-bottom: 0;

  padding-bottom: 0;

  border-bottom: none;
}

/* =========================================================
   INFO ITEM TITLE
========================================================= */

.info-item strong {

  display: block;

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 10px;

  color:
    var(--text);
}

/* =========================================================
   INFO ITEM TEXT
========================================================= */

.info-item p {

  font-size: 16px;

  line-height: 1.7;

  color:
    var(--text-light);
}

/* =========================================================
   WHATSAPP HOVER
========================================================= */

.selector-whatsapp:hover {

  background:
    var(--accent-dark);

  transform:
    translateY(-3px);
}