/* ==========================================================================
   Velgrina — Customer Account CSS
   Hyva native yapı üstüne uygulanır, override değil tamamlama
   ========================================================================== */

:root {
    --vc-teal: #2E7D8C;
    --vc-teal-hover: #246570;
    --vc-black: #1E2022;
    --vc-border: #E5E7EB;
    --vc-bg-light: #F4F5F4;
    --vc-muted: #6B7280;
    --vc-danger: #DC2626;
    --vc-radius: 6px;
    --vc-radius-lg: 12px;
}


/* ==========================================================================
   1. Page container — constrain width on auth pages
   ========================================================================== */

.customer-account-login .page-main,
.customer-account-create .page-main,
.customer-account-forgotpassword .page-main,
.customer-account-createpassword .page-main {
    max-width: 1200px;
    margin-inline: auto;
    padding: 2rem 1.5rem 3rem;
}

@media (min-width: 768px) {
    .customer-account-login .page-main,
    .customer-account-create .page-main,
    .customer-account-forgotpassword .page-main {
        padding: 3rem 2rem 4rem;
    }
}

/* Account logged-in pages (dashboard, edit, address, orders…) */
.account .page-main {
    max-width: 1280px;
    margin-inline: auto;
    padding: 2rem 1.5rem 3rem;
}

@media (min-width: 1024px) {
    .account .page-main {
        padding: 2.5rem 2rem 4rem;
    }
}


/* ==========================================================================
   2. Page titles
   ========================================================================== */

.customer-account-login .page-title,
.customer-account-create .page-title,
.customer-account-forgotpassword .page-title,
.customer-account-createpassword .page-title,
.account .page-title {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--vc-black);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--vc-border);
}

@media (min-width: 768px) {
    .customer-account-login .page-title,
    .customer-account-create .page-title,
    .customer-account-forgotpassword .page-title,
    .account .page-title {
        font-size: 2.5rem;
    }
}


/* ==========================================================================
   3. Login page — two-column layout (login + register)
   ========================================================================== */

/* #customer-login-container contains two sibling .card blocks */
.customer-account-login #customer-login-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .customer-account-login #customer-login-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Card styling for login + register blocks */
.customer-account-login .card,
.customer-account-login .block-new-customer.card {
    background: #FFFFFF;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-lg);
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Remove Hyva default p-8 / border-t from new customer block — card already styled */
.customer-account-login .block-new-customer.p-8 {
    padding: 2rem;
}

.customer-account-login .block-new-customer.border-t {
    border-top: none;
}

/* Headings inside cards */
.customer-account-login .card h2,
.customer-account-login .card .title-font {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--vc-black);
    margin: 0 0 0.5rem 0;
}

.customer-account-login .card p {
    color: var(--vc-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}


/* ==========================================================================
   4. Create account / forgot password forms
   ========================================================================== */

/* Create account form — let Hyva's native md:grid grid-cols-2 gap-4 do the layout.
   Form itself stays full width, card styling applied to individual fieldsets. */
.customer-account-create .form-create-account {
    max-width: 1000px;
    margin-inline: auto;
}

/* Forgot / reset password — narrow single column */
.customer-account-forgotpassword .form.password.forget,
.customer-account-createpassword .form.password.reset {
    max-width: 480px;
    margin-inline: auto;
    background: #FFFFFF;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-lg);
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Fieldset cards — Hyva adds .card class to each fieldset, style them */
.customer-account-create fieldset.card {
    background: #FFFFFF;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-lg);
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin: 0;
}

/* Fieldset headings (Kişisel Bilgiler / Giriş Bilgileri) */
.customer-account-create .fieldset > .legend {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--vc-black);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--vc-border);
    display: block;
    width: 100%;
}

/* Actions toolbar — full width below the 2-col grid */
.customer-account-create .form-create-account > .actions-toolbar {
    margin-top: 1.5rem;
}

.customer-account-create .legend,
.customer-account-forgotpassword .legend,
.customer-account-createpassword .legend {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--vc-black);
    margin-bottom: 1rem;
    padding: 0;
    border: none;
}


/* ==========================================================================
   5. Form fields (auth pages)
   ========================================================================== */

.customer-account-login .field,
.customer-account-create .field,
.customer-account-forgotpassword .field,
.customer-account-createpassword .field,
.account .field {
    margin-bottom: 1rem;
}

.customer-account-login label.label,
.customer-account-create label.label,
.customer-account-forgotpassword label.label,
.customer-account-createpassword label.label,
.account label.label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--vc-black);
    margin-bottom: 0.375rem;
}

.customer-account-login input[type="email"],
.customer-account-login input[type="text"],
.customer-account-login input[type="password"],
.customer-account-create input[type="email"],
.customer-account-create input[type="text"],
.customer-account-create input[type="password"],
.customer-account-create input[type="tel"],
.customer-account-forgotpassword input[type="email"],
.customer-account-createpassword input[type="password"],
.account input[type="email"],
.account input[type="text"],
.account input[type="password"],
.account input[type="tel"],
.account select,
.account textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    background-color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    color: var(--vc-black);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.customer-account-login input:focus,
.customer-account-create input:focus,
.customer-account-forgotpassword input:focus,
.customer-account-createpassword input:focus,
.account input:focus,
.account select:focus,
.account textarea:focus {
    outline: none;
    border-color: var(--vc-teal);
    box-shadow: 0 0 0 3px rgba(46, 125, 140, 0.1);
}

