/* Umair's customer pages: profile, favorites, contact, reviews. Uses the --cx-* colours from assets/booking.css. */

/* avatar: photo or initials */
.cu-avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: middle; }
.cu-avatar-initials { background: var(--cx-accent); color: #fff; font-weight: 700; font-family: 'Ubuntu', sans-serif; }

/* navbar account menu */
.cu-nav-user { display: inline-flex !important; align-items: center; gap: 8px; }
.cu-nav-user .cu-avatar { width: 30px; height: 30px; }

/* desktop navbar: the template spaces items 45px apart, which no longer fits once Contact and the
   account menu are added, so links wrapped onto two lines. Tighter gaps + no wrapping fix that. */
.header__nav-link { white-space: nowrap; }
@media (min-width: 1200px) {
  .header__nav { margin-left: 24px; }
  .header__nav-item { margin-right: 22px; }
  .header__sign-in { margin-left: 24px; }
}

/* stars */
.cu-stars { color: #f5c542; white-space: nowrap; }
.cu-stars i { margin-right: 2px; }
.cu-rating-big { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cu-rating-big .cu-score { font-size: 34px; font-weight: 700; line-height: 1; color: var(--cx-text); }
.cu-rating-big .cu-stars { font-size: 20px; }

/* clickable star picker: radios in reverse order so CSS can colour "this star and the ones before it" */
.cu-star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.cu-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cu-star-input label { font-size: 30px; color: var(--cx-booked); cursor: pointer; margin: 0; transition: color .15s, transform .1s; }
.cu-star-input label:hover, .cu-star-input label:hover ~ label,
.cu-star-input input:checked ~ label { color: #f5c542; }
.cu-star-input label:active { transform: scale(.9); }
.cu-star-input input:focus-visible + label { outline: 2px solid var(--cx-pink); outline-offset: 2px; border-radius: 4px; }

/* reviews list */
.cu-review { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cx-line); }
.cu-review:last-child { border-bottom: 0; }
.cu-review-body { flex: 1; min-width: 0; }
.cu-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; }
.cu-review-head strong { color: var(--cx-text); }
.cu-review p { margin: 0; color: var(--cx-text-soft); white-space: pre-line; overflow-wrap: anywhere; }
.cu-mine { border: 1px solid var(--cx-pink); border-radius: 8px; padding: 14px; }

/* heart button */
.cu-heart { display: inline-flex; align-items: center; gap: 8px; background: var(--cx-card); border: 1px solid var(--cx-line); color: var(--cx-text); border-radius: 30px; padding: 8px 18px; cursor: pointer; transition: border-color .2s, background .2s; text-decoration: none; }
.cu-heart i { color: var(--cx-pink); font-size: 18px; }
.cu-heart:hover { border-color: var(--cx-pink); color: var(--cx-text); }
.cu-heart.is-on { background: #fff0f7; border-color: var(--cx-pink); }

/* movie cards (favorites, more like this): same look as the home page cards */
.cu-card { background: var(--cx-card); border-radius: 10px; overflow: hidden; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--cx-line); box-shadow: var(--cx-shadow); transition: transform .2s, box-shadow .2s; }
.cu-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(31, 34, 48, .12); }
.cu-card .cu-poster { display: block; aspect-ratio: 2 / 3; background: #e9ebf1; }
.cu-card .cu-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-card .cu-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cu-card h3 { font-size: 15px; margin: 0; font-family: 'Ubuntu', sans-serif; text-transform: uppercase; line-height: 1.3; }
.cu-card h3 a { color: var(--cx-text); }
.cu-card .cu-card-actions { margin-top: auto; display: flex; gap: 6px; }
.cu-card .cu-card-actions > * { flex: 1; }
.cu-card .cu-card-actions .cx-btn { width: 100%; padding: 8px 6px; font-size: 13px; }

/* forms */
.cu-form label { display: block; font-size: 12px; color: var(--cx-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.cu-form .cu-field { margin-bottom: 14px; }
.cu-form textarea.cx-input { min-height: 120px; resize: vertical; }
.cu-form .cx-input[readonly] { opacity: .6; cursor: not-allowed; }
.cu-form input[type=file].cx-input { padding: 7px 10px; }
.cu-help { font-size: 12px; color: var(--cx-muted); margin-top: 4px; }

/* profile */
.cu-profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cu-profile-head h2 { margin: 0 0 4px; }
.cu-stat { background: var(--cx-bg); border: 1px solid var(--cx-line); border-radius: 8px; padding: 12px 14px; text-align: center; height: 100%; }
.cu-stat strong { display: block; font-size: 22px; color: var(--cx-text); }
.cu-stat span { font-size: 12px; color: var(--cx-muted); text-transform: uppercase; letter-spacing: 1px; }

/* contact info list */
.cu-info { list-style: none; padding: 0; margin: 0; }
.cu-info li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cx-line); color: var(--cx-text-soft); }
.cu-info li:last-child { border-bottom: 0; }
.cu-info i { color: var(--cx-pink); width: 20px; text-align: center; margin-top: 4px; }
.cu-info a { color: var(--cx-text); }

.cu-empty { text-align: center; padding: 40px 20px; }
.cu-empty i { font-size: 48px; color: var(--cx-pink); margin-bottom: 14px; }

@media (max-width: 575px) {
  .cu-rating-big .cu-score { font-size: 28px; }
  .cu-star-input label { font-size: 26px; }
}

/* about / faq / pricing */
.cu-lead { color: var(--cx-text-soft); font-size: 16px; line-height: 1.7; }
.cu-section-title { color: var(--cx-text); font-family: 'Ubuntu', sans-serif; font-size: 22px; margin: 10px 0 14px; }
.cu-section-title i { color: var(--cx-pink); margin-right: 6px; }
.cu-feature i { font-size: 26px; color: var(--cx-pink); margin-bottom: 10px; }
.cu-feature h4 { color: var(--cx-text); font-size: 17px; margin: 0 0 6px; font-family: 'Ubuntu', sans-serif; }
.cu-feature p { color: var(--cx-muted); font-size: 14px; margin: 0; line-height: 1.6; }
.cu-tech { display: flex; gap: 14px; align-items: flex-start; }
.cu-tech i { font-size: 28px; color: var(--cx-pink); width: 34px; text-align: center; }
.cu-tech strong { display: block; color: var(--cx-text); }
.cu-tech span { color: var(--cx-muted); font-size: 13px; }
.cu-team { display: flex; gap: 16px; align-items: flex-start; }
.cu-team h4 { color: var(--cx-text); margin: 0; font-family: 'Ubuntu', sans-serif; }
.cu-team .cu-role { color: var(--cx-pink); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cu-team p { color: var(--cx-muted); font-size: 14px; margin: 0; line-height: 1.6; }

.cu-faq details { padding: 0; margin-bottom: 12px; }
.cu-faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 20px; color: var(--cx-text); font-weight: 600; font-size: 16px; position: relative; }
.cu-faq summary::-webkit-details-marker { display: none; }
.cu-faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--cx-pink); }
.cu-faq details[open] summary::after { content: '\2212'; }
.cu-faq details[open] summary { border-bottom: 1px solid var(--cx-line); }
.cu-faq details p { margin: 0; padding: 14px 20px 18px; color: var(--cx-text-soft); line-height: 1.7; }
.cu-faq details a, .cu-price-table a { color: var(--cx-pink); }

.cu-price-table td:not(:first-child), .cu-price-table th:not(:first-child) { white-space: nowrap; }

@media (max-width: 575px) {
  .cu-team { flex-direction: column; }
  .cu-faq summary { font-size: 15px; padding: 14px 42px 14px 16px; }
  .cu-price-table th, .cu-price-table td { font-size: 13px; padding: 8px 6px; }
}