/*--------------------------------------------------------------
Add-Ons Module — Modern Front-End Styles
Author: Rentopian
Website: https://rentopian.com
Copyright 2023, Rentopian Inc. All Rights Reserved.

Modern add-ons block on an ordinary product page: one card per add-on,
each with a variant picker or an included row, a quantity stepper and
a resolved price, plus a live summary.

The design tokens below mirror the Sets configurator so a page carrying
both reads as one system. They are duplicated rather than shared on
purpose: this module does not depend on the Sets stylesheet being
enqueued, and either can be restyled without disturbing the other.

Every selector lives under .rental-add-ons-modern, so load order can
never leak a rule into the rest of the page.

Theme retheming. Override any variable on the .rental-add-ons-modern
scope (or :root) to recolour without touching this file.
--------------------------------------------------------------*/

.rental-add-ons-modern {
    /*--------------------------------------------------------------
    1. CSS variables (theme retheming surface)
    --------------------------------------------------------------*/
    /* The accent is a dark grey rather than a colour: the add-ons block sits
       inside the product form next to the theme's own buttons, and a strong
       hue there competes with the call to action. Every emphasis in this
       module — selected card, focus ring, prices, summary total — resolves
       to it, so restyling means changing these two values. */
    --rntp-accent: #4b5563;
    --rntp-accent-soft: rgba(75, 85, 99, 0.10);
    --rntp-text: #111827;
    --rntp-text-muted: #6b7280;
    --rntp-border: #e5e7eb;
    --rntp-border-strong: #d1d5db;
    --rntp-bg: #ffffff;
    --rntp-bg-soft: #f9fafb;
    --rntp-error: #dc2626;
    --rntp-error-soft: rgba(220, 38, 38, 0.08);
    --rntp-success: #15803d;
    --rntp-success-soft: rgba(21, 128, 61, 0.08);
    --rntp-radius: 8px;
    --rntp-radius-sm: 4px;
    --rntp-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --rntp-spacing-xs: 4px;
    --rntp-spacing-sm: 8px;
    --rntp-spacing-md: 16px;
    --rntp-spacing-lg: 24px;
    --rntp-font-size-sm: 0.875rem;
    --rntp-font-size-base: 1rem;
    --rntp-font-size-lg: 1.125rem;
    --rntp-transition: 150ms ease-in-out;

    display: block;
    margin: 0 0 var(--rntp-spacing-lg);
    color: var(--rntp-text);
    font-size: var(--rntp-font-size-base);
    line-height: 1.5;
}

/*--------------------------------------------------------------
2. Block heading
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addons-header {
    margin: 0 0 var(--rntp-spacing-sm);
}

.rental-add-ons-modern .rntp-addons-heading {
    margin: 0;
    font-size: var(--rntp-font-size-lg);
    font-weight: 600;
    color: var(--rntp-text);
}

/*--------------------------------------------------------------
3. Error rollup
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addons-errors {
    margin: 0 0 var(--rntp-spacing-md);
    padding: var(--rntp-spacing-sm) var(--rntp-spacing-md);
    background: var(--rntp-error-soft);
    border-left: 3px solid var(--rntp-error);
    border-radius: var(--rntp-radius-sm);
    color: var(--rntp-error);
}

.rental-add-ons-modern .rntp-addons-errors[hidden] {
    display: none;
}

.rental-add-ons-modern .rntp-addons-errors-list {
    margin: 0;
    padding: 0 0 0 1.25em;
    list-style: disc;
}

.rental-add-ons-modern .rntp-addons-errors-list li {
    margin: var(--rntp-spacing-xs) 0;
    font-size: var(--rntp-font-size-sm);
}

/*--------------------------------------------------------------
4. Card frame
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addon-card {
    margin: 0 0 var(--rntp-spacing-sm);
    padding: var(--rntp-spacing-md);
    background: var(--rntp-bg);
    border: 1px solid var(--rntp-border);
    border-radius: var(--rntp-radius);
    box-shadow: var(--rntp-shadow);
    transition: border-color var(--rntp-transition), box-shadow var(--rntp-transition);
}

.rental-add-ons-modern .rntp-addon-card[data-has-error="1"] {
    border-color: var(--rntp-error);
    box-shadow: 0 0 0 1px var(--rntp-error-soft);
}

/* A card that cannot be sold for the chosen dates is dimmed but stays
   readable, so the customer can see what is unavailable rather than
   wondering where it went. */
