/* ============================================
   Account Request Form
   Mirrors the child-theme's .contact .wpcf7 form styles
   so the form is visually identical to the CF7 contact forms.
   ============================================ */

.ar-form-container {
    max-width: 100%;
}

/* ---- Messages ---- */
.ar-message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.ar-message--success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.ar-message--error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ---- Notes block (match: .notesBlock) ---- */
.ar-form-container .ar-notes {
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(219, 219, 219);
    border-radius: 4px;
    padding: 15px 20px;
    margin: 0 0 3rem;
    font-size: 0.875rem;
}

.ar-form-container .ar-notes ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0;
}

.ar-form-container .ar-notes li {
    margin: 0.4em 0;
    line-height: 1.6;
}

/* ---- Section headings (match: .contact .wpcf7 form h5) ---- */
.ar-form-container h5.ar-section {
    margin: 2.25rem 0 0.875rem;
    font-size: 1.25rem;
    padding-bottom: 0.35em;
    border-bottom: 1px solid rgba(101, 138, 61, 0.35);
}

.ar-form-container h5.ar-section:first-of-type {
    margin-top: 0;
}

/* ---- Section description (match: .contact .wpcf7 form h5 + p) ---- */
.ar-form-container .ar-section-desc {
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

/* ---- Form rows (match: .contact .wpcf7 form ul) ---- */
.ar-form-container .ar-row {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: 1px dotted rgb(224, 224, 224);
    padding: 0.5rem 0;
    font-size: 0.875rem;
    margin: 0;
}

/* ---- Label (match: .contact .wpcf7 form ul li:first-child) ---- */
.ar-form-container .ar-label {
    width: 14rem;
    flex: 0 0 14rem;
    padding-right: 1rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding-top: 0.65rem;
}

.ar-form-container .ar-label label,
.ar-form-container .ar-legend {
    font-weight: 400;
    font-size: 0.875rem;
    margin: 0;
    padding: 0;
}

/* Required marker (match: .contact .wpcf7 form ul li.req::after) */
.ar-form-container .ar-label--req::after {
    content: "＊";
    color: rgb(217, 90, 0);
    margin-left: 3px;
}

/* ---- Input column (match: .contact .wpcf7 form ul li = width:95%) ---- */
.ar-form-container .ar-input {
    flex: 1;
    min-width: 0;
    width: 95%;
}

/* ---- Input fields (match: .contact .wpcf7 form input) ---- */
.ar-form-container .ar-form input[type="text"],
.ar-form-container .ar-form input[type="email"],
.ar-form-container .ar-form input[type="tel"] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #fff;
}

/* Focus: ブラウザデフォルトに委ねる（CF7 と同じ挙動） */

/* Placeholder (match: .contact .wpcf7 form ::placeholder) */
.ar-form-container .ar-form ::placeholder {
    color: rgb(167, 167, 167);
    opacity: 1;
}

/* ---- Fieldset reset (match: .contact .wpcf7 form fieldset / legend) ---- */
.ar-form-container .ar-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.ar-form-container .ar-legend {
    display: inline;
    padding: 0;
}

.ar-form-container .ar-field-note {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: #666;
    line-height: 1rem;
}

/* ---- Contract rows ---- */
.ar-contract-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.ar-contract-row input {
    flex: 1;
}

