/* Global rules to fix input/button issues */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }

:root {
  /* Reduced from 44px based on user feedback "narrow the height" */
  --control-h: 40px;
  --btn-h: 40px;
  --btn-font: 15px;
}

body {
  -webkit-tap-highlight-color: transparent;
}

input, select, button, a {
  font: inherit;
}

/* Uniform image handling */
img { max-width: 100%; height: auto; display: block; }

/* 
  INPUTS: 
  Fix collapsed inputs. Ensure padding and border-box work together.
  Use specificity to override embedded styles if needed.
*/
/*
  html-minifier-terser can remove redundant attributes like type="text".
  Target both explicit text inputs and inputs without a type attribute.
*/
input:not([type]), input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], select:not(#exp_m):not(#exp_y) {
  width: 100% !important;
  height: var(--control-h) !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  border: 1px solid #ccc !important;
  box-sizing: border-box !important;
  margin-bottom: 0; /* Let form-group handle spacing */
  line-height: normal !important; /* Prevent collapse */
}

/* Ensure form layout doesn't shrink inputs on narrow screens */
.form-group, .password-group {
  width: 100%;
}
.form-group input {
  display: block;
  min-width: 0;
}
input:focus, select:focus {
  outline: none;
  border-color: #ffcc05 !important;
}

/* 
   DEFAULT BUTTON STYLE (ROUND for Mobile First)
   Most pages (Login/OTP/Finish) want round buttons.
   details.html overrides this to square via body class.
*/
.btn-submit, button#btn, a.btn {
  width: 100% !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  padding: 0 14px !important;
  line-height: var(--btn-h) !important;
  font-size: var(--btn-font) !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  
  /* ROUND by default for Login/OTP/Finish */
  border-radius: 999px !important; 
  
  background: linear-gradient(to bottom, #ffe655 0%, #ffbb00 100%) !important;
  border-bottom: 2px solid #e6a800 !important;
  color: #333 !important;
}

/* Explicit round helper if needed, but default is now round */
.btn-round {
  border-radius: 999px !important;

/* 
  DETAILS.HTML SPECIAL:
  The user implies details page button is NOT round.
  So we keep radius 4px above.
 */

/* 
  OTHER PAGES (Login/OTP/Finish) -> ROUND BUTTONS 
  We will add a specific class to body in those HTMLs or target them if possible.
  Since we can't easily change body classes in all files without editing them,
  we'll use the specific IDs or context if available.
  
  However, it's safer to edit the HTML files to ensure they get the round look.
  But first let's define the round utility here.
*/
.btn-round {
  border-radius: 999px !important;
}

/* EXPIRY BOX FIX for Details */
.expiry-custom-box {
  display: flex !important;
  align-items: center !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  height: var(--control-h) !important;
  overflow: hidden !important;
}
.expiry-sel-m, .expiry-sel-y {
  height: 100% !important;
}
.expiry-custom-box select {
  height: 100% !important;
  border: none !important;
  padding: 0 10px !important;
  background: transparent !important;
  width: 100% !important;
}