.rental-add-ons-modern .rntp-addon-card--unavailable {
    background: var(--rntp-bg-soft);
    opacity: 0.7;
}

/* A chosen add-on is marked so the customer can scan what they picked. */
.rental-add-ons-modern .rntp-addon-card[data-chosen="1"] {
    border-color: var(--rntp-accent);
    box-shadow: 0 0 0 1px var(--rntp-accent-soft);
}

/*--------------------------------------------------------------
5. Title bar: [image] [name (flex, ellipsis)] [price] [badge]
--------------------------------------------------------------*/
/* One non-wrapping row, so the badge is anchored at the same horizontal
   position on every card regardless of name length. */
.rental-add-ons-modern .rntp-addon-titlebar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--rntp-spacing-sm);
}

.rental-add-ons-modern .rntp-addon-image {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--rntp-radius-sm);
    overflow: hidden;
    background: var(--rntp-bg-soft);
}

.rental-add-ons-modern .rntp-addon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* min-width:0 is required for a flex child to allow ellipsis. The full
   name stays reachable through the native title="" tooltip. */
.rental-add-ons-modern .rntp-addon-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--rntp-text);
}

.rental-add-ons-modern .rntp-addon-badge {
    flex: 0 0 auto;
    display: inline-block;
    padding: 2px 8px;
    background: var(--rntp-bg-soft);
    border: 1px solid var(--rntp-border);
    border-radius: 999px;
    color: var(--rntp-text-muted);
    font-size: var(--rntp-font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

.rental-add-ons-modern .rntp-addon-badge--required {
    background: var(--rntp-error-soft);
    border-color: transparent;
    color: var(--rntp-error);
}

.rental-add-ons-modern .rntp-addon-badge--included {
    background: var(--rntp-success-soft);
    border-color: transparent;
    color: var(--rntp-success);
}

/*--------------------------------------------------------------
6. Unavailable notice
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addon-unavailable {
    margin: var(--rntp-spacing-sm) 0 0;
    color: var(--rntp-error);
    font-size: var(--rntp-font-size-sm);
}

/*--------------------------------------------------------------
7. Controls row: [select] [stepper]
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addon-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rntp-spacing-sm);
    margin: var(--rntp-spacing-sm) 0 0;
}

/* Styled for the no-JS fallback: once the custom shell activates, the
   select is pulled out of layout and never seen. */
.rental-add-ons-modern .rntp-addon-select {
    display: block;
    width: 100%;
    min-height: 40px;
    /* Right padding leaves room for the chevron painted below; without it
       the longest labels slide under the arrow. */
    padding: var(--rntp-spacing-sm) calc(var(--rntp-spacing-md) + 24px) var(--rntp-spacing-sm) var(--rntp-spacing-md);
    /* Themes and WooCommerce set appearance:none on many selects, which
       leaves ours bare-edged, so the chevron is re-added consistently. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--rntp-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--rntp-spacing-md) center;
    background-size: 12px 8px;
    border: 1px solid var(--rntp-border-strong);
    border-radius: var(--rntp-radius-sm);
    color: var(--rntp-text);
    font-size: var(--rntp-font-size-base);
    line-height: 1.4;
    transition: border-color var(--rntp-transition), box-shadow var(--rntp-transition);
}

.rental-add-ons-modern .rntp-addon-select::-ms-expand {
    display: none;
}

.rental-add-ons-modern .rntp-addon-select:focus {
    outline: none;
    border-color: var(--rntp-accent);
    box-shadow: 0 0 0 3px var(--rntp-accent-soft);
}

.rental-add-ons-modern .rntp-addon-select:disabled {
    background-color: var(--rntp-bg-soft);
    color: var(--rntp-text-muted);
    cursor: not-allowed;
}

.rental-add-ons-modern .rntp-addon-card[data-has-error="1"] .rntp-addon-select {
    border-color: var(--rntp-error);
}

/*--------------------------------------------------------------
8. Quantity stepper
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addon-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
}

.rental-add-ons-modern .rntp-addon-stepper[hidden] {
    display: none;
}

.rental-add-ons-modern .rntp-addon-stepper-btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    background: var(--rntp-bg);
    border: 1px solid var(--rntp-border-strong);
    border-radius: var(--rntp-radius-sm);
    color: var(--rntp-text);
    font-size: 1rem;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--rntp-transition), border-color var(--rntp-transition);
}

.rental-add-ons-modern .rntp-addon-stepper-btn:hover:not(:disabled) {
    background: var(--rntp-bg-soft);
    border-color: var(--rntp-text-muted);
}

.rental-add-ons-modern .rntp-addon-stepper-btn:focus-visible {
    outline: 2px solid var(--rntp-accent);
    outline-offset: 1px;
}

.rental-add-ons-modern .rntp-addon-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rental-add-ons-modern .rntp-addon-stepper-input {
    width: 48px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    background: var(--rntp-bg);
    border: 1px solid var(--rntp-border-strong);
    border-radius: var(--rntp-radius-sm);
    color: var(--rntp-text);
    font-size: 0.95rem;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rental-add-ons-modern .rntp-addon-stepper-input::-webkit-outer-spin-button,
.rental-add-ons-modern .rntp-addon-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rental-add-ons-modern .rntp-addon-stepper-input:focus-visible {
    outline: 2px solid var(--rntp-accent);
    outline-offset: 1px;
}

.rental-add-ons-modern .rntp-addon-stepper-input:disabled {
    background: var(--rntp-bg-soft);
    color: var(--rntp-text-muted);
    cursor: not-allowed;
}

/*--------------------------------------------------------------
9. Custom select

The native <select> stays the submitted value; this shell renders each
option as a thumbnail + name + bold price, which native <option> markup
cannot do. Both classes below are added by JS, so a page without JS keeps
a visible, working native select instead of an inert button.
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addon-select-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}

.rental-add-ons-modern .rntp-cs {
    position: relative;
    display: none;
    width: 100%;
}

.rental-add-ons-modern .rntp-cs.rntp-cs-active {
    display: block;
}

/* Keeps the native select in the form but out of layout once the shell
   takes over. */
.rental-add-ons-modern select.rntp-cs-bound {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    pointer-events: none;
}

.rental-add-ons-modern .rntp-cs-trigger {
    display: flex;
    align-items: center;
    gap: var(--rntp-spacing-sm);
    width: 100%;
    min-height: 40px;
    padding: var(--rntp-spacing-sm) var(--rntp-spacing-md);
    background: var(--rntp-bg);
    border: 1px solid var(--rntp-border-strong);
    border-radius: var(--rntp-radius-sm);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    line-height: 1.3;
    transition: border-color var(--rntp-transition), box-shadow var(--rntp-transition);
}

.rental-add-ons-modern .rntp-cs-trigger:hover:not(:disabled) {
    border-color: var(--rntp-text-muted);
}

.rental-add-ons-modern .rntp-cs-trigger:focus-visible,
.rental-add-ons-modern .rntp-cs--open .rntp-cs-trigger {
    outline: none;
    border-color: var(--rntp-accent);
    box-shadow: 0 0 0 3px var(--rntp-accent-soft);
}

.rental-add-ons-modern .rntp-cs-trigger:disabled {
    background: var(--rntp-bg-soft);
    color: var(--rntp-text-muted);
    cursor: not-allowed;
}

.rental-add-ons-modern .rntp-cs-thumb {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--rntp-radius-sm);
    background: var(--rntp-bg-soft);
}

.rental-add-ons-modern .rntp-cs-thumb[hidden] {
    display: none;
}

.rental-add-ons-modern .rntp-cs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* Stand-in for an option with no image of its own and no product image to
   fall back on. Inline SVG keeps it dependency-free. */
.rental-add-ons-modern .rntp-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        var(--rntp-border)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='10' r='1.5' fill='%239ca3af' stroke='none'/><path d='M3 17l5-5 4 4 3-3 6 6'/></svg>")
        center / 60% no-repeat;
}

.rental-add-ons-modern .rntp-cs-label,
.rental-add-ons-modern .rntp-cs-option-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rental-add-ons-modern .rntp-cs-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rental-add-ons-modern .rntp-cs-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rntp-font-size-sm);
}