.ar-btn-remove {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.ar-btn-remove:hover {
    background-color: #dc3545;
    color: #fff;
}

.ar-btn-add {
    background: none;
    border: 1px dashed rgba(101, 138, 61, 0.6);
    color: rgb(94, 147, 36);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.ar-btn-add:hover {
    background-color: rgba(101, 138, 61, 0.06);
}

/* ---- Inline validation errors (match: .wpcf7-not-valid-tip) ---- */
.ar-form-container .ar-error {
    display: block;
    color: rgb(220, 50, 50);
    font-size: 1em;
    font-weight: normal;
    line-height: 1.4;
}

.ar-form-container .ar-row--error input {
    border-color: rgb(220, 50, 50);
}

/* ---- Privacy policy (match: .contact .wpcf7 form .privacypolicy) ---- */
.ar-form-container .ar-privacy {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.ar-form-container .ar-privacy a {
    color: rgb(0, 99, 23);
    text-decoration-color: rgba(0, 90, 35, 0.6);
}

.ar-form-container .ar-privacy-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    font-size: 1rem;
    line-height: 1.25rem;
    cursor: pointer;
}

.ar-form-container .ar-privacy-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.ar-form-container .ar-req-mark {
    color: rgb(217, 90, 0);
    margin-left: 3px;
}

/* ---- Submit (match: theme button colors) ---- */
.ar-field--submit {
    margin-top: 2rem;
}

.ar-btn-submit {
    background-color: rgb(94, 147, 36);
    color: #fff;
    border: 1px solid rgb(75, 118, 29);
    padding: 8px 32px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.ar-btn-submit:hover {
    background-color: rgb(75, 118, 29);
}

.ar-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Response output (match: .contact .wpcf7 form .wpcf7-response-output) ---- */
.ar-form-container .ar-response-output {
    margin: 2rem 0;
    padding: 1.5em 1rem;
    border: 2px solid rgb(70, 180, 80);
    border-radius: 4px;
}

.ar-form-container .ar-response-output--error {
    border-color: rgb(255, 185, 0);
}

/* ---- DDSWEB-660: 検証済みメールアドレス表示 ---- */
.ar-form-container .ar-verified-email {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 6px 12px;
    background-color: #f0f9f0;
    border: 1px solid #c3e6c3;
    border-radius: 4px;
    color: #1a5c1a;
    font-size: 1rem;
}

.ar-form-container .ar-verified-icon {
    color: #2a7a2a;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
}

.ar-form-container .ar-verified-label {
    font-size: 0.875rem;
    color: #4a7a4a;
}

/* ============================================
   Step 1 (ulm-form-step1 shortcode)
   ============================================ */
.ulm-step1-intro {
    margin-bottom: 20px;
    color: #3c434a;
    font-size: 14px;
    line-height: 1.6;
}

.ulm-step1-intro p { margin: 0 0 8px; }
.ulm-step1-intro p:last-child { margin-bottom: 0; }

.ulm-step1-form {
    max-width: 480px;
}

.ulm-step1-field {
    margin-bottom: 1.25rem;
}

.ulm-step1-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.ulm-step1-field .required {
    color: rgb(217, 90, 0);
    margin-left: 3px;
}

.ulm-step1-field input[type="email"] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #fff;
}

.ulm-step1-submit {
    margin-top: 1.5rem;
}

.ulm-step1-success {
    border-radius: 4px;
    line-height: 1.6;
    overflow: hidden;
}

/* 上段: 成功通知バナー */
.ulm-step1-success__banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    padding: 12px 16px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    border-radius: 4px 4px 0 0;
}

.ulm-step1-success__icon {
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.4;
}

.ulm-step1-success__banner p {
    margin: 0;
}

/* 下段: 「届かない場合の対処」セクション */
.ulm-step1-success__help {
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(219, 219, 219);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #3c434a;
}

.ulm-step1-success__help-title {
    margin: 0 0 8px;
    font-weight: 600;
    font-size: 0.875rem;
}

.ulm-step1-success__help ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0;
}

.ulm-step1-success__help li {
    margin: 0.4em 0;
    line-height: 1.6;
}

.ulm-step1-registered {
    padding: 12px 16px;
    border-radius: 4px;
    line-height: 1.6;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.ulm-step1-note {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.ulm-step1-error {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 1rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.ulm-step1-error p {
    margin: 0;
}

/* ---- Turnstile widget & note ---- */
.ar-form-container .ar-turnstile-widget {
    margin-top: 1.5rem;
}

.ar-form-container .ar-turnstile-note {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: #666;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .ar-form-container .ar-row {
        flex-direction: column;
    }

    .ar-form-container .ar-label {
        flex: none;
        width: auto;
        padding: 0.5rem 0.5rem 0;
    }

    .ar-form-container .ar-input {
        padding: 0.25rem 0.5rem 0.5rem;
        width: 100%;
    }
}

/* ============================================
   Confirmation screen
   ============================================ */
.ar-confirm-header {
    margin-bottom: 20px;
    line-height: 1.6;
}

.ar-confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.ar-confirm-table th,
.ar-confirm-table td {
    padding: 10px 12px;
    border-bottom: 1px dotted #e0e0e0;
    text-align: left;
    vertical-align: top;
    font-size: 0.875rem;
}

.ar-confirm-table th {
    width: 14rem;
    font-weight: 400;
    white-space: nowrap;
    padding-left: 0.5rem;
}

.ar-confirm-contracts {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.ar-confirm-contracts li {
    margin-bottom: 2px;
}

.ar-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.ar-btn-back {
    background-color: #6c757d;
    color: #fff;
    border: 1px solid #5a6268;
    padding: 8px 32px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.ar-btn-back:hover {
    background-color: #5a6268;
}