/* ==========================================================================
   Cruise Tools — Tip Calculator specific styles
   Layered on top of cruisetools-core.css
   ========================================================================== */

/* Rate display under cruise line selection */
.cruisetools-rate-display {
    background: var(--cruisetools-bg);
    padding: var(--cruisetools-space-md);
    border-radius: var(--cruisetools-radius-sm);
    margin: var(--cruisetools-space-md) 0;
    font-size: 0.9rem;
}
.cruisetools-rate-display .rate-amount {
    font-weight: 700;
    color: var(--cruisetools-primary);
}
.cruisetools-rate-display .rate-services {
    color: var(--cruisetools-text-muted);
    margin-top: var(--cruisetools-space-xs);
    font-size: 0.85rem;
}

/* Tip category rows in sections 2 and 3 */
.cruisetools-tip-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cruisetools-space-md);
    align-items: center;
    padding: var(--cruisetools-space-md) 0;
    border-bottom: 1px solid var(--cruisetools-border);
}
.cruisetools-tip-row:last-child {
    border-bottom: none;
}
.cruisetools-tip-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cruisetools-tip-name {
    font-weight: 600;
    color: var(--cruisetools-text);
    font-size: 0.95rem;
}
.cruisetools-tip-suggested {
    color: var(--cruisetools-text-muted);
    font-size: 0.8rem;
}
.cruisetools-tip-input {
    display: flex;
    align-items: center;
    gap: var(--cruisetools-space-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cruisetools-tip-input label,
.cruisetools-tip-input .cruisetools-tip-count-label {
    font-size: 0.8rem;
    color: var(--cruisetools-text-muted);
    font-weight: 500;
    margin: 0;
}
.cruisetools-tip-input input[type="number"] {
    width: 70px;
    padding: 4px 8px;
    border: 1px solid var(--cruisetools-border);
    border-radius: var(--cruisetools-radius-sm);
    font-size: 0.9rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.cruisetools-tip-amount {
    font-weight: 700;
    color: var(--cruisetools-primary);
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: right;
    font-size: 1rem;
}

/* Responsive tip rows on mobile */
@media (max-width: 600px) {
    .cruisetools-tip-row {
        grid-template-columns: 1fr;
        gap: var(--cruisetools-space-xs);
    }
    .cruisetools-tip-input {
        justify-content: flex-start;
    }
    .cruisetools-tip-amount {
        text-align: left;
        min-width: 0;
    }
}

/* Combined subtotal in auto-grat section */
.cruisetools-subtotal-bold {
    border-top: 2px solid var(--cruisetools-primary);
    font-weight: 700;
}

/* Guidance callout — onboard tipping context */
.cruisetools-tip-guidance {
    background: #e8f4f8;
    border: 1px solid #b8d8e8;
    border-radius: var(--cruisetools-radius-sm);
    padding: var(--cruisetools-space-md);
    margin-bottom: var(--cruisetools-space-lg);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--cruisetools-text);
}
.cruisetools-tip-guidance p {
    margin: 0 0 var(--cruisetools-space-sm) 0;
}
.cruisetools-tip-guidance p:last-child {
    margin-bottom: 0;
}

/* Package gratuity toggles under promo callout */
.cruisetools-package-grat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cruisetools-space-sm) 0;
    border-top: 1px solid var(--cruisetools-border);
    font-size: 0.9rem;
}
.cruisetools-package-grat-item label {
    display: flex;
    align-items: center;
    gap: var(--cruisetools-space-xs);
    cursor: pointer;
    font-weight: 500;
    margin: 0;
}
.cruisetools-package-grat-item .cruisetools-package-grat-rate {
    color: var(--cruisetools-text-muted);
    font-size: 0.8rem;
    margin-left: var(--cruisetools-space-xs);
}
.cruisetools-package-grat-item .cruisetools-package-grat-total {
    font-weight: 700;
    color: var(--cruisetools-primary);
    font-variant-numeric: tabular-nums;
}
.cruisetools-package-grats-desc {
    font-size: 0.85rem;
    color: var(--cruisetools-text-muted);
    margin: var(--cruisetools-space-xs) 0 var(--cruisetools-space-sm) 0;
    line-height: 1.4;
}
.cruisetools-package-grats-sep,
.cruisetools-promo-section-sep {
    border: 0;
    border-top: 1px solid var(--cruisetools-border);
    margin: var(--cruisetools-space-md) 0 var(--cruisetools-space-sm) 0;
    opacity: 0.6;
}
.cruisetools-promo-section {
    margin-bottom: var(--cruisetools-space-sm);
}
.cruisetools-promo-section-note {
    font-size: 0.85rem;
    color: var(--cruisetools-text-muted);
    margin: var(--cruisetools-space-xs) 0 var(--cruisetools-space-sm) 0;
    line-height: 1.4;
}
.cruisetools-line-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--cruisetools-space-xs);
    padding: var(--cruisetools-space-sm) 0;
    border-bottom: 1px dashed var(--cruisetools-border);
}
.cruisetools-line-item:last-child {
    border-bottom: 0;
}
.cruisetools-line-item label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
}
.cruisetools-line-item-total {
    font-weight: 700;
    color: var(--cruisetools-primary);
    font-variant-numeric: tabular-nums;
    min-width: 5rem;
    text-align: right;
    align-self: flex-start;
}
.cruisetools-line-item-rate {
    color: var(--cruisetools-text-muted);
    font-size: 0.8rem;
    margin-left: var(--cruisetools-space-xs);
}
.cruisetools-line-item-note {
    font-size: 0.75rem;
    color: var(--cruisetools-text-muted);
    font-style: italic;
}
.cruisetools-line-item-count {
    font-size: 0.85rem;
    color: var(--cruisetools-text-muted);
}
.cruisetools-line-item-count .line-item-count-input {
    width: 50px;
    padding: 2px 6px;
    border: 1px solid var(--cruisetools-border);
    border-radius: var(--cruisetools-radius-sm);
    font-size: 0.85rem;
    text-align: center;
}
.cruisetools-trust-signal {
    margin-top: var(--cruisetools-space-md);
    padding: var(--cruisetools-space-sm);
    border-top: 1px solid var(--cruisetools-border);
    font-size: 0.75rem;
    color: var(--cruisetools-text-muted);
    line-height: 1.5;
    text-align: center;
}
.cruisetools-trust-signal a,
.cruisetools-trust-signal .cruisetools-advisor-placeholder {
    color: var(--cruisetools-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cruisetools-package-grat-item .cruisetools-package-grat-note {
    display: block;
    font-size: 0.75rem;
    color: var(--cruisetools-text-muted);
    font-weight: 400;
    font-style: italic;
}
.cruisetools-package-grat-count {
    font-size: 0.85rem;
    color: var(--cruisetools-text-muted);
    margin-left: var(--cruisetools-space-sm);
}
.cruisetools-package-grat-count .package-grat-count-input {
    width: 50px;
    padding: 2px 6px;
    border: 1px solid var(--cruisetools-border);
    border-radius: var(--cruisetools-radius-sm);
    font-size: 0.85rem;
    text-align: center;
}

/* Sender note — displayed above the calculator on shared views */
.cruisetools-sender-note {
    background: #f0f7ff;
    border: 1px solid #c5ddf5;
    border-radius: var(--cruisetools-radius-sm);
    padding: var(--cruisetools-space-md) var(--cruisetools-space-lg);
    margin-bottom: var(--cruisetools-space-lg);
}
.cruisetools-sender-name {
    font-size: 0.95rem;
    color: var(--cruisetools-text);
    margin-bottom: var(--cruisetools-space-xs);
}
.cruisetools-sender-message {
    font-size: 0.9rem;
    color: var(--cruisetools-text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Shared view indicator */
.cruisetools-shared-notice {
    background: #fff8e1;
    border-left: 4px solid var(--cruisetools-warning);
    padding: var(--cruisetools-space-md);
    border-radius: 0 var(--cruisetools-radius-sm) var(--cruisetools-radius-sm) 0;
    margin-bottom: var(--cruisetools-space-lg);
    font-size: 0.9rem;
}
.cruisetools-shared-notice strong {
    color: var(--cruisetools-warning);
}