/* The price is the visual anchor of a row: the name ellipsises beside it,
   so the amount never gets pushed out of view. */
.rental-add-ons-modern .rntp-cs-price {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--rntp-accent);
}

.rental-add-ons-modern .rntp-cs-chevron {
    flex: 0 0 auto;
    color: var(--rntp-text-muted);
    transition: transform var(--rntp-transition);
}

.rental-add-ons-modern .rntp-cs--open .rntp-cs-chevron {
    transform: rotate(180deg);
}

.rental-add-ons-modern .rntp-cs-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: var(--rntp-spacing-xs) 0;
    list-style: none;
    background: var(--rntp-bg);
    border: 1px solid var(--rntp-border-strong);
    border-radius: var(--rntp-radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.rental-add-ons-modern .rntp-cs-option {
    display: flex;
    align-items: center;
    gap: var(--rntp-spacing-sm);
    margin: 0;
    padding: var(--rntp-spacing-sm) var(--rntp-spacing-md);
    cursor: pointer;
    line-height: 1.3;
}

.rental-add-ons-modern .rntp-cs-option:hover,
.rental-add-ons-modern .rntp-cs-option:focus {
    background: var(--rntp-bg-soft);
}

.rental-add-ons-modern .rntp-cs-option[aria-selected="true"] {
    background: var(--rntp-accent-soft);
}

.rental-add-ons-modern .rntp-cs-option[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The opt-out carries no thumbnail, so its text starts at the panel edge
   rather than leaving an empty image column. */
.rental-add-ons-modern .rntp-cs-option--no-thanks .rntp-cs-name {
    color: var(--rntp-text-muted);
    font-style: italic;
}

/*--------------------------------------------------------------
10. Per-card error
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addon-error {
    margin: var(--rntp-spacing-sm) 0 0;
    color: var(--rntp-error);
    font-size: var(--rntp-font-size-sm);
}

.rental-add-ons-modern .rntp-addon-error[hidden] {
    display: none;
}

/*--------------------------------------------------------------
11. Summary
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addons-summary {
    margin: var(--rntp-spacing-md) 0 0;
    padding: var(--rntp-spacing-sm) var(--rntp-spacing-md);
    background: var(--rntp-bg-soft);
    border: 1px solid var(--rntp-border);
    border-radius: var(--rntp-radius);
}

.rental-add-ons-modern .rntp-addons-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rntp-spacing-sm);
    padding: var(--rntp-spacing-xs) 0;
}

.rental-add-ons-modern .rntp-addons-summary-label {
    color: var(--rntp-text-muted);
    font-size: var(--rntp-font-size-sm);
}

.rental-add-ons-modern .rntp-addons-summary-value {
    font-weight: 600;
    color: var(--rntp-accent);
}

/*--------------------------------------------------------------
12. Hidden input host — never visible
--------------------------------------------------------------*/
.rental-add-ons-modern .rntp-addons-hidden-inputs {
    display: none;
}

/*--------------------------------------------------------------
13. Small screens
--------------------------------------------------------------*/
@media (max-width: 640px) {
    .rental-add-ons-modern .rntp-addon-controls {
        align-items: stretch;
    }

    .rental-add-ons-modern .rntp-addon-select-wrap {
        flex: 1 1 100%;
    }
}