/* ============================================
STYLE PART 4 - Detail, Auth, Animations v2.0
============================================ */

/* Detail Page */

.detail-section {
  padding:40px 0 80px
}

.detail-gallery {
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  height:480px;
  margin-bottom:32px;
  box-shadow:var(--shadow-xl)
}

.gallery-main {
  width:100%;
  height:100%
}

.gallery-main img {
  width:100%;
  height:100%;
  object-fit:cover
}

.gallery-nav {
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 50px;
}

.gallery-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:var(--transition)
}

.gallery-dot.active {
  background:var(--white);
  width:28px;
  border-radius:5px
}

.gallery-dot:hover {
  background: rgba(255,255,255,0.7);
}

.gallery-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:var(--radius-full);
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-lg);
  transition:var(--transition);
  font-size:1.3rem;
  color:var(--text);
  border: 1px solid rgba(255,255,255,0.5);
}

.gallery-arrow:hover {
  background:var(--white);
  transform:translateY(-50%) scale(1.08);
  box-shadow: var(--shadow-xl);
}

.gallery-arrow.prev { left:20px }
.gallery-arrow.next { right:20px }

.detail-content {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:32px
}

.detail-main h1 {
  font-size:2rem;
  margin-bottom:12px
}

.detail-meta {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap
}

.detail-meta .rating {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--star)
}

.detail-meta .rating span {
  color:var(--text-muted);
  font-size:.9rem
}

.detail-meta .category-badge {
  background:var(--primary-50);
  color:var(--primary);
  padding:4px 14px;
  border-radius:50px;
  font-size:.8rem;
  font-weight:600
}

.detail-description {
  color:var(--text-light);
  line-height:1.8;
  margin-bottom:32px;
  font-size:.95rem
}

.detail-facilities {
  margin-bottom:32px
}

.detail-facilities h3 {
  margin-bottom:16px
}

.facilities-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px
}

.facility-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:var(--bg-light);
  border-radius:var(--radius-sm);
  font-size:.88rem;
  color:var(--text-light);
  transition: var(--transition);
  border: 1px solid rgba(0,0,0,0.03);
}

.facility-item:hover {
  background: var(--primary-50);
  border-color: rgba(0,119,182,0.1);
  color: var(--primary);
}

.facility-item .icon {
  color:var(--primary);
  font-size:1.2rem
}

/* Sidebar Info Card */
.detail-sidebar .info-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-md);
  margin-bottom:20px;
  border: 1px solid rgba(0,0,0,0.04);
}

.info-card .price-box {
  background:var(--gradient-primary);
  color:var(--white);
  padding:22px;
  border-radius:var(--radius-md);
  text-align:center;
  margin-bottom:20px;
  position: relative;
  overflow: hidden;
}

.info-card .price-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

.price-box .price-label {
  font-size:.85rem;
  opacity:.8;
  position: relative;
}

.price-box .price-value {
  font-size:2rem;
  font-weight:800;
  position: relative;
}

.info-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--bg-gray)
}

.info-item:last-child {
  border-bottom:none
}

.info-item .info-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
}

.info-item .icon {
  color:var(--primary);
  font-size:1.2rem;
  margin-top:2px
}

