/* Frontend styles for YoEstoyAsegurado form
   - Responsive two-column layout on desktop
   - Uses theme color variables if available (Blocksy / WP presets), with sensible fallbacks
*/
.yea-quote-form{
  max-width:760px;
  margin:0 auto 18px;
  border:1px solid var(--wp--custom--border-color, #eee);
  padding:18px;
  border-radius:8px;
  background:var(--wp--custom--panel-bg, #fff);
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
  font-family:inherit;
}

.yea-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.yea-grid .yea-row{margin:0}
.yea-row label{display:block;font-weight:600;margin-bottom:6px;color:inherit}
.yea-row input[type="text"],.yea-row input[type="email"],.yea-row input[type="tel"],.yea-row select{width:100%;padding:10px;border:1px solid rgba(0,0,0,0.08);border-radius:6px;background:transparent}

/* Step animation states */
.yea-step{transition:opacity 300ms ease, transform 300ms ease, max-height 300ms ease;opacity:1;transform:translateY(0);max-height:2000px}
.yea-step.yea-step--hidden{opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;pointer-events:none}

/* Ensure each step is a full-width grid item so steps stack vertically */
.yea-step{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:12px}

/* Optional: allow two-column layout inside a step on tablet+ screens */
@media (min-width:768px){
  .yea-step.yea-step--two-col{grid-template-columns:repeat(2,1fr)}
}

/* Three-column layout for specific steps on desktop */
@media (min-width:1024px){
  .yea-step.yea-step--three-col{grid-template-columns:repeat(3,1fr)}
}

.yea-row.full-width{grid-column:1/-1}
.yea-full-width{grid-column:1/-1}

.yea-quote-form button, .yea-quote-form a[type="button"]{background:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));color:#fff;border:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:600}
.yea-quote-form button:hover{opacity:0.95}
.yea-error{color:#bf1e2e}

/* Progress bar */
.yea-progress{height:6px;background:rgba(0,0,0,0.06);border-radius:6px;margin-bottom:14px;overflow:hidden}
.yea-progress-bar{height:100%;background:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));transition:width 300ms ease}

.yea-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.yea-back{background:transparent;color:inherit;border:1px solid rgba(0,0,0,0.08);padding:8px 12px;border-radius:6px}
.yea-next{background:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));color:#fff;border:0;padding:8px 12px;border-radius:6px}
.yea-submit{background:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));color:#fff;border:0;padding:8px 12px;border-radius:6px}

.yea-invalid{box-shadow:0 0 0 3px rgba(191,30,46,0.08);border-color:#bf1e2e}

.yea-planes-ul{list-style:none;margin:0;padding:0}
.yea-planes-ul li{padding:6px 0;border-bottom:1px dashed rgba(0,0,0,0.04)}
.yea-note{color:#555;font-size:0.95rem}

.yea-aseg-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}

@media (max-width:767px){
  .yea-aseg-list{grid-template-columns:1fr}
}

.yea-aseg-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
  background:var(--wp--custom--panel-bg, #fff);
  transition:box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.yea-aseg-item input{margin:0;flex:0 0 auto}
.yea-aseg-item span{display:block}
.yea-aseg-item:hover{box-shadow:0 6px 18px rgba(0,0,0,0.06);transform:translateY(-3px)}

/* Visual indication when selected: style the whole card */
.yea-aseg-item.selected{
  background: color-mix(in srgb, var(--yea-primary, var(--wp--preset--color-primary, #0073aa)) 8%, #fff);
  border-color: var(--yea-primary, var(--wp--preset--color-primary, #0073aa));
  box-shadow: 0 10px 30px rgba(2,40,80,0.06);
  transform: translateY(-4px);
}
.yea-aseg-item.selected span{ color: var(--yea-primary, var(--wp--preset--color-primary, #0073aa)); font-weight:700 }

/* Keep accessible checked text style for screen readers */
.yea-aseg-item input:checked + span{ outline:none }

/* Plans grid/cards */
.yea-planes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  max-height: 400px;
  overflow-y: scroll;
  padding: 1rem 0;
}
.yea-plan-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
  background:var(--wp--custom--panel-bg, #fff);
  transition:box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.yea-plan-item:hover{box-shadow:0 8px 22px rgba(0,0,0,0.05);transform:translateY(-3px)}

/* visually hide raw checkbox but keep for accessibility */
.yea-plan-item input[type="checkbox"]{
  position:relative;left:0;top:0;margin:0 8px 0 0;flex:0 0 auto;
}

.yea-plan-meta{display:flex;flex-direction:column}
.yea-plan-meta strong{font-size:1rem}
.yea-plan-suma{font-size:0.95rem;color:#555;margin-top:6px}
.yea-plan-id{display:none}

.yea-plan-item.selected{background: color-mix(in srgb, var(--yea-primary, var(--wp--preset--color-primary, #0073aa)) 6%, #fff);border-color:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));box-shadow:0 10px 30px rgba(2,40,80,0.06);transform:translateY(-4px)}
.yea-plan-item.selected strong{color:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));font-weight:700}

/* Label above the sum */
.yea-plan-suma-label{font-size:0.75rem;color:#777;text-transform:none;margin-top:8px}


/* Focus for keyboard users */
.yea-aseg-item input:focus + span{outline:3px solid color-mix(in srgb, var(--yea-primary, var(--wp--preset--color-primary, #0073aa)) 22%, transparent);outline-offset:4px}

/* Responsive grid: 1 col mobile, 2 cols tablet, 3 cols desktop */
@media (min-width: 600px){
  .yea-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width: 1024px){
  .yea-grid{grid-template-columns:repeat(3,1fr)}
  /* Ensure fields marked full-width expand across all columns */
  .yea-row.full-width{grid-column:1/-1}
}

/* Accessibility */
.yea-quote-form input:focus,.yea-quote-form select:focus{outline:3px solid color-mix(in srgb, var(--yea-primary, var(--wp--preset--color-primary, #0073aa)) 20%, transparent);outline-offset:2px}

/* Loading indicator */
.yea-loading-msg{display:flex;align-items:center;gap:8px}
.yea-loader{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,0.15);border-top-color:var(--yea-primary, var(--wp--preset--color-primary, #0073aa));border-radius:50%;animation:yea-spin 0.9s linear infinite}
@keyframes yea-spin{to{transform:rotate(360deg)}}

.yea-inline-actions{
  margin-top: 2rem;
}