/* ===== Voucher redemption page (page-redeem-voucher.php) ===== */

.rv-hero img {
    width: 100%;
    display: block;
}

/* Intro */
.rv-intro {
    position: relative;
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 0 20px;
    text-align: center;
    font-family: var(--font-main);
}
.rv-intro-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--black-color);
    line-height: 1.2;
}
.rv-intro-title span { color: var(--pink-color); }
.rv-intro-sub {
    margin-top: 18px;
    font-size: 20px;
    font-weight: bold;
    color: var(--black-color);
}
.rv-intro-icon{
    position: absolute;
    top: -45px;
    left: 15%;
}

/* 3-step strip */
.rv-strip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 26px 0 10px;
}
.rv-strip-step {
    flex: 0 0 auto;
    width: 230px;
    position: relative;
    padding-top: 26px;
}
.rv-strip-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: var(--black-color);
    border-radius: 50%;
}
.rv-strip-line {
    flex: 1 1 auto;
    border-top: 2px dashed #bbb;
    margin-top: 7px;
}
.rv-strip-num {
    font-size: 30px;
    font-weight: 900;
    color: var(--black-color);
}
.rv-strip-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--black-color);
    margin: 4px 0 6px;
    line-height: 1.25;
}
.rv-strip-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.45;
}

/* Flow sections with right-side number rail */
.rv-flow {
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 0 20px;
    font-family: var(--font-main);
}
.rv-section {
    position: relative;
    padding: 10px 46px 40px 0;
    text-align: right;
}
.rv-section::before {                 /* dashed vertical rail */
    content: '';
    position: absolute;
    top: 14px;
    right: 7px;
    bottom: -10px;
    border-right: 2px dashed #bbb;
}
.rv-section:last-child::before { bottom: auto; height: 40px; }
.rv-sec-head { position: absolute; top: 0; right: -8px; }
.rv-sec-head::after {                  /* black dot on the rail */
    content: '';
    position: absolute;
    top: 8px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: var(--black-color);
    border-radius: 50%;
}
.rv-sec-num {
    position: absolute;
    top: 0;
    right: 26px;
    font-size: 30px;
    font-weight: 900;
    color: var(--black-color);
}
.rv-sec-title {
    margin: 34px 0 22px;
    font-size: 24px;
    font-weight: 900;
    color: var(--black-color);
}

/* Fields & buttons */
.rv-field label {
    display: block;
    font-size: 13px;
    color: #555;
    margin: 0 6px 4px 0;
}
.rv-field input,
.rv-select {
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 1px solid #d5d5d5;
    border-radius: 26px;
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--black-color);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    text-align: right;
}
.rv-btn {
    height: 52px;
    padding: 0 34px;
    background: var(--red-color);
    color: #fff;
    border: 1px solid var(--red-color);
    border-radius: 26px;
    font-family: var(--font-main);
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: all .2s ease;
}
.rv-btn:hover { background: #fff; color: var(--red-color); }

/* Step 1 row */
.rv-voucher-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.rv-voucher-row .rv-field { width: 230px; }
.rv-voucher-ok {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px;
    background: #f7f7f7;
    border-radius: 26px;
    font-size: 15px;
    font-weight: 600;
    color: var(--black-color);
}
.rv-ok-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3aa557;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}
.rv-voucher-ok.rv-voucher-err .rv-ok-icon { background: var(--red-color); }
.rv-voucher-ok.rv-voucher-err { color: var(--red-color); }

