/* contact-wc.css
   Overrides to blend embedded contact form with WriteUpCafe page styling.
   Load AFTER tabler/app/public.css
*/

:root{
  --wc-accent-1:#AF40FF;
  --wc-accent-2:#5B42F3;
  --wc-accent-3:#00DDEB;

  --wc-bg:#050316;
  --wc-surface: rgba(255,255,255,.06);
  --wc-surface-2: rgba(255,255,255,.08);
  --wc-border: rgba(255,255,255,.14);
  --wc-border-strong: rgba(255,255,255,.22);

  --wc-text: rgba(255,255,255,.92);
  --wc-text-soft: rgba(255,255,255,.78);
  --wc-text-muted: rgba(255,255,255,.62);

  --wc-radius-xl: 22px;
  --wc-radius-lg: 16px;
  --wc-radius-md: 12px;

  --wc-shadow: 0 16px 50px rgba(0,0,0,.25);
  --wc-shadow-soft: 0 10px 30px rgba(0,0,0,.25);
  --wc-focus: 0 0 0 4px rgba(0,221,235,.18);
}

/* Page background – does NOT rely on body background (keeps your global layout intact) */
.wc-contact-page-scope{
  position: relative;
  padding: 28px 0 40px;
  min-height:100%;
}
.wc-contact-page-scope::before{
  content:"";
  position:absolute;
  inset: -40px 0 -40px 0;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(175,64,255,.20), transparent 60%),
    radial-gradient(820px 520px at 80% 15%, rgba(0,221,235,.14), transparent 58%),
    radial-gradient(860px 560px at 45% 92%, rgba(91,66,243,.16), transparent 55%),
    linear-gradient(180deg, #050316 0%, #07041f 100%);
  pointer-events:none;

}

/* Container/card */
.wc-contact-shell{
  position: relative;
  z-index: 1;
  max-width: 920px;
}
.wc-contact-card{
  border-radius: var(--wc-radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--wc-border);
  box-shadow: var(--wc-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.wc-contact-card .card-body{
  padding: 0 !important; /* keep your embed layout, we style inside */
}

/* form container from embed */
.wc-contact-card .form-container{
  padding: 26px !important;
  background: transparent !important;
  min-height: 200px;
}
.wc-alert{
    color: #fff;
    text-align: center;
    margin-top: 60px;
}
/* Headings & copy */
#form-app h1{
  margin: 0 0 8px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  color: var(--wc-text) !important;
}
#form-app p{
  margin: 0 0 16px !important;
  color: var(--wc-text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Labels */
#form-app .form-label{
  font-weight: 650;
  font-size: 13px;
  color: var(--wc-text) !important;
  margin-bottom: 8px;
}

/* Inputs */
#form-app .form-control,
#form-app .form-select,
#form-app textarea.form-control{
  border-radius: var(--wc-radius-md) !important;
  border: 1px solid var(--wc-border) !important;
  background: rgba(2,2,10,.40) !important;
  color: var(--wc-text) !important;
  padding: 12px 14px !important;
  outline: none;
  box-shadow: var(--wc-shadow-soft);
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
#form-app .form-control::placeholder,
#form-app textarea.form-control::placeholder{
  color: rgba(255,255,255,.45) !important;
}
#form-app .form-control:focus,
#form-app .form-select:focus,
#form-app textarea.form-control:focus{
  border-color: rgba(0,221,235,.45) !important;
  box-shadow: var(--wc-focus), var(--wc-shadow-soft) !important;
}

/* Select – make placeholder readable */
#form-app select.form-select option{
  color: #fff; /* dropdown list itself */
}

/* Required asterisk color (uses Tabler invalid color by default; we make it pop) */
#form-app .required-control .form-label:after{
  color: rgba(0,221,235,.95) !important;
  font-weight: 800;
}

/* reCAPTCHA wrapper */
.wc-recaptcha-wrap{
  padding: 14px;
  border-radius: var(--wc-radius-lg);
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  overflow: auto;
}

/* Button */
#form-app .btn.btn-primary{
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 750 !important;
  letter-spacing: .2px;
  color: #0b0b10 !important;
  background: linear-gradient(90deg, var(--wc-accent-1), var(--wc-accent-2), var(--wc-accent-3)) !important;
  box-shadow: 0 14px 40px rgba(175,64,255,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#form-app .btn.btn-primary:hover,
#form-app .btn.btn-primary:focus,
#form-app .btn.btn-primary:active{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 48px rgba(0,221,235,.15);
}

/* Alerts from embed */
#form-app .alert{
  border-radius: 14px;
  border: 1px solid var(--wc-border);
  background: rgba(255,255,255,.06);
  color: var(--wc-text) !important;
}

/* Make spacing tighter and consistent */
#form-app .form-group,
#form-app .form-action{
  margin-bottom: 14px !important;
}
/* --- Better Select Control (native dropdown retained) --- */
.wc-contact-page-scope .form-select,
.wc-contact-page-scope select.form-select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(2,2,10,.42);
  color: rgba(255,255,255,.92);
  padding: 14px 46px 14px 16px;
  line-height: 1.2;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* placeholder option: “Select the reason” */
.wc-contact-page-scope .form-select option[value=""] {
  color: rgba(255,255,255,.55);
}

/* focus */
.wc-contact-page-scope .form-select:focus {
  border-color: rgba(0,221,235,.55);
  box-shadow: 0 0 0 4px rgba(0,221,235,.16), 0 10px 28px rgba(0,0,0,.25);
}

/* hover */
.wc-contact-page-scope .form-select:hover {
  border-color: rgba(255,255,255,.28);
}

/* custom caret */
.wc-contact-page-scope .wc-select-wrap {
  position: relative;
}

.wc-contact-page-scope .wc-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-55%) rotate(45deg);
  border-right: 2px solid rgba(255,255,255,.70);
  border-bottom: 2px solid rgba(255,255,255,.70);
  pointer-events: none;
  opacity: .9;
}

/* Improve option text in browsers that allow it (won’t change Windows menu panel) */
.wc-contact-page-scope .form-select option {
  background: #0b0820;
  color: rgba(255,255,255,.92);
}


/* Mobile */
@media (max-width: 576px){
  .wc-contact-page-scope{ padding: 18px 0 26px; }
  .wc-contact-card .form-container{ padding: 18px !important; }
}