/*
Cre8ive Form Baseline v2.0
Uses a transparent native date/time input as the tappable control and a custom
visual layer for consistent cross-browser rendering. This deliberately avoids
styling Safari's internal date/time text, which is the source of repeated bugs.
*/
.cre8ive-form{--cre8ive-control-height:58px;--cre8ive-control-pad-x:14px;--cre8ive-control-radius:10px}
.cre8ive-form *, .cre8ive-form *::before, .cre8ive-form *::after{box-sizing:border-box}
.cre8ive-form label{min-width:0}
.cre8ive-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.cre8ive-form select,.cre8ive-form textarea{width:100%;max-width:100%;min-width:0;font:inherit;font-size:16px}
.cre8ive-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.cre8ive-form select{height:var(--cre8ive-control-height);min-height:var(--cre8ive-control-height)}
.cre8ive-form textarea{resize:vertical}

/* Robust native picker shell */
.cre8ive-native-picker{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:var(--cre8ive-control-height);
  min-height:var(--cre8ive-control-height);
  padding:0 var(--cre8ive-control-pad-x);
  overflow:hidden;
}
.cre8ive-native-picker__display{
  display:flex;
  align-items:center;
  min-width:0;
  height:100%;
  flex:1 1 auto;
  font:inherit;
  font-size:16px;
  line-height:1.2;
  color:inherit;
  pointer-events:none;
}
.cre8ive-native-picker__display.is-empty{color:#aaa}
.cre8ive-native-picker__icon{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  margin-left:10px;
  color:currentColor;
  pointer-events:none;
}
.cre8ive-native-picker__input{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:pointer!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
}
/* Keep the native input fully interactive. Never use pointer-events:none here. */
@media(max-width:900px){
  .cre8ive-form input,.cre8ive-form select,.cre8ive-form textarea{font-size:16px!important}
}

/* Candidate v2.1 additions - still under live HPP testing */
.cre8ive-control-shell{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}
.cre8ive-control-shell__icon{
  position:absolute;
  z-index:3;
  left:14px;
  top:50%;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  color:#d90068;
  pointer-events:none;
}
.cre8ive-control-shell__icon svg,
.cre8ive-native-picker__leading-icon svg,
.cre8ive-native-picker__icon svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
}
.cre8ive-control-shell > input,
.cre8ive-control-shell > select{
  padding-left:46px!important;
}
.cre8ive-control-shell--textarea{align-items:flex-start}
.cre8ive-control-shell--textarea .cre8ive-control-shell__icon{top:17px;transform:none}
.cre8ive-control-shell--textarea textarea{padding-left:46px!important}
.cre8ive-native-picker{padding-left:46px!important;padding-right:44px!important}
.cre8ive-native-picker__leading-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:#d90068;
  pointer-events:none;
}
.cre8ive-native-picker__icon{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  margin:0;
  color:#66565d;
  pointer-events:none;
}