/* Step 2 options row (RTL: option 1 on the right) */
.rv-options {
    display: flex;
    align-items: stretch;
    gap: 18px;
}
.rv-option { display: contents; }             /* strip/panel become row items */
.rv-opt-strip {
    flex: 0 0 96px;
    min-height: 420px;
    border-radius: 48px;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
    box-shadow: inset 0 0 0 200px rgba(49,57,63,.25);
    transition: transform .2s ease;
}
.rv-opt-strip:hover { transform: translateY(-4px); }
.rv-opt-strip-label {
    position: absolute;
    top: 60px;
    right: 50%;
    transform: translateX(50%);
    writing-mode: vertical-rl;
    color: #fff;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    white-space: nowrap;
}
.rv-opt-badge {
    position: absolute;
    top: -16px;
    right: 50%;
    transform: translateX(50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px dashed var(--pink-color);
    border-radius: 50%;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: bold;
    color: var(--black-color);
    z-index: 2;
}
.rv-opt-badge-active {
    background: var(--pink-color);
    border-style: solid;
    color: #fff;
    width: 40px;
    height: 40px;
    top: -20px;
}

/* Expanded panel */
.rv-opt-panel {
    display: none;
    flex: 1 1 auto;
    position: relative;
    border: 2px solid var(--pink-color);
    border-radius: 22px;
    background: #fff;
    padding: 30px 26px 26px;
    gap: 22px;
}
.rv-option.expanded .rv-opt-strip { display: none; }
.rv-option.expanded .rv-opt-panel { display: flex; flex-direction: row-reverse; }
.rv-panel-main { flex: 1 1 55%; min-width: 0; }
.rv-panel-side { flex: 0 0 40%; display: flex; flex-direction: column; gap: 14px; }
.rv-panel-title {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 900;
    color: var(--black-color);
}

/* chips */
.rv-chips-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.rv-chip {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--black-color);
    border-radius: 20px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: var(--black-color);
    cursor: pointer;
    transition: all .15s ease;
}
.rv-chip::after { content: ' ←'; }
.rv-chip:hover { border-color: var(--red-color); color: var(--red-color); }
.rv-chip.active {
    background: var(--red-color);
    border-color: var(--red-color);
    color: #fff;
}

/* product blurb */
.rv-product {
    display: flex;
    flex-direction: row-reverse;
    gap: 14px;
    align-items: flex-start;
    margin-top: 8px;
}
.rv-product-text { flex: 1 1 auto; }
.rv-product-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; margin-top: 10px; }
.rv-product-desc { font-size: 13px; color: #666; line-height: 1.5; }
.rv-product-img {
    flex: 0 0 44%;
    max-width: 44%;
    border-radius: 12px;
    object-fit: cover;
}

/* calendar + time boxes */
.rv-cal-box, .rv-time-box, .rv-note-box {
    background: #f4f4f4;
    border-radius: 14px;
    padding: 14px;
}
.rv-cal-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.rv-time-box { text-align: center; }
.rv-time-date { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.rv-time {
    min-width: 90px;
    padding: 8px 18px;
    background: var(--black-color);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}
.rv-time.active { background: var(--pink-color); }
.rv-note-box {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    line-height: 1.5;
    text-align: center;
}

/* Tour results (filtered by place/date) */
.rv-tour-results {
    background: #f4f4f4;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}
.rv-tour-result {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: right;
    font-family: var(--font-main);
    transition: border-color .15s ease;
}
.rv-tour-result:hover { border-color: var(--pink-color); }
.rv-tour-result.active { border: 2px solid var(--pink-color); padding: 9px 13px; }
.rv-tour-result-title { font-size: 14px; font-weight: 800; color: var(--black-color); }
.rv-tour-result-meta  { font-size: 12px; color: #666; margin-top: 2px; }

/* package option */
.rv-package-list { margin: 10px 18px 0 0; padding: 0; }
.rv-package-list li {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
    list-style: none;
    position: relative;
    padding-right: 14px;
}
.rv-package-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pink-color);
}
.rv-panel-side-package { justify-content: center; align-items: center; }
.rv-package-img-wrap { position: relative; width: 100%; }
.rv-package-img { width: 100%; border-radius: 12px; }
.rv-price-tag {
    position: absolute;
    top: -10px;
    right: -6px;
    width: 64px;
}
.rv-price-tag img { width: 100%; display: block; transform: rotate(-10deg); }
.rv-price-tag span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    color: var(--red-color);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: bold;
}

/* Step 3 */
.rv-details-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.rv-details-row .rv-field { flex: 1 1 200px; }
#rv-redeem-status { margin-top: 16px; max-width: 620px; }

/* Responsive */
@media (max-width: 900px) {
    .rv-strip { flex-wrap: wrap; }
    .rv-strip-line { display: none; }
    .rv-options { flex-direction: column; }
    .rv-opt-strip { min-height: 120px; border-radius: 20px; }
    .rv-opt-strip-label { writing-mode: horizontal-tb; top: 50%; transform: translate(50%, -50%); }
    .rv-option.expanded .rv-opt-panel { flex-direction: column; }
    .rv-panel-side { flex: 1 1 auto; }
}