/* =========================================================
   AS SALIK TRAVEL V3.7
   - Top Selling card rail matching the company activity carousel
   - Top-aligned package imagery across public and panel previews
   - Profile avatar preview and upload clarity
   - Responsive upload controls
   ========================================================= */

:root{
  --v37-wine:#74101e;
  --v37-wine-dark:#4d0711;
  --v37-cream:#fff3dd;
  --v37-cream-2:#fffaf2;
  --v37-gold:#d7a63d;
  --v37-line:#ead8cc;
}

/* Remove V3.6 clipped-card blur completely. */
.package-showcase-section .premium-package-carousel:before,
.package-showcase-section .premium-package-carousel:after{display:none!important;content:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Top Selling rail: clean shell and controls similar to Aktiviti Syarikat. */
.top-selling-carousel-v37{
  --visible:4;
  position:relative;
  overflow:hidden;
  padding:20px 20px 72px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--v37-line);
  box-shadow:0 20px 50px rgba(58,11,20,.09);
}
.top-selling-viewport-v37{overflow:hidden;width:100%}
.top-selling-track-v37{
  display:flex;
  align-items:stretch;
  gap:18px;
  will-change:transform;
  transition:transform .48s cubic-bezier(.22,.72,.2,1);
}
.top-selling-item-v37{
  flex:0 0 calc((100% - (var(--visible) - 1)*18px)/var(--visible));
  min-width:0;
  display:flex;
}
.top-selling-item-v37 .package-card{width:100%;height:100%;display:flex;flex-direction:column;margin:0!important}
.top-selling-item-v37 .package-content{display:flex!important;flex:1;flex-direction:column!important}
.top-selling-item-v37 .package-actions{margin-top:auto!important}
.top-selling-item-v37 .package-content h3{
  font-size:clamp(1.22rem,1.55vw,1.62rem)!important;
  line-height:1.22!important;
  margin:8px 0 9px!important;
}
.top-selling-item-v37 .package-content h3 a{color:var(--v37-wine-dark)!important}
.top-selling-controls-v37{
  position:absolute;
  left:20px;
  right:20px;
  bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.top-selling-buttons-v37{display:flex;gap:12px;align-items:center}
.top-selling-buttons-v37 button{
  min-height:50px;
  padding:0 18px;
  border-radius:15px;
  border:1px solid #d9b565;
  background:var(--v37-cream);
  color:var(--v37-wine-dark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:800 .92rem/1 "Inter",sans-serif;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(94,50,9,.1);
  transition:.2s ease;
}
.top-selling-buttons-v37 button:hover,.top-selling-buttons-v37 button:focus-visible{
  background:#fbe6b7;
  border-color:#cc9f3b;
  transform:translateY(-1px);
}
.top-selling-buttons-v37 button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.top-selling-dots-v37{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.top-selling-dots-v37 button{
  width:11px;height:11px;padding:0;border:0;border-radius:999px;background:#dfd2d5;cursor:pointer;transition:.2s
}
.top-selling-dots-v37 button.active{width:35px;background:var(--v37-gold)}

/* All package-related previews start from the top edge. */
.package-image img,
.hero-card-image img,
.registration-summary-image-v33 img,
.registration-summary-image-v34 img,
.php-gallery-main img,
.php-gallery-thumbs img,
.booking-card-image-v32 img,
.package-gallery-preview-item-v35 img,
.pdo-admin-gallery img,
.panel-promo-slide-v33 img{
  object-fit:cover!important;
  object-position:center top!important;
}
.hero-slide,
.panel-promo-slide-v33,
.booking-detail-head-v32{
  background-position:center top!important;
}
.hero-card-image img{object-position:center top!important}
.registration-summary-image-v33 img{object-position:center top!important}
.php-gallery-main img{width:100%;height:100%;max-height:620px;object-position:center top!important}

/* Profile avatar upload preview. */
.avatar-upload-v37{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center}
.avatar-upload-preview-v37{
  width:112px;height:112px;border-radius:28px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--v37-wine),#b52d43);color:#fff;font-size:2.35rem;font-weight:900;
  border:5px solid #fff;box-shadow:0 14px 34px rgba(94,13,26,.17)
}
.avatar-upload-preview-v37 img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.avatar-upload-fields-v37{min-width:0}
.avatar-upload-fields-v37 input[type=file]{width:100%}
.avatar-upload-note-v37{display:block;margin-top:7px;color:#7e6c70;font-size:.78rem;line-height:1.5}
.upload-limit-note-v37{display:flex;gap:8px;align-items:flex-start;margin-top:8px;color:#806b6f;font-size:.75rem}

/* Native file controls stay usable on mobile. */
input[type=file].form-control,input[type=file].pdo-input{max-width:100%;overflow:hidden}
input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:10px;padding:10px 13px;background:#f5e7d1;color:var(--v37-wine-dark);font-weight:800;cursor:pointer}

@media(max-width:1180px){
  .top-selling-carousel-v37{--visible:3}
}
@media(max-width:900px){
  .top-selling-carousel-v37{--visible:2;padding:16px 16px 70px}
  .top-selling-controls-v37{left:16px;right:16px}
}
@media(max-width:620px){
  .top-selling-carousel-v37{--visible:1;border-radius:22px;padding:12px 12px 68px}
  .top-selling-track-v37{gap:12px}
  .top-selling-item-v37{flex-basis:100%}
  .top-selling-buttons-v37 button{width:46px;min-height:46px;padding:0}
  .top-selling-buttons-v37 button span{display:none}
  .top-selling-dots-v37{gap:6px}
  .top-selling-dots-v37 button{width:9px;height:9px}
  .top-selling-dots-v37 button.active{width:28px}
  .avatar-upload-v37{grid-template-columns:1fr}
  .avatar-upload-preview-v37{width:96px;height:96px}
}