input.mage-error {
    border-color: var(--vc-danger);
}

div.mage-error {
    color: var(--vc-danger);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-family: 'Poppins', sans-serif;
}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.customer-account-login .actions-toolbar,
.customer-account-create .actions-toolbar,
.customer-account-forgotpassword .actions-toolbar,
.customer-account-createpassword .actions-toolbar,
.account .actions-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.customer-account-login button.btn-primary,
.customer-account-login button[type="submit"],
.customer-account-create button.btn-primary,
.customer-account-create button[type="submit"],
.customer-account-forgotpassword button.btn-primary,
.customer-account-forgotpassword button[type="submit"],
.customer-account-createpassword button[type="submit"],
.account button.btn-primary,
.account button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--vc-teal);
    color: #FFFFFF;
    border: none;
    border-radius: var(--vc-radius);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 200ms ease;
    min-height: 2.75rem;
}

.customer-account-login button.btn-primary:hover,
.customer-account-login button[type="submit"]:hover,
.customer-account-create button.btn-primary:hover,
.customer-account-create button[type="submit"]:hover,
.account button.btn-primary:hover,
.account button.primary:hover {
    background-color: var(--vc-teal-hover);
}

/* Secondary button (e.g. register link) */
.customer-account-login .block-new-customer .action.create,
.customer-account-login a.btn-secondary,
.customer-account-login a.action.create.primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: var(--vc-teal);
    border: 1px solid var(--vc-teal);
    border-radius: var(--vc-radius);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 200ms ease;
    min-height: 2.75rem;
}

.customer-account-login .block-new-customer .action.create:hover,
.customer-account-login a.btn-secondary:hover,
.customer-account-login a.action.create.primary:hover {
    background-color: rgba(46, 125, 140, 0.05);
}

/* Forgot password link */
.customer-account-login .action.remind {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: var(--vc-teal);
    text-decoration: none;
}

.customer-account-login .action.remind:hover {
    text-decoration: underline;
}


/* ==========================================================================
   7. Account dashboard — sidebar + main layout
   ========================================================================== */

.account .columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .account .columns {
        grid-template-columns: 260px 1fr;
        gap: 2.5rem;
    }
}

/* Sidebar navigation block */
.account .block-collapsible-nav {
    background: #FFFFFF;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.account .block-collapsible-nav-title {
    padding: 1rem 1.25rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vc-teal);
    border-bottom: 1px solid var(--vc-border);
    background: var(--vc-bg-light);
}

.account .block-collapsible-nav-content ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.account .block-collapsible-nav-content li a,
.account .block-collapsible-nav-content li strong {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: var(--vc-black);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 150ms ease;
}

.account .block-collapsible-nav-content li a:hover {
    background: var(--vc-bg-light);
    color: var(--vc-teal);
    border-left-color: var(--vc-teal);
}

.account .block-collapsible-nav-content li.current a,
.account .block-collapsible-nav-content li.current strong {
    background: var(--vc-bg-light);
    color: var(--vc-teal);
    font-weight: 600;
    border-left-color: var(--vc-teal);
}


/* ==========================================================================
   8. Dashboard blocks (info, addresses, orders)
   ========================================================================== */

.account .block {
    background: #FFFFFF;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.account .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--vc-border);
}

.account .block-title strong,
.account .block-title h1,
.account .block-title h2 {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--vc-black);
    margin: 0;
}

.account .block-title a,
.account .block-title .action {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: var(--vc-teal);
    text-decoration: none;
    font-weight: 500;
}

.account .block-title a:hover {
    text-decoration: underline;
}

/* Box content inside blocks */
.account .box {
    padding: 0;
    background: transparent;
    border: none;
}

.account .box-title {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vc-muted);
    margin-bottom: 0.5rem;
}

.account .box-content {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: var(--vc-black);
    line-height: 1.6;
}

.account .box-actions {
    margin-top: 0.75rem;
}

.account .box-actions a {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    color: var(--vc-teal);
    text-decoration: none;
    font-weight: 500;
}

.account .box-actions a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   9. Tables (orders, addresses)
   ========================================================================== */

.account .table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-lg);
    background: #FFFFFF;
}

.account table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
}

.account table thead {
    background: var(--vc-bg-light);
}

.account table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vc-muted);
    border-bottom: 1px solid var(--vc-border);
}

.account table td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--vc-black);
    border-bottom: 1px solid #F3F4F6;
}

.account table tr:last-child td {
    border-bottom: none;
}


/* ==========================================================================
   10. Empty states
   ========================================================================== */

.account .empty,
.account p.empty {
    padding: 2rem;
    text-align: center;
    color: var(--vc-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    background: var(--vc-bg-light);
    border-radius: var(--vc-radius);
}