.info-item .info-text h5 {
  font-size:.82rem;
  color:var(--text-muted);
  font-weight:500;
  margin-bottom:3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.info-item .info-text p {
  color:var(--text);
  font-weight:600;
  font-size:.95rem
}

.detail-map {
  margin-bottom:32px
}

.detail-map h3 {
  margin-bottom:16px
}

.detail-map-container {
  border-radius:var(--radius-md);
  overflow:hidden;
  height:320px;
  background:linear-gradient(135deg,#e8f4f8,#d1ecf1);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm)
}

/* Comments */

.comments-section {
  margin-top:40px
}

.comments-section h3 {
  margin-bottom:24px
}

.comment-form {
  background:var(--bg-light);
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:32px;
  border: 1px solid rgba(0,0,0,0.04);
}

.comment-form h4 {
  margin-bottom:16px
}

.star-input {
  display:flex;
  gap:4px;
  margin-bottom:16px;
  font-size:1.5rem;
  color:var(--bg-gray);
  cursor:pointer
}

.star-input .star {
  transition:var(--transition-fast)
}

.star-input .star.active,.star-input .star:hover {
  color:var(--star)
}

.comment-form textarea {
  width:100%;
  padding:16px;
  border-radius:var(--radius-sm);
  background:var(--white);
  border:2px solid var(--bg-gray);
  resize:vertical;
  min-height:120px;
  margin-bottom:16px;
  transition:var(--transition)
}

.comment-form textarea:focus {
  border-color:var(--primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.08);
}

.comment-list {
  display:flex;
  flex-direction:column;
  gap:20px
}

.comment-item {
  display:flex;
  gap:16px;
  padding:20px;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.04);
}

.comment-avatar {
  width:48px;
  height:48px;
  border-radius:var(--radius-md);
  background:var(--gradient-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:700;
  flex-shrink:0
}

.comment-content h5 {
  font-size:.95rem;
  margin-bottom:4px
}

.comment-content .comment-date {
  font-size:.8rem;
  color:var(--text-muted);
  margin-bottom:8px
}

.comment-content .comment-stars {
  color:var(--star);
  font-size:.8rem;
  margin-bottom:8px
}

.comment-content p {
  font-size:.9rem;
  line-height:1.6
}

/* Review Section */

#reviewSection {
  margin-top:40px;
  padding:40px 0
}

.review-header {
  margin-bottom:24px
}

.review-header h3 {
  font-size:1.4rem;
  margin-bottom:8px
}

.review-summary {
  font-size:.95rem;
  color:var(--text-muted)
}

.review-stars {
  color:#f59e0b;
  font-size:1.1rem;
  letter-spacing:2px
}

.review-form-box {
  background:var(--bg-light);
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:32px;
  border: 1px solid rgba(0,0,0,0.04);
}

.review-form-box h4 {
  margin-bottom:14px;
  font-size:1rem
}

.star-input {
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:16px
}

.star-btn {
  font-size:1.8rem;
  color:#f59e0b;
  cursor:pointer;
  transition:transform .15s
}

.star-btn:hover {
  transform:scale(1.2)
}

.star-label {
  margin-left:10px;
  font-size:.85rem;
  color:var(--text-muted)
}

#reviewSection textarea {
  width:100%;
  padding:14px;
  border-radius:var(--radius-sm);
  border:2px solid var(--bg-gray);
  resize:vertical;
  min-height:100px;
  margin-bottom:14px;
  font-family:inherit;
  font-size:.9rem;
  transition:border-color .3s
}

#reviewSection textarea:focus {
  border-color:var(--primary);
  outline:none;
  box-shadow: 0 0 0 3px rgba(0,119,182,0.08);
}

.review-login-prompt {
  background:var(--bg-light);
  padding:24px;
  border-radius:var(--radius-lg);
  text-align:center;
  margin-bottom:24px;
  border: 1px solid rgba(0,0,0,0.04);
}

.review-login-prompt a {
  color:var(--primary);
  font-weight:600
}

.no-reviews {
  text-align:center;
  color:var(--text-muted);
  padding:24px;
  font-size:.9rem
}

.review-item {
  display:flex;
  gap:14px;
  padding:20px;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  margin-bottom:14px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
}

.review-item:hover {
  box-shadow: var(--shadow-md);
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #58C2E8, #2080C0);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.review-content {
  flex:1
}

.review-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px
}

.review-meta strong {
  font-size:.9rem
}

.review-date {
  font-size:.75rem;
  color:var(--text-muted)
}

.review-content p {
  font-size:.88rem;
  line-height:1.6;
  margin-top:6px;
  color:var(--text-light)
}

/* ===== AUTH PAGES v2 ===== */

.auth-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #f0f8ff 0%, #e8f4f8 40%, #dbeafe 100%);
  position:relative;
  overflow:hidden;
  padding: 20px;
}

/* Decorative background elements */
.auth-page::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,119,182,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.auth-page::after {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144,224,239,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.auth-wave {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:300px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230077B6' fill-opacity='0.06' d='M0,192L48,176C96,160,192,128,288,122.7C384,117,480,139,576,154.7C672,171,768,181,864,165.3C960,149,1056,107,1152,101.3C1248,96,1344,128,1392,144L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
  background-size:cover
}

.auth-wave-2 {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:250px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2390E0EF' fill-opacity='0.08' d='M0,256L48,240C96,224,192,192,288,181.3C384,171,480,181,576,197.3C672,213,768,235,864,229.3C960,224,1056,192,1152,181.3C1248,171,1344,181,1392,186.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
  background-size:cover
}

.auth-card {
  position:relative;
  z-index:2;
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding:48px 40px;
  border-radius:var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.04);
  width:100%;
  max-width:440px;
  border: 1px solid rgba(255,255,255,0.6);
  /* Entrance animation */
  animation: authCardEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes authCardEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-card .auth-logo {
  text-align:center;
  margin-bottom:32px
}

.auth-card .auth-logo .logo-icon {
  width:56px;
  height:56px;
  background:var(--gradient-primary);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  font-size:1.5rem;
  box-shadow: var(--shadow-primary);
}

.auth-card .auth-logo h2 {
  font-size:1.5rem;
  color:var(--text);
  font-weight: 700;
}

.auth-card .auth-logo p {
  font-size:.9rem;
  color:var(--text-muted);
  margin-top:6px
}

/* Form Group with Icon Support */
.form-group {
  margin-bottom:20px
}

.form-group label {
  display:block;
  font-size:.86rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  letter-spacing: 0.01em;
}

.form-group .input-wrapper {
  position:relative
}

.form-group .input-wrapper .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
  transition: var(--transition);
}

