/* Range 360 - Membership Application form */

/* Fills the width of whatever column/section the block is placed in by
   default (100%), then the "Form Size" percentage scales the whole thing as
   a unit via zoom — so resizing enlarges/shrinks everything together (text,
   fields, radios) like resizing a text box, instead of just changing the
   container width and reflowing/word-wrapping the text differently. */
.r360-application-wrap {
    max-width: 700px;
    zoom: var(--r360-app-scale, 1);
}

/* When the block itself is center/right aligned, keep the (scaled-size)
   form centered/right-aligned within it too. */
.wp-block-r360-application.aligncenter .r360-application-wrap {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-r360-application.alignright .r360-application-wrap {
    margin-left: auto;
}

/* A section's own width (33/50/100%, set on the section in Form Content) only
   takes effect because this is a wrapping flex row — sections narrower than
   100% sit side by side until the row wraps, same idea as question rows below. */
.r360-app-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 24px;
}

.r360-app-section-container {
    box-sizing: border-box;
    min-width: 0; /* same flex-shrink fix as .r360-app-row above */
}

.r360-app-section-title {
    margin: var(--r360-app-section-spacing, 28px) 0 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--r360-app-accent, #2271b1);
    font-size: 1.2em;
}

.r360-app-sections > .r360-app-section-container:first-child .r360-app-section-title {
    margin-top: 0;
}

/* Section background/border shading (Settings > Section Appearance) — off by
   default, so existing forms don't change appearance until turned on. Applied
   to the whole container (heading + questions together), since side-by-side
   sections should each look like one self-contained card. */
.r360-app-section-shading .r360-app-section-container {
    background: #f8f9fa;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    padding: 18px 20px 4px;
}

.r360-app-section-shading .r360-app-section-title {
    margin-top: 0;
}

/* A row's own width (33/50/100%, set per question in Form Content) only takes
   effect because the section is a wrapping flex row — rows narrower than
   100% sit side by side until the row wraps. */
.r360-app-section {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
}

.r360-app-row {
    margin-bottom: var(--r360-app-question-spacing, 18px);
    box-sizing: border-box;
    /* Without this, a flex item won't shrink below its content's natural
       width (the browser default is min-width: auto) — so e.g. three
       "Third"-width questions would each refuse to shrink past their input's
       own minimum size and wrap instead of actually sitting side by side. */
    min-width: 0;
}

.r360-app-row label,
.r360-app-question {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* "Label beside field" (Settings > Label Position) — the label/question
   becomes a fixed-width column next to everything else in the row, instead
   of stacked above it. Default ("above") needs no rules: block children
   already stack top to bottom. */
.r360-app-label-beside .r360-app-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.r360-app-label-beside .r360-app-row > label,
.r360-app-label-beside .r360-app-row > .r360-app-question {
    flex: 0 0 200px;
    margin-bottom: 0;
    padding-top: 8px;
}

.r360-app-label-beside .r360-app-field-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.r360-app-note {
    display: block;
    font-size: 0.85em;
    color: #666;
    font-weight: normal;
    margin: -2px 0 6px;
}

.r360-app-note img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 4px;
    border-radius: 4px;
}

.r360-app-row input[type="text"],
.r360-app-row input[type="tel"],
.r360-app-row input[type="email"],
.r360-app-row select,
.r360-app-row textarea {
    width: 100%;
    max-width: var(--r360-app-field-width, 200px);
    padding: 8px 10px;
    border: 1px solid #a0aab4;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
}

.r360-app-row textarea {
    max-width: 100%;
}

.r360-app-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

/* A fixed column count (set per question in Form Content) instead of the
   default auto-wrapping flex layout above — .r360-app-radio-grid always
   carries its own inline grid-template-columns. */
.r360-app-radio-grid {
    display: grid;
    gap: 6px 20px;
}

.r360-app-radio-option {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: normal !important;
    margin-bottom: 0 !important;
}

.r360-app-radio-option input {
    margin: 0;
}

.r360-required {
    color: #d63638;
}

.r360-app-row-error input,
.r360-app-row-error select,
.r360-app-row-error textarea {
    border-color: #d63638;
}

.r360-app-row-error label,
.r360-app-row-error .r360-app-question {
    color: #8a2424;
}

.r360-app-closing-note {
    font-style: italic;
    color: #444;
    margin: 24px 0 14px;
}

.r360-message {
    display: block;
    padding: 10px 14px;
    border-radius: 3px;
    margin: 14px 0;
    font-size: 0.95em;
}

.r360-message:empty {
    display: none;
}

.r360-msg-success {
    background: #edfaef;
    color: #1a6627;
    border-left: 4px solid #1a6627;
}

.r360-msg-error {
    background: #fce9e9;
    color: #8a2424;
    border-left: 4px solid #d63638;
}

.r360-msg-info {
    background: #f0f6fc;
    color: #1c5175;
    border-left: 4px solid #2271b1;
}