/**
 * Tourfic Niche Extras - frontend package selector + toggle (single tour pages).
 * Plain CSS only; works alongside Tourfic's booking form styles.
 *
 * Layout:
 *   .tne-packages
 *     .tne-mode-toggle            segmented control: Per person | Package
 *     .tne-packages-package       (Package mode only)
 *       .tne-packages-label       "Choose package"
 *       .tne-packages-list        responsive row of package cards
 *       .tne-packages-people      "Number of packages" label + qty input
 *       .tne-packages-preview     price preview (package_price × qty)
 *
 *   .tf-booking-person.tne-disabled  Tourfic's Person Info, greyed + frozen
 *                                    in Package mode (inputs stay readonly,
 *                                    NOT disabled, so they still submit).
 */

.tne-packages {
    display: block;
    margin: 16px 0;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Segmented mode toggle ---- */
.tne-mode-toggle {
    display: flex;
    width: 100%;
    background: #eef1f5;
    border: 1px solid #d6dae0;
    border-radius: 10px;
    padding: 3px;
    box-sizing: border-box;
    margin-bottom: 14px;
    gap: 3px;
}

.tne-mode-option {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #50575e;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.tne-mode-option:hover {
    color: #1d2327;
}

.tne-mode-option.tne-mode-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.18);
}

/* ---- Package section (hidden in Per person mode) ---- */
.tne-packages.tne-mode-person .tne-packages-package {
    display: none !important;
}

.tne-packages-label {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--wp--preset--color--contrast, #1d2327);
}

/* Responsive row of package cards. */
.tne-packages-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.tne-package-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 220px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.tne-package-option:hover {
    border-color: #93b4f5;
    background: #f8fafc;
}

.tne-package-option.tne-package-selected {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 1px #1d4ed8, 0 2px 8px rgba(29, 78, 216, 0.12);
    background: #eff6ff;
}

/* Beat Tourfic's booking-form rule that forces inputs to width:100% /
   display:block. Without this the radio expands to ~281px and squeezes
   .tne-package-card to 0 width, spilling its text out to the right of the
   bordered option. The scoped .tne-package-option prefix + !important wins
   over Tourfic's non-!important input rule. DO NOT regress this. */
.tne-package-option .tne-package-radio {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 0 !important;
    height: 18px;
    margin: 4px 0 0;
    accent-color: #1d4ed8;
    cursor: pointer;
}

.tne-package-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.tne-package-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--wp--preset--color--contrast, #1d2327);
    line-height: 1.3;
}

.tne-package-price {
    color: #1d4ed8;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    margin-top: 2px;
}

/* Description may contain HTML (wp_kses_post'd server-side); keep it in its
   own block so it never overlaps the title/price. */
.tne-package-desc {
    display: block;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 2px;
}

.tne-package-desc p {
    margin: 0 0 4px;
}

.tne-package-desc p:last-child {
    margin-bottom: 0;
}

.tne-package-max {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* "Number of packages" row: label on the left, input on the same line. */
.tne-packages-people {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.tne-packages-people-label {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 14px;
    color: var(--wp--preset--color--contrast, #1d2327);
}

.tne-packages-people-input {
    width: 80px;
    height: 40px;
    padding: 6px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    color: var(--wp--preset--color--contrast, #1d2327);
    background: #fff;
}

.tne-packages-people-input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 1px #1d4ed8;
    outline: none;
}

/* Price preview = package_price × number_of_packages. */
.tne-packages-preview {
    margin-top: 8px;
    font-size: 14px;
    padding: 10px 12px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tne-preview-title {
    font-weight: 600;
}

.tne-preview-qty {
    color: #50575e;
}

.tne-preview-label {
    color: #50575e;
    margin-left: 4px;
}

.tne-preview-price {
    font-weight: 700;
    color: #1d4ed8;
    font-size: 16px;
}

/* ---- Frozen Tourfic Person Info block (Package mode) ----
   pointer-events:none stops the +/- steppers and direct input, while
   readonly (set in JS) keeps the values submitted in the form POST.
   We do NOT use input[disabled] because disabled inputs are excluded from
   FormData and would re-trigger Tourfic's "Adults/Children/Infant required"
   server-side validation. */
.tf-booking-person.tne-disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.6);
    position: relative;
}

.tf-booking-person.tne-disabled input {
    cursor: not-allowed;
}