/**
 * Samareo Component CSS
 * Styles for interactive components that theme.json cannot define:
 * - Hero product funnel animation (#smr-hero)
 * - Button kit (smr-btn-*)
 */

/* ===========================================
   HERO ANIMATION (#smr-hero)
   =========================================== */
#smr-hero { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
#smr-hero *, #smr-hero *::before, #smr-hero *::after { margin: 0; padding: 0; box-sizing: border-box; }
#smr-hero .smr-box { max-width: 420px; margin: 0 auto; background: #fff; border-radius: 20px; border: 1px solid #e2e1de; padding: 22px 26px 24px; box-shadow: 0 24px 48px rgba(35,35,42,0.06); }
#smr-hero .smr-path { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; padding: 6px 0 18px; gap: 18px; }
#smr-hero .smr-node { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #efeeed; border: 2px solid #e2e1de; color: #a1a1a3; transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; }
#smr-hero .smr-node.active { background: #cc715a; border-color: #cc715a; color: #fff; box-shadow: 0 0 0 4px #f3ddd6; transform: scale(1.1); }
#smr-hero .smr-node.done { background: #e8bdb1; border-color: #e8bdb1; color: #b5614b; }
#smr-hero .smr-node.done::after { content: '\2713'; font-size: 12px; font-weight: 800; }
#smr-hero .smr-node.done span { display: none; }
#smr-hero .smr-node-label { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600; color: #a1a1a3; white-space: nowrap; letter-spacing: 0.3px; opacity: 0; transition: all 0.4s; }
#smr-hero .smr-node.active .smr-node-label, #smr-hero .smr-node.done .smr-node-label { opacity: 1; }
#smr-hero .smr-node.active .smr-node-label { color: #b5614b; }
#smr-hero .smr-question { text-align: center; margin-bottom: 12px; min-height: 40px; }
#smr-hero .smr-q-text { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #a1a1a3; margin-bottom: 5px; }
#smr-hero .smr-a-text { font-size: 15px; font-weight: 700; color: #b5614b; min-height: 22px; }
#smr-hero .smr-counter { text-align: center; margin-bottom: 12px; }
#smr-hero .smr-num { font-size: 40px; font-weight: 800; color: #23232a; font-variant-numeric: tabular-nums; line-height: 1; transition: color 0.4s; }
#smr-hero .smr-num.final { color: #cc715a; }
#smr-hero .smr-num-label { font-size: 11px; color: #a1a1a3; margin-top: 3px; font-weight: 500; }
#smr-hero .smr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; padding: 0 8px; }
#smr-hero .smr-dot { width: 10px; height: 10px; border-radius: 50%; background: #d5d4d2; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; }
#smr-hero .smr-dot.hidden { opacity: 0; transform: scale(0.1); }
#smr-hero .smr-dot.match { background: #cc715a; box-shadow: 0 0 0 3px #f3ddd6, 0 3px 10px rgba(204,113,90,0.4); transform: scale(1.5); z-index: 2; }
#smr-hero .smr-dot.match::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 7px; font-weight: 800; }
#smr-hero .smr-result { text-align: center; padding-top: 12px; opacity: 0; transform: translateY(8px); transition: all 0.6s ease; }
#smr-hero .smr-result.show { opacity: 1; transform: translateY(0); }
#smr-hero .smr-result-main { font-size: 14px; font-weight: 700; color: #b5614b; margin-bottom: 3px; }
#smr-hero .smr-result-sub { font-size: 11px; color: #a1a1a3; }
#smr-hero .smr-replay { display: block; margin: 8px auto 0; padding: 5px 14px; background: none; border: 1px solid #e2e1de; border-radius: 8px; font-size: 12px; font-weight: 600; color: #a1a1a3; cursor: pointer; font-family: inherit; transition: all 0.2s; }
#smr-hero .smr-replay:hover { border-color: #cc715a; color: #cc715a; }

/* ===========================================
   NAVIGATION LINKS
   =========================================== */
.wp-block-navigation a.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary) !important;
  text-decoration: none !important;
}

/* ===========================================
   WPFORMS OVERRIDES
   =========================================== */
.wpforms-submit {
  background: #cc715a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  box-shadow: 0 4px 12px rgba(204,113,90,0.2) !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpforms-submit:hover {
  background: #b5614b !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(204,113,90,0.35), 0 0 0 4px rgba(204,113,90,0.1) !important;
}
.wpforms-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(204,113,90,0.2) !important;
}
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  background-color: #f3ddd6 !important;
  color: #23232a !important;
  border: 1px solid #e8bdb1 !important;
  border-radius: 10px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p {
  color: #23232a !important;
}

/* ===========================================
   BUTTON KIT (smr-btn-*)
   =========================================== */

/* WordPress block buttons - hover effects that theme.json cannot define */
.wp-element-button, .wp-block-button__link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(204,113,90,0.2);
  cursor: pointer;
}
.wp-element-button:hover, .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(204,113,90,0.35), 0 0 0 4px rgba(204,113,90,0.1);
}
.wp-element-button:active, .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(204,113,90,0.2);
}
/* Outline style buttons (is-style-outline) */
.wp-block-button.is-style-outline .wp-block-button__link {
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: #cc715a;
  color: #cc715a;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(204,113,90,0.12);
}

/* Custom button kit */
a.smr-btn-primary, button.smr-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #cc715a; color: #fff !important; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: 'Inter', -apple-system, sans-serif; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(204,113,90,0.2); }
a.smr-btn-primary:hover, button.smr-btn-primary:hover { background: #b5614b; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(204,113,90,0.35), 0 0 0 4px rgba(204,113,90,0.1); color: #fff !important; }
a.smr-btn-primary:active, button.smr-btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(204,113,90,0.2); }

a.smr-btn-secondary, button.smr-btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #23232a !important; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: 'Inter', -apple-system, sans-serif; border: 1.5px solid #e2e1de; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
a.smr-btn-secondary:hover, button.smr-btn-secondary:hover { border-color: #cc715a; color: #cc715a !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(204,113,90,0.12); }

a.smr-btn-white, button.smr-btn-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #cc715a !important; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: 'Inter', -apple-system, sans-serif; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
a.smr-btn-white:hover, button.smr-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

a.smr-btn-dark, button.smr-btn-dark { display: inline-flex; align-items: center; gap: 8px; background: #23232a; color: #fff !important; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: 'Inter', -apple-system, sans-serif; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
a.smr-btn-dark:hover, button.smr-btn-dark:hover { background: #2e2e36; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(35,35,42,0.25); }

a.smr-btn-soft, button.smr-btn-soft { display: inline-flex; align-items: center; gap: 8px; background: #f3ddd6; color: #b5614b !important; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: 'Inter', -apple-system, sans-serif; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
a.smr-btn-soft:hover, button.smr-btn-soft:hover { background: #e8bdb1; transform: translateY(-2px); }

a.smr-btn-sm, button.smr-btn-sm { padding: 10px 22px; font-size: 13px; border-radius: 8px; }
a.smr-btn-lg, button.smr-btn-lg { padding: 18px 40px; font-size: 17px; border-radius: 12px; }
.smr-btn-pair { display: flex; gap: 14px; flex-wrap: wrap; }
.smr-btn-center { text-align: center; }