/*
 * Styles for the WordPress-side wrappers only. Everything the Laravel design
 * uses still comes from the bundled CSS in assets/css.
 */
.wpcf7-response-output {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid #b7d8b7;
    background: #f4faf4;
    color: #24632a;
}

.wpcf7-response-output.form-error {
    border-color: #e0b4b4;
    background: #fdf7f7;
    color: #b52b27;
}

.captcha-image-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

#reload_captcha {
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}

.crm-auth-messages:empty {
    display: none;
}

.crm-button-loading {
    display: none;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The dashboard iframe fills the account area the same way Laravel's did. */
.content-section .dashboard-content {
    width: 100%;
    border: 0;
}

.main-container {
    min-height: 40vh;
}

/* ------------------------------------------------------------------
 * Account form presentation.
 *
 * The Laravel templates carry classes the converted bundle never shipped
 * rules for: the Grav form classes (label.inline, .required, .form-textarea,
 * .secondary-accent), the .button variants, and the Tailwind utilities the
 * profile/orders/invoice views were built with. Everything below is written
 * in this theme's own tokens so the account pages read as part of the site.
 * ------------------------------------------------------------------ */

/* Field labels: the contact page styled .form-label in its own scope only. */
.form-field .form-label { margin-bottom: 6px; }

.form-field label.inline,
.form-label label.inline {
    display: inline-block;
    margin-bottom: 6px;
    font-size: var(--text-font-size, 1rem);
    line-height: 1.5rem;
    font-weight: 600;
    color: inherit;
}

.required { color: #F04438; margin-left: 2px; }

/* Textareas were left to the browser while every input beside them was styled. */
.form-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin-bottom: 1rem;
    font: inherit;
    color: var(--color-black, #101828);
    background: var(--color-white, #fff);
    border: 1px solid #98a2b3;
    border-radius: var(--border-radius, 8px);
    resize: vertical;
}

.form-textarea:focus { outline: none; border-color: #fff; box-shadow: none; }

/* .button carried the whole design; primary/secondary were never defined, so
   the "I forgot my password" link rendered as a second identical CTA. */
.button.primary {
    background: var(--color-primary);
    color: var(--color-white, #fff);
    border-radius: var(--border-radius, 8px);
}

.button.secondary {
    background: none;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--color-white, #fff);
    border-radius: var(--border-radius, 8px);
}

.button.secondary:hover { border-color: var(--color-white, #fff); }

/* Wrapper around the forgot-password submit. */
.secondary-accent { text-align: center; margin-top: 25px; }
.secondary-accent .button { display: inline-block; }

/* Feedback rendered by the CRM profile form. */
.crm-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--border-radius, 8px);
    border: 1px solid #b7d8b7;
    background: #f4faf4;
    color: #24632a;
}

.crm-message.danger { border-color: #e0b4b4; background: #fdf7f7; color: #b52b27; }
.crm-message.success { border-color: #b7d8b7; background: #f4faf4; color: #24632a; }

/* Orders table: .orders-table-wrapper was styled, the table itself was not. */
.orders-table { width: 100%; border-collapse: collapse; }

.orders-table th,
.orders-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(152, 162, 179, .35);
}

.orders-table th { font-weight: 600; white-space: nowrap; }
.orders-table tbody tr:last-child td { border-bottom: 0; }
.orders-table-wrapper { overflow-x: auto; }

/* Tailwind utilities the profile, orders and invoice views were authored with.
   Only the ones those templates actually use are defined here. */
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.rounded-lg { border-radius: var(--border-radius, 8px); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.shadow-gray-300 { --tw-shadow-color: #d1d5db; }
.border { border-width: 1px; border-style: solid; }
.border-gray-200 { border-color: rgba(152, 162, 179, .35); }
.p-12 { padding: 3rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-8 { margin-bottom: 2rem; }
.text-4xl { font-size: var(--title-lg-font-size, 2.25rem); line-height: 1.2; }
.font-bold { font-weight: 700; }
.inline-block { display: inline-block; }
.justify-between { justify-content: space-between; }
.space-x-2 > * + * { margin-left: .5rem; }
.no-underline { text-decoration: none; }
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.w-3 { width: .75rem; }
.ml-1 { margin-left: .25rem; }
.mr-1 { margin-right: .25rem; }
.icon-tabler { vertical-align: middle; }

@media (max-width: 767px) {
    .p-12 { padding: 1.5rem; }
    .orders-table th,
    .orders-table td { padding: 10px 12px; }
}

/* The profile page's "Cancel Subscription" link carries .button-secondary and
   .danger, neither of which had a rule, so a destructive action rendered as
   the page's main call to action. */
.button.button-secondary {
    background: none;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--color-white, #fff);
    border-radius: var(--border-radius, 8px);
}

.button.danger,
.button.button-secondary.danger {
    border-color: #F04438;
    color: #F04438;
    background: none;
    background-image: none;
}

.button.danger:hover,
.button.button-secondary.danger:hover { background: rgba(240, 68, 56, .08); }

/* Paired with .w-3 on the arrow icon; the template writes h3 for h-3. */
.h3 { height: .75rem; }

/* ------------------------------------------------------------------
 * CRM plugin card override.
 *
 * The templates wrap their markup in .crm-login-form / .crm-forgot-password-form
 * because the plugin's script looks for those hooks. The plugin's own
 * crm-auth-frontend.css also paints them as a standalone card --
 * max-width:400px, background:#fff, 1px #ddd border, shadow -- so a white panel
 * rendered inside the theme's own .form-login-wrapper card and swallowed the
 * white label and link text. The theme supplies the card; strip the plugin's.
 * ------------------------------------------------------------------ */
.form-login-wrapper .crm-login-form,
.form-login-wrapper .crm-forgot-password-form,
.form-login-wrapper .crm-change-password-form,
.content-section .crm-login-form,
.content-section .crm-forgot-password-form,
.content-section .crm-change-password-form {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The plugin also hard-codes its buttons to WordPress admin blue. The theme's
   own .button rules own these; keep the plugin from repainting them. */
.form-login-wrapper .crm-login-button,
.form-login-wrapper .crm-reset-password-button,
.form-login-wrapper .crm-change-password-button,
.content-section .crm-login-button,
.content-section .crm-reset-password-button,
.content-section .crm-change-password-button {
    background: var(--color-primary);
    color: var(--color-white, #fff);
    border-radius: var(--border-radius, 8px);
}

/* Inside the login card the theme styles .secondary as a plain centred text
   link (.form-action-wrapper .secondary: background:none, no padding), so the
   generic outline above must not box it. */
.form-login-wrapper #grav-login .form-action-wrapper .button.secondary {
    border: 0;
    padding: 0;
}