/*
Theme Name: PlayfulSins Luxe – Checkout Child
Theme URI: https://playfulsins.com/
Description: Child theme for PlayfulSins Luxe – checkout UX enhancements for BOTH Classic + Blocks checkout (contrast, autofill fix, placeholders, floating labels, mobile-first layout) + streamlined WooCommerce checkout fields.
Author: PlayfulSins
Template: playfulsins-luxe
Version: 1.0.2
*/

/* Scope: ONLY WooCommerce checkout */
:root{
  --sah-card: rgba(255,255,255,0.06);
  --sah-border: rgba(255,255,255,0.14);
  --sah-text: #ffffff;
  --sah-muted: rgba(255,255,255

  );

  --sah-input-bg: #ffffff;
  --sah-input-text: #111111;
  --sah-placeholder: #666666;

  --sah-accent: #b1005a;
  --sah-accent-2: #ff4aa2;
}

/* Fix typo if minifier chokes */
:root{ --sah-muted: rgba(255,255,255,0.68); }

/* =============== Checkout: Layout =============== */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .wp-site-blocks{
  padding: 12px;
}

@media (min-width: 768px){
  body.woocommerce-checkout .woocommerce,
  body.woocommerce-checkout .wp-site-blocks{
    padding: 18px;
    max-width: 980px;
    margin: 0 auto;
  }
}

/* Classic checkout panels */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review{
  background: var(--sah-card);
  border: 1px solid var(--sah-border);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(10px);
}

/* Blocks checkout panels */
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar{
  background: var(--sah-card);
  border: 1px solid var(--sah-border);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(10px);
}

/* Headings/text */
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout .wc-block-components-title{
  color: var(--sah-text) !important;
}

/* =============== Inputs (Classic + Blocks) =============== */

/* Classic */
body.woocommerce-checkout input,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select{
  background: var(--sah-input-bg) !important;
  color: var(--sah-input-text) !important;
}

/* Blocks inputs */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-textarea textarea,
body.woocommerce-checkout .wc-block-components-select select{
  background: var(--sah-input-bg) !important;
  color: var(--sah-input-text) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 14px !important;
  min-height: 48px;
  font-size: 16px;
}

/* Placeholder (Blocks + Classic) */
body.woocommerce-checkout ::placeholder{
  color: var(--sah-placeholder) !important;
  opacity: 1;
}

/* Autofill fix (Android/Chrome/Samsung) */
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill:hover,
body.woocommerce-checkout input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--sah-input-text) !important;
  box-shadow: 0 0 0px 1000px var(--sah-input-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Focus glow */
body.woocommerce-checkout input:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus,
body.woocommerce-checkout .wc-block-components-select select:focus{
  outline: none !important;
  border-color: var(--sah-accent) !important;
  box-shadow: 0 0 0 3px rgba(177,0,90,0.18) !important;
}

/* =============== Labels visibility (Blocks) =============== */
/* In your screenshots, the hint text is missing because Blocks uses labels that can be visually hidden.
   Force them visible above inputs, and keep readable on dark background. */
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-textarea label,
body.woocommerce-checkout .wc-block-components-select label{
  display: block !important;
  position: static !important;
  margin: 0 0 8px 2px !important;
  color: var(--sah-muted) !important;   /* visible on dark background */
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  width: auto !important;
  clip: auto !important;
  clip-path: none !important;
}

/* If the label is "screen reader only", Woo uses this class name in many themes */
body.woocommerce-checkout .screen-reader-text{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 8px 2px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

/* =============== Buttons =============== */
body.woocommerce-checkout button,
body.woocommerce-checkout .button,
body.woocommerce-checkout .wc-block-components-button{
  border-radius: 999px !important;
  min-height: 48px;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, var(--sah-accent), var(--sah-accent-2)) !important;
  border: none !important;
}

/* =============== Mobile/Tablet first tweaks =============== */
@media (max-width: 980px){
  body.woocommerce-checkout .wc-block-checkout__main,
  body.woocommerce-checkout .wc-block-checkout__sidebar{
    margin-bottom: 14px;
  }

  body.woocommerce-checkout .wc-block-components-checkbox__input{
    transform: scale(1.15);
  }
}