/* tuttoprofessionalaccount — registration form styles */

/* Conditional fields: hidden from first paint, revealed by JS per the rules */
.js-customer-form .form-group:has(#field-company),
.js-customer-form .form-group:has(#field-siret),
.js-customer-form .form-group:has(#field-tuttopro_kbis),
.js-customer-form .form-group:has(#field-tuttopro_vat_number),
.js-customer-form .form-group:has(#field-tuttopro_address1),
.js-customer-form .form-group:has(#field-tuttopro_postcode),
.js-customer-form .form-group:has(#field-tuttopro_city) {
    display: none;
}

/* Reveal as block, like the theme's native .form-group.row: the grid is
   float-based (cols float only at >=768px), so block keeps the native
   behavior — label/input side by side on desktop, stacked on mobile */
.js-customer-form .form-group.tuttopro-visible {
    display: block !important;
}

/* Fields made required by the Professional rules: hide the theme's
   "Optional" hint (rendered whenever a field is built with required=false) */
.js-customer-form .form-group.tuttopro-required .form-control-comment {
    display: none !important;
}

/* Checkboxes merged into the combined consent one: terms/privacy + receive offers/newsletter */
.js-customer-form .form-group:has(input[name="psgdpr"]),
.js-customer-form .form-group:has(input[name="customer_privacy"]),
.js-customer-form .form-group:has(input[name="newsletter"]) {
    display: none !important;
}

/* Personal / Professional toggle rendered as segmented buttons,
   styled like the PRS02043 theme .btn-primary (gold #fab505, black text,
   5px radius, capitalized, black on hover) */
.js-customer-form .form-group:has(input[name="tuttopro_account_type"]) .radio-inline {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    padding: 0.65rem 1.6rem;
    border: 2px solid #e5e5e5;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-transform: capitalize;
    color: #414141;
    background-color: #ffffff;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

.js-customer-form .form-group:has(input[name="tuttopro_account_type"]) .radio-inline .custom-radio {
    display: none;
}

.js-customer-form .form-group:has(input[name="tuttopro_account_type"]) .radio-inline:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.js-customer-form .form-group:has(input[name="tuttopro_account_type"]) .radio-inline:has(input:checked) {
    border-color: #fab505;
    background-color: #fab505;
    color: #000000;
}

/* Combined consent text in italic (theme escapes HTML in checkbox labels) */
.js-customer-form .form-group:has(input[name="tuttopro_consent"]) label {
    font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Locked professional delivery address (anti-fraud).
 * Cosmetic layer only — the server strips/forces the checkout address
 * parameters in actionFrontControllerInitAfter.
 * ------------------------------------------------------------------------- */

/* Checkout addresses step + my-account addresses page: no add/edit/delete */
body.tuttopro-address-locked a[data-link-action="add-address"],
body.tuttopro-address-locked a[data-link-action="edit-address"],
body.tuttopro-address-locked a[data-link-action="delete-address"],
body.tuttopro-address-locked a[data-link-action="different-invoice-address"],
body.tuttopro-address-locked a[href*="newAddress="],
body.tuttopro-address-locked a[href*="editAddress="],
body.tuttopro-address-locked a[href*="deleteAddress="],
body.tuttopro-address-locked a[href*="controller=address"],
body.tuttopro-address-locked .addresses-footer,
body.tuttopro-address-locked #checkout-addresses-step .add-address,
body.tuttopro-address-locked #invoice-addresses {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Product page price blocks: green "open a pro account" CTA (everyone) and
 * blue "Votre tarif professionnel" (logged-in pros with a group reduction).
 *
 * The theme applies `.product-prices div { display: inline-block; font-size:
 * 24px; font-weight: 500; ... }` (0,1,1) to every div inside the price area,
 * which broke our flex layout. All div rules below are scoped under
 * `.tuttopro-price-blocks` (0,2,0) to win, and explicitly reset the
 * properties that theme rule forces.
 * ------------------------------------------------------------------------- */

.product-prices .tuttopro-price-blocks,
.tuttopro-price-blocks {
    display: block;
    width: 100%;
    clear: both;
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 400;
}

.tuttopro-price-blocks .tuttopro-pro-cta,
.tuttopro-price-blocks .tuttopro-pro-tariff {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 14px;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
}

.tuttopro-price-blocks .tuttopro-pro-cta {
    background: #f2faf3;
    border: 1px solid #2e9e44;
}

.tuttopro-price-blocks .tuttopro-pro-tariff {
    background: #f1f7ff;
    border: 1px solid #1a73e8;
}

.tuttopro-price-blocks .tuttopro-block-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #ffffff;
}

.tuttopro-price-blocks .tuttopro-block-icon-green {
    background: #2e9e44;
}

.tuttopro-price-blocks .tuttopro-block-icon-blue {
    background: #1a73e8;
}

/* The theme forces every inline svg to 300x300 (svg:not(:root) in theme.css);
   pin our icon sizes back, the same way the theme does for blockreassurance */
.tuttopro-price-blocks .tuttopro-block-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.tuttopro-price-blocks .tuttopro-btn-green svg {
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px !important;
}

.tuttopro-price-blocks .tuttopro-pro-cta-body,
.tuttopro-price-blocks .tuttopro-pro-tariff-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    font-size: 14px;
    font-weight: 400;
}

.tuttopro-price-blocks .tuttopro-pro-cta-body p,
.tuttopro-price-blocks .tuttopro-pro-tariff-body p {
    margin: 0 0 3px;
    line-height: 1.35;
}

.tuttopro-price-blocks .tuttopro-pro-cta-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2d3d;
}

.tuttopro-price-blocks .tuttopro-pro-cta-title span {
    color: #2e9e44;
}

.tuttopro-price-blocks .tuttopro-pro-cta-sub {
    font-size: 13px;
    color: #33404f;
}

.tuttopro-price-blocks .tuttopro-pro-cta-points {
    font-size: 12px;
    color: #2e9e44;
}

.tuttopro-price-blocks .tuttopro-pro-cta-points span {
    margin-right: 14px;
    white-space: nowrap;
}

.tuttopro-price-blocks .tuttopro-pro-cta-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin-left: auto;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
}

.tuttopro-price-blocks .tuttopro-btn-green {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1e8e3e;
    border: 1px solid #1e8e3e;
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    white-space: nowrap;
}

.tuttopro-price-blocks .tuttopro-btn-green:hover,
.tuttopro-price-blocks .tuttopro-btn-green:focus {
    background: #17702f;
    border-color: #17702f;
    color: #ffffff;
    text-decoration: none;
}

.tuttopro-price-blocks .tuttopro-pro-cta-hint {
    font-size: 11px;
    color: #6b7a89;
}

.tuttopro-price-blocks .tuttopro-pro-tariff-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a73e8;
}

.tuttopro-price-blocks .tuttopro-pro-tariff-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.tuttopro-price-blocks .tuttopro-pro-price {
    font-size: 22px;
    font-weight: 700;
    color: #1f2d3d;
}

.tuttopro-price-blocks .tuttopro-pro-base {
    font-size: 14px;
    color: #6b7a89;
    text-decoration: line-through;
}

.tuttopro-price-blocks .tuttopro-pro-percent {
    align-self: center;
    background: #1a73e8;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 7px;
    white-space: nowrap;
}

.tuttopro-price-blocks .tuttopro-pro-savings {
    font-size: 13px;
    font-weight: 600;
    color: #1a73e8;
}

@media (max-width: 767px) {
    .tuttopro-price-blocks .tuttopro-pro-cta {
        flex-wrap: wrap;
    }

    .tuttopro-price-blocks .tuttopro-pro-cta-action {
        flex-basis: 100%;
        align-items: flex-start;
    }

    .tuttopro-price-blocks .tuttopro-btn-green {
        width: 100%;
        justify-content: center;
    }
}