.form-group input:focus ~ .input-icon,
.form-group .input-wrapper:focus-within .input-icon {
  color: var(--primary);
}

.form-group input,.form-group select,.form-group textarea {
  width:100%;
  padding:13px 16px;
  border:2px solid rgba(0,0,0,0.06);
  border-radius:var(--radius-sm);
  font-size:.93rem;
  transition:var(--transition);
  background:rgba(255,255,255,0.7);
  color:var(--text)
}

.form-group .input-wrapper .input-icon ~ input,
.form-group input.has-icon {
  padding-left: 42px;
}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,119,182,.08);
  background: var(--white);
}

/* Password toggle button */
.password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  transition: var(--transition);
  padding: 4px;
}

.password-toggle:hover {
  color: var(--primary);
}

.form-options {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  font-size:.86rem
}

.form-options label {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--text-light)
}

.form-options a {
  color:var(--primary);
  font-weight:500
}

.form-options a:hover {
  text-decoration:underline
}

/* Auth alert styling */
.auth-alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 0.88rem;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 8px;
}

.auth-alert.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.auth-alert.success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.auth-submit {
  width:100%;
  padding:14px;
  font-size:1rem;
  margin-bottom:20px;
  text-align:center;
  justify-content:center;
  border-radius: var(--radius-sm);
}

.auth-footer {
  text-align:center;
  font-size:.9rem;
  color:var(--text-muted)
}

.auth-footer a {
  color:var(--primary);
  font-weight:600
}

.auth-footer a:hover {
  text-decoration:underline
}

/* ===== ANIMATIONS ===== */

.fade-in {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease
}

.fade-in.visible {
  opacity:1;
  transform:translateY(0)
}

.fade-in-left {
  opacity:0;
  transform:translateX(-30px);
  transition:opacity .6s ease,transform .6s ease
}

.fade-in-left.visible {
  opacity:1;
  transform:translateX(0)
}

.fade-in-right {
  opacity:0;
  transform:translateX(30px);
  transition:opacity .6s ease,transform .6s ease
}

.fade-in-right.visible {
  opacity:1;
  transform:translateX(0)
}

/* ===== RESPONSIVE ===== */

@media(max-width:1024px) {
  .detail-content { grid-template-columns:1fr }
}

@media(max-width:768px) {
  .detail-gallery { height:300px; border-radius: var(--radius-lg); }
  .detail-main h1 { font-size:1.5rem }
  .detail-meta { gap:10px }
  .facilities-grid {
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:8px
  }
  .facility-item { padding:10px 12px; font-size:.82rem }
  .detail-sidebar .info-card { padding:18px }
  .info-card .price-box { padding:16px; margin-bottom:14px }
  .price-box .price-label { font-size:.78rem; margin:0 }
  .price-box .price-value { font-size:1.3rem }
  .info-item { padding:10px 0; gap:10px }
  .info-item .info-text h5 { font-size:.78rem }
  .info-item .info-text p { font-size:.88rem }

  .auth-card {
    margin:20px;
    padding:32px 24px;
    border-radius: var(--radius-lg);
  }
  .auth-card .auth-logo h2 { font-size:1.2rem }

  #reviewSection { padding:20px 0 }
  .review-form-box { padding:18px }
  .review-item { padding:16px; gap:10px }
  .review-avatar { width:36px; height:36px; font-size:.7rem }
  .comment-item { flex-direction:column; gap:10px }

  .gallery-arrow { width:38px; height:38px; font-size:1rem; }
  .gallery-arrow.prev { left:12px; }
  .gallery-arrow.next { right:12px; }
}

@media(max-width:480px) {
  .detail-gallery { height:220px }
  .gallery-arrow { width:34px; height:34px; font-size:1rem }
  .detail-main h1 { font-size:1.3rem }
  .detail-description { font-size:.88rem }

  .auth-card {
    padding:28px 20px;
    margin: 12px;
  }
  .auth-card .auth-logo h2 { font-size:1.1rem }
  .auth-card .auth-logo .logo-icon {
    width:48px; height:48px; font-size:1.3rem;
  }
}

/* Dark mode for auth */
html.dark .auth-page {
  background: linear-gradient(135deg, #020617 0%, #040b16 40%, #081a33 100%);
}

html.dark .auth-card {
  background: rgba(8,26,51,0.85);
  border-color: #133052;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea {
  background: rgba(4,11,22,0.6);
  border-color: #133052;
  color: #e6f2ff;
}

html.dark .form-group input:focus,
html.dark .form-group select:focus {
  background: #040b16;
  border-color: var(--primary);
}

html.dark .auth-alert.error {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.2);
  color: #f87171;
}

html.dark .auth-alert.success {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.2);
  color: #4ade80;
}