/* KRAZYFI SHARED DESIGN NORMALIZATION V1
   Load after all legacy and Mobile Foundation V1 styles.
   Purpose: consistent spacing, cards, controls, forms, tables, modals and responsive shells. */
:root{
  --kdn-content:1180px;
  --kdn-content-wide:1380px;
  --kdn-gutter:clamp(14px,3vw,28px);
  --kdn-space-1:6px;--kdn-space-2:10px;--kdn-space-3:14px;--kdn-space-4:18px;
  --kdn-space-5:24px;--kdn-space-6:32px;--kdn-space-7:44px;
  --kdn-radius-sm:10px;--kdn-radius:16px;--kdn-radius-lg:22px;
  --kdn-line:rgba(255,255,255,.10);
  --kdn-line-strong:rgba(255,255,255,.18);
  --kdn-surface:rgba(255,255,255,.045);
  --kdn-surface-2:rgba(255,255,255,.075);
  --kdn-shadow:0 16px 45px rgba(0,0,0,.22);
  --kdn-focus:0 0 0 3px rgba(246,201,69,.28);
}

html,body{min-width:0}
body{line-height:1.55;text-rendering:optimizeLegibility}
body.kdn-ready{overflow-x:hidden}

/* Shared content shells */
.wrap,.container,.page,.page-content,.main-content,.content,.dashboard-wrap,
.kdn-container{width:min(100%,var(--kdn-content));margin-inline:auto;min-width:0}
.container-fluid,.kdn-container-wide{width:min(100%,var(--kdn-content-wide));margin-inline:auto;min-width:0}
main{min-width:0}
section{min-width:0}

/* Vertical rhythm */
main>section,main>.card,main>.panel,.page>section,.page>.card,.content>section,.content>.card{margin-bottom:var(--kdn-space-5)}
.card>h1:first-child,.card>h2:first-child,.card>h3:first-child,
.panel>h1:first-child,.panel>h2:first-child,.panel>h3:first-child{margin-top:0}
.card>*:last-child,.panel>*:last-child,.box>*:last-child{margin-bottom:0}

/* Cards and panels */
.card,.panel,.box,.widget,.dashboard-card,.stat-card,.admin-card,
.kdn-card{min-width:0;border:1px solid var(--kdn-line);border-radius:var(--kdn-radius);background:var(--kdn-surface);box-shadow:none}
.card,.panel,.box,.widget,.admin-card,.kdn-card{padding:clamp(14px,2.2vw,22px)}
.card:hover,.dashboard-card:hover,.stat-card:hover{border-color:var(--kdn-line-strong)}
.card img,.panel img,.box img{max-width:100%}

/* Responsive grid primitives and common legacy grids */
.grid,.cards-grid,.artist-grid,.event-grid,.service-grid,.music-grid,.playlist-grid,
.grid2,.grid3,.grid4,.dashboard-grid,.stats-grid,.kdn-grid{
  min-width:0;align-items:stretch;gap:clamp(12px,2vw,20px)
}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*,.cards-grid>*,.artist-grid>*,.event-grid>*,.service-grid>*,.music-grid>*,
.grid2>*,.grid3>*,.grid4>*,.dashboard-grid>*{min-width:0}

/* Typography */
h1,h2,h3,h4{line-height:1.16;text-wrap:balance}
h1{font-size:clamp(1.8rem,4vw,3rem)}
h2{font-size:clamp(1.35rem,3vw,2.1rem)}
h3{font-size:clamp(1.08rem,2vw,1.4rem)}
p,li,dd,td,th,label{overflow-wrap:anywhere}
.muted,.text-muted,small{line-height:1.45}

/* Buttons and action groups */
.btn,button,input[type="submit"],input[type="button"],input[type="reset"],
.kdn-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:10px 16px;border-radius:12px;line-height:1.15;text-align:center;text-decoration:none;white-space:normal;cursor:pointer}
.btn.small,.btn-sm{min-height:36px;padding:7px 11px;border-radius:10px}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--kdn-focus)}
.actions,.button-row,.form-actions,.toolbar,.page-actions,.kdn-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.actions>* ,.button-row>* ,.form-actions>* ,.toolbar>* ,.page-actions>*{min-width:0}

