/* ===================================================================
   Madame Ginger — form controls (design 58e2b1e / cb1407a, contact.html)
   Contact Form 7 markup (and hand-written .field / .field-group HTML in a
   CF7 template): underline fields, mono labels, select with a chevron,
   square checkboxes / round radios that fill orange, file button,
   range slider, dashed field groups. Loaded on pages that show a form
   (inc/content.php → mg_page_styles).
   =================================================================== */

/* ---- text fields ---- */
.wpcf7-form p{margin:0 0 20px;}
.wpcf7-form label,.wpcf7-form .field > .label{display:block; font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(27,23,18,.6); opacity:1;}
.wpcf7-form label > br{display:none;}
.wpcf7-form-control-wrap{display:block; position:relative; margin-top:8px;}
.wpcf7-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=time],textarea,select:not([multiple])){width:100%; font-family:var(--font); font-size:16px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); background:transparent; border:0; border-bottom:1.5px solid var(--ink); border-radius:0; padding:8px 2px; outline:none; transition:border-color .15s ease;}
.wpcf7-form :is(input,textarea,select):focus{border-color:var(--orange); box-shadow:none;}
.wpcf7-form textarea{height:140px; min-height:120px; resize:vertical;}

/* ---- layout helpers for hand-written HTML in the CF7 template ---- */
.wpcf7-form .field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px;}
.wpcf7-form fieldset{border:0; margin:0 0 20px; padding:0; min-width:0;}
.wpcf7-form legend{padding:0; font-family:var(--font-mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; opacity:.6;}
.wpcf7-form .field-group{display:flex; flex-direction:column; gap:22px; border:1.5px dashed var(--line); padding:26px 22px 24px;}
.wpcf7-form .field-group > legend{padding:0 10px; margin-left:-4px; opacity:1; color:var(--orange); font-weight:700;}
.wpcf7-form .field-group p{margin:0;}
.wpcf7-form .choice-set legend{margin-bottom:12px;}

/* ---- select ---- */
.wpcf7-form-control-wrap:has(> select:not([multiple]))::after{content:""; position:absolute; right:6px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); pointer-events:none;}
.wpcf7-form select:not([multiple]){appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer;}
.wpcf7-form select[multiple]{width:100%; font-family:var(--font); font-size:16px; color:var(--ink); background:transparent; border:1.5px solid var(--ink); border-radius:0; padding:4px;}
.wpcf7-form select[multiple] option{padding:6px 10px;}
.wpcf7-form select[multiple] option:checked{background:var(--orange) linear-gradient(0deg,var(--orange),var(--orange)); color:#fff;}

/* ---- radios & checkboxes (CF7: .wpcf7-list-item > [label >] input + .wpcf7-list-item-label;
   the label only with the tag's use_label_element option — use it, so the text is clickable) ---- */
.wpcf7-form :is(.wpcf7-radio,.wpcf7-checkbox){display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:12px;}
.wpcf7-form .wpcf7-list-item{margin:0; display:inline-flex; align-items:center; gap:10px;}
.wpcf7-form .wpcf7-list-item label{display:inline-flex; align-items:center; gap:10px; cursor:pointer;}
.wpcf7-form .wpcf7-list-item :is(label,.wpcf7-list-item-label){font-family:var(--font); font-size:15px; font-weight:400; line-height:1.4; text-transform:none; letter-spacing:0; color:var(--ink);}
.wpcf7-form :is(input[type=radio],input[type=checkbox]){appearance:none; -webkit-appearance:none; flex:0 0 20px; width:20px; height:20px; margin:0; border:1.5px solid var(--ink); border-radius:0; background:var(--paper) no-repeat center / 12px 12px; cursor:pointer; transition:background-color .12s ease, box-shadow .12s ease;}
.wpcf7-form input[type=radio]{border-radius:50% !important;}
.wpcf7-form input[type=radio]:checked{background-color:var(--orange); box-shadow:inset 0 0 0 3px var(--paper);}
.wpcf7-form input[type=checkbox]:checked{background-color:var(--orange); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");}
.wpcf7-form :is(input[type=radio],input[type=checkbox]):focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.wpcf7-form .wpcf7-list-item:hover :is(input[type=radio],input[type=checkbox]){box-shadow:2px 2px 0 var(--orange);}
.wpcf7-form .wpcf7-list-item:hover input[type=radio]:checked{box-shadow:inset 0 0 0 3px var(--paper), 2px 2px 0 var(--orange);}
/* consent / acceptance: long text, box at the top */
.wpcf7-form .wpcf7-acceptance :is(.wpcf7-list-item,.wpcf7-list-item label){align-items:flex-start;}
.wpcf7-form .wpcf7-acceptance :is(.wpcf7-list-item label,.wpcf7-list-item-label){font-size:14px;}
.wpcf7-form .wpcf7-acceptance input{margin-top:1px;}

/* ---- file ---- */
.wpcf7-form input[type=file]{font-family:var(--font); font-size:14px; color:rgba(27,23,18,.7); max-width:100%;}
.wpcf7-form input[type=file]::file-selector-button{margin-right:14px; padding:9px 16px; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transition:box-shadow .12s ease, transform .12s ease;}
.wpcf7-form input[type=file]:hover::file-selector-button{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--orange);}

/* ---- range (the orange fill follows --fill, set in assets/js/base.js) ---- */
.wpcf7-form input[type=range]{--fill:50%; -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; border:0; padding:0;}
.wpcf7-form input[type=range]::-webkit-slider-runnable-track{height:4px; background:linear-gradient(to right,var(--orange) var(--fill),var(--line) var(--fill));}
.wpcf7-form input[type=range]::-moz-range-track{height:4px; background:var(--line);}
.wpcf7-form input[type=range]::-moz-range-progress{height:4px; background:var(--orange);}
.wpcf7-form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; margin-top:-7px; background:var(--ink); border:0; border-radius:0;}
.wpcf7-form input[type=range]::-moz-range-thumb{width:18px; height:18px; background:var(--ink); border:0; border-radius:0;}
.wpcf7-form output{color:var(--orange); font-weight:700;}

/* ---- actions ---- */
.wpcf7-form .form-actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.wpcf7-form .btn-ghost{background:none; border:0; padding:0; font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-decoration:underline; cursor:pointer; color:var(--ink); opacity:.6;}
.wpcf7-form .btn-ghost:hover{opacity:1;}
