/*  OutdoorCushions.com - Template 1 - Classic / Traditional
    Support pages. Loads on top of stylesheet.css.

    Two layouts share this file. support.aspx is the plain message form in a
    single column beside the workroom details. support2.aspx is the quote
    request - same fields, plus the cushion detail block, laid out as a wider
    two column form.                                                           */


/*## SHARED ########################################################################################################################################*/
#ct_layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(1.75rem,4vw,3rem); align-items:flex-start; padding-top:1.5rem; }

#ct_form { min-width:0; }
#ct_form fieldset { border:0; margin:0 0 1.5rem; padding:0; }
#ct_form legend { padding:0; margin:0 0 1rem; font:600 .72rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
#ct_form .field label em { font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); }

#ct_form .actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding-top:.5rem; }
#ct_form .actions .note { font-size:.8rem; color:var(--muted); }

.ct_counter { font-size:.76rem; color:var(--muted); text-align:right; }
.ct_counter.over { color:#8d2b37; }


/*## WORKROOM PANEL ################################################################################################################################*/
#ct_side { border:1px solid var(--line); background:var(--panel); padding:1.5rem 1.6rem 1.75rem; }
#ct_side h2 { font-size:1.15rem; margin:0 0 1rem; }
#ct_side h3 { font-size:.98rem; margin:1.5rem 0 .3rem; }
#ct_side p { font-size:.88rem; color:var(--ink2); margin:0 0 .5rem; }
#ct_side .tel { display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--ink); margin:.2rem 0 .1rem; }
#ct_side .tel:hover { text-decoration:none; color:var(--accent-dk); }
#ct_side .hours { list-style:none; margin:.4rem 0 0; padding:0; font-size:.86rem; }
#ct_side .hours li { display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; border-bottom:1px dotted var(--line); }
#ct_side .hours li span:first-child { color:var(--muted); }


/*## QUOTE FORM - support2.aspx ####################################################################################################################*/
#ct_layout.wide { grid-template-columns:minmax(0,1fr) 300px; }

#ct_form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
#ct_form .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0 1rem; }

.ct_steps { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0 0 2rem; padding:0; counter-reset:s; }
.ct_steps li { flex:1; min-width:150px; border-top:2px solid var(--line); padding:.7rem 0 0; font-size:.82rem; color:var(--muted); counter-increment:s; }
.ct_steps li::before { content:counter(s) ". "; font-weight:700; color:var(--accent); }
.ct_steps li.on { border-top-color:var(--accent); color:var(--ink); }

.ct_upload { border:1px dashed var(--line); background:var(--panel); padding:1.25rem 1.35rem; margin:0 0 1.5rem; }
.ct_upload h3 { margin:0 0 .3rem; font-size:1rem; }
.ct_upload p { font-size:.86rem; color:var(--muted); margin:0; }


/*## SENT / ERROR STATES ###########################################################################################################################*/
#ct_sent { border:1px solid var(--line); background:var(--panel); padding:clamp(2.5rem,6vw,4rem); text-align:center; margin-top:1.5rem; }
#ct_sent p { color:var(--muted); max-width:52ch; margin-inline:auto; }
#ct_sent .btn_row { justify-content:center; margin-top:1.75rem; }


/*## RESPONSIVE ####################################################################################################################################*/
@media (max-width:900px)
{
    #ct_layout, #ct_layout.wide { grid-template-columns:1fr; }
    #ct_side { order:-1; }
}

@media (max-width:640px)
{
    #ct_form .grid2, #ct_form .grid3 { grid-template-columns:1fr; }
    .ct_steps li { min-width:0; flex:1 1 100%; }
}


/*## ATTACHMENTS ###################################################################################################################################*/
/*  Photo and PDF attachments, same limits and allowed types as
    patioslings.com/contact.aspx - 5 files, 5 MB each, 20 MB total.

    The file input is stretched over the whole zone at zero opacity rather than
    hidden, so a click anywhere opens the picker and the control stays reachable
    by keyboard and by screen readers. The visible prompt underneath is
    pointer-events:none so it never swallows that click.                        */
.dropzone { position:relative; border:1.5px dashed var(--line); background:var(--white); border-radius:var(--r-input); padding:1.4rem 1.1rem; cursor:pointer; transition:border-color .15s ease,background-color .15s ease; }
.dropzone:hover, .dropzone.is-drag { border-color:var(--accent); background:var(--accent-soft); }
.dropzone input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:0; }