/* Forms */
form{min-width:0}
.form-grid,.form-row,.filter-grid,.filters,.checkout-grid,.settings-grid{gap:14px;min-width:0}
.form-group,.field,.input-group{min-width:0}
label{display:block;margin-bottom:6px;font-weight:700}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{
  width:100%;max-width:100%;min-width:0;min-height:44px;padding:10px 12px;border-radius:11px
}
textarea{min-height:120px;resize:vertical}
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;flex:0 0 auto}
.checkbox-row,.radio-row{display:flex;align-items:flex-start;gap:9px}
.help,.form-help,.field-help{display:block;margin-top:6px;font-size:.875rem;line-height:1.4}

/* Tables */
.table-responsive,.kdn-table-scroll{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--kdn-radius);border:1px solid var(--kdn-line)}
.table-responsive>table,.kdn-table-scroll>table{margin:0;border:0;border-radius:0}
table{width:100%;max-width:100%;border-collapse:collapse}
th,td{padding:11px 13px;vertical-align:top;text-align:left}
th{font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
tbody tr+tr{border-top:1px solid var(--kdn-line)}

/* Tabs and chips */
.tabs,.nav-tabs,.category-nav,.kepk-site-nav,.filter-tabs{gap:8px;padding-bottom:4px}
.tabs a,.nav-tabs a,.category-nav a,.filter-tabs a{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border-radius:999px;white-space:nowrap}
.badge,.chip,.kepk-chip{max-width:100%;overflow-wrap:anywhere}

/* Media and covers */
img{object-fit:cover}
iframe{width:100%}
.video-wrap,.embed-wrap,.responsive-video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--kdn-radius)}
.video-wrap iframe,.embed-wrap iframe,.responsive-video iframe{position:absolute;inset:0;width:100%;height:100%}

/* Modals and notices */
.modal,.popup,.dialog-overlay{overscroll-behavior:contain}
.modal-content,.popup-content,[role="dialog"]{max-width:min(720px,calc(100vw - 24px));border-radius:var(--kdn-radius-lg)}
.alert,.notice,.message,.flash{max-width:100%;padding:12px 14px;border-radius:12px;overflow-wrap:anywhere}

/* Navigation / footer containment */
.top,.kf-main-nav,.ku-footer{min-width:0;max-width:100%}
.kf-main-nav a{max-width:100%}

/* Mobile layout normalization */
@media (max-width:980px){
  :root{--kdn-gutter:16px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-column,.three-column,.profile-layout,.service-detail,.event-detail,.song-layout,.checkout-layout{grid-template-columns:minmax(0,1fr)!important}
  .sidebar,.aside,.right-column,.left-column{min-width:0;max-width:100%}
}

@media (max-width:700px){
  :root{--kdn-gutter:12px;--kdn-radius:14px;--kdn-radius-lg:18px}
  .wrap,.container,.container-fluid,.page,.page-content,.main-content,.content,.dashboard-wrap{padding-left:var(--kdn-gutter)!important;padding-right:var(--kdn-gutter)!important}
  .grid2,.grid3,.grid4,.grid,.cards-grid,.artist-grid,.event-grid,.service-grid,.music-grid,.playlist-grid,.dashboard-grid,.stats-grid{grid-template-columns:minmax(0,1fr)!important}
  .card,.panel,.box,.widget,.admin-card,.kdn-card{padding:14px}
  .actions,.button-row,.form-actions,.page-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .actions>.btn,.button-row>.btn,.form-actions>.btn,.page-actions>.btn,
  .actions>button,.button-row>button,.form-actions>button,.page-actions>button{width:100%}
  .toolbar{align-items:stretch}
  .toolbar>*{flex:1 1 100%}
  .toolbar .btn,.toolbar button{width:100%}
  .form-grid,.form-row,.filter-grid,.filters,.checkout-grid,.settings-grid{grid-template-columns:minmax(0,1fr)!important}
  .modal-content,.popup-content,[role="dialog"]{width:100%!important;max-width:100%!important}
  th,td{padding:10px 11px}
}

@media (max-width:420px){
  .btn,button,input[type="submit"],input[type="button"],input[type="reset"]{width:100%}
  .card,.panel,.box{border-radius:13px}
}


/* KRAZYFI PLAYER PROTECTION PATCH
   Keep global mobile buttons full-width, but never stretch persistent-player controls. */
@media (max-width:420px){
  #kfPersistentPlayer .kf-btn,
  #kfPersistentPlayer button{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 auto!important;
  }

  #kfPersistentPlayer .kf-controls{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    min-width:0!important;
  }

  #kfPersistentPlayer .kf-actions{
    display:flex!important;
    width:auto!important;
    min-width:0!important;
  }

  #kfPersistentPlayer #kfOffline{
    width:auto!important;
  }
}