/**
 * Reusable Button Components
 * Signature Theme - Button Styles
 * Matches header__cta styling exactly
 */

/* =============================================
 * PRIMARY CTA BUTTON (Matches header__cta)
 * Pill-shaped button with orange gradient and red/pink glow ring
 * ============================================= */

.btn-cta-primary,
.cta-button {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height, 48px);
  padding: var(--btn-padding, 13px 24px);

  /* Typography */
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-size: var(--btn-font-size, 16px);
  font-weight: var(--btn-font-weight, 700);
  line-height: 1;
  color: var(--color-white, #FFFFFF);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  /* Visual - Pill Shape */
  border-radius: 9999px;

  /* Background - Orange Gradient (vertical, matching header__cta) */
  background: linear-gradient(to bottom, #ff8f4b 0%, #ff5c00 100%);

  /* Outer Ring - Red/Pink Glow (matching header__cta) */
  border: 5px solid rgba(220, 38, 38, 0.1);
  box-shadow: none;

  /* Interaction */
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover State - Scale up slightly */
.btn-cta-primary:hover,
.cta-button:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35);
}

/* Active/Pressed State - Scale down slightly */
.btn-cta-primary:active,
.cta-button:active {
  transform: scale(0.98);
}

/* Focus State (Accessibility) */
.btn-cta-primary:focus,
.cta-button:focus {
  outline: 2px solid var(--color-primary, #ff5c00);
  outline-offset: 2px;
}

/* Disabled State */
.btn-cta-primary:disabled,
.cta-button:disabled,
.btn-cta-primary.disabled,
.cta-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =============================================
 * SIZE VARIANTS
 * ============================================= */

/* Large Button */
.btn-cta-primary--lg,
.cta-button--lg {
  height: 56px;
  padding: 16px 32px;
  font-size: 18px;
}

/* Medium (Default) - Already defined above */
.btn-cta-primary--md,
.cta-button--md {
  height: var(--btn-height, 48px);
  padding: var(--btn-padding, 13px 24px);
  font-size: var(--btn-font-size, 16px);
}

/* Small Button */
.btn-cta-primary--sm,
.cta-button--sm {
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  border-width: 4px;
}

/* =============================================
 * FULL WIDTH VARIANT
 * ============================================= */

.btn-cta-primary--full,
.cta-button--full {
  width: 100%;
  display: flex;
}

/* =============================================
 * ALTERNATIVE RING VARIANTS
 * ============================================= */

/* Thicker Ring (6px) */
.btn-cta-primary--thick-ring,
.cta-button--thick-ring {
  border-width: 6px;
}

/* Lighter Ring (5% opacity) */
.btn-cta-primary--light-ring,
.cta-button--light-ring {
  border-color: rgba(220, 38, 38, 0.05);
}

/* Stronger Ring (15% opacity) */
.btn-cta-primary--strong-ring,
.cta-button--strong-ring {
  border-color: rgba(220, 38, 38, 0.15);
}

/* =============================================
 * SECONDARY BUTTON (Outline Style)
 * ============================================= */

.btn-cta-secondary,
.cta-button--secondary {
  background: transparent;
  color: #ff5c00;
  border: 3px solid #ff5c00;
  box-shadow: none;
}

.btn-cta-secondary:hover,
.cta-button--secondary:hover {
  background: linear-gradient(to bottom, #ff8f4b 0%, #ff5c00 100%);
  color: #FFFFFF;
  border-color: rgba(220, 38, 38, 0.1);
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35);
}

/* =============================================
 * RESPONSIVE STYLES
 * ============================================= */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .btn-cta-primary,
  .cta-button {
    height: 44px;
    padding: 12px 24px;
    font-size: 15px;
    border-width: 4px;
  }

  .btn-cta-primary--lg,
  .cta-button--lg {
    height: 48px;
    padding: 13px 28px;
    font-size: 16px;
  }

  .btn-cta-primary--sm,
  .cta-button--sm {
    height: 36px;
    padding: 8px 16px;
    font-size: 13px;
    border-width: 3px;
  }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
  .btn-cta-primary,
  .cta-button,
  .btn-cta-primary--lg,
  .cta-button--lg,
  .btn-cta-primary--sm,
  .cta-button--sm {
    width: 100%;
    display: flex;
  }
}

/* =============================================
 * USAGE EXAMPLES IN HTML:
 * =============================================
 *
 * Default CTA Button:
 * <a href="#" class="cta-button">Đăng ký ngay</a>
 *
 * Large Button:
 * <button class="cta-button cta-button--lg">Đăng ký ngay</button>
 *
 * Small Button:
 * <button class="cta-button cta-button--sm">Đăng ký ngay</button>
 *
 * Full Width Button:
 * <button class="cta-button cta-button--full">Đăng ký ngay</button>
 *
 * Thick Ring Variant:
 * <button class="cta-button cta-button--thick-ring">Đăng ký ngay</button>
 *
 * Secondary Outline Style:
 * <button class="cta-button cta-button--secondary">Đăng ký ngay</button>
 *
 * ============================================= */