.dropzone_prompt { text-align:center; color:var(--muted); font-size:.95rem; pointer-events:none; }
.dropzone_prompt strong { color:var(--ink); font-weight:600; }
.dropzone_browse { color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px; }
.dropzone_sub { margin-top:.4rem; font-size:.78rem; letter-spacing:.04em; }

.dropzone_chips { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.9rem; }
.dropzone_chips:empty { display:none; }

.dropzone_chip { position:relative; display:flex; align-items:center; gap:.75rem; background:var(--white); border:1px solid var(--line); padding:.6rem 2.75rem .6rem .6rem; border-radius:var(--r-input); max-width:100%; box-shadow:var(--shadow-sm); }
.dropzone_thumb { width:64px; height:64px; flex:0 0 64px; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font:700 .72rem/1 var(--font-body); letter-spacing:.1em; color:var(--accent-dk); overflow:hidden; }
.dropzone_thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dropzone_meta { min-width:0; }
.dropzone_name { font-size:.9rem; color:var(--ink); font-weight:500; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropzone_size { font-size:.75rem; color:var(--muted); margin-top:.2rem; }

.dropzone_remove { position:absolute; top:50%; right:.5rem; transform:translateY(-50%); width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--line); border-radius:50%; color:var(--muted); font-size:1.1rem; font-weight:600; line-height:1; cursor:pointer; transition:background-color .12s ease,color .12s ease,border-color .12s ease; }
.dropzone_remove:hover, .dropzone_remove:focus { color:#fff; background:#8d2b37; border-color:#8d2b37; outline:none; }

.dropzone_error { display:none; margin-top:.7rem; font-size:.85rem; color:#8d2b37; }

.ct_files { font-size:.88rem; color:var(--muted); margin-top:.75rem; }

@media (max-width:480px)
{
    .dropzone_chip { width:100%; }
    .dropzone_name { max-width:none; }
}

/*## ASSISTED REPLY ################################################################################################################################*/
/*  support2.aspx only. The drafted answer shown on the acknowledgement screen
    when the auto-response step is switched on in chatbot/admin.

    Styled as a quiet panel rather than a message box: it is a courtesy while
    the customer waits, not the workroom's final word, and the note above the
    body says so. Nothing here renders when the pipeline is off.                */
.ct_draft { margin-top:1.6rem; padding:1.3rem 1.4rem; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-input); }
.ct_draft h2 { margin:0; font-size:1.12rem; letter-spacing:.01em; }
.ct_draft_note { margin:.35rem 0 .95rem; font-size:.8rem; color:var(--muted); letter-spacing:.02em; }
.ct_draft_body { font-size:.96rem; line-height:1.65; color:var(--ink); }

@media (max-width:480px)
{
    .ct_draft { padding:1.1rem 1rem; }
}

/*  Security code: the drawn image beside the box you type it into. They sit
    on one line because they are one question - the image is the prompt.   */
.ct_key { display:flex; align-items:center; gap:.75rem; }
.ct_key img { flex:0 0 auto; border:1px solid var(--line); background:var(--white); border-radius:var(--r-input); display:block; }
.ct_key input { flex:0 1 11rem; min-width:0; text-transform:uppercase; letter-spacing:.25em; }
@media (max-width:420px) { .ct_key { flex-wrap:wrap; } .ct_key input { flex:1 1 100%; } }