/* Kraken Design System CSS */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Outfit:wght@400;600;700&display=swap');

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}
:root {
    /* Primary */
    --kraken-purple: #1ed760; /* Spotify Green */
    --kraken-purple-dark: #1db954; /* Darker Spotify Green */
    --kraken-purple-deep: #1ed760;
    --kraken-purple-subtle: #eeeeee; /* Light gray for icon backgrounds and inputs */
    --kraken-black: #000000; /* Primary text */

    /* Neutral */
    --kraken-gray: #535353; /* Muted text */
    --kraken-silver: #7c7c7c; /* Light border / muted */
    --kraken-white: #ffffff; /* Light Surface (Cards) */
    --kraken-border: #d9d9d9; /* Border gray */
    --kraken-bg: #f6f6f6; /* Soft background */

    /* Semantic */
    --kraken-green-subtle: #e6f6ec;
    --kraken-green-dark: #1db954;
    --kraken-red-subtle: #fee2e2;
    --kraken-red-dark: #ef4444; /* Negative Red */

    /* Depth */
    --shadow-card: rgba(0,0,0,0.3) 0px 8px 8px;
    --shadow-dialog: rgba(0,0,0,0.5) 0px 8px 24px;
    --shadow-micro: rgb(255,255,255) 0px 1px 0px, rgb(200,200,200) 0px 0px 0px 1px inset;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--kraken-black);
    background-color: var(--kraken-bg);
    background-image: linear-gradient(rgba(246, 246, 246, 0.95), rgba(246, 246, 246, 0.98)), url('../../bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    line-height: 1.38;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--kraken-black);
    margin-top: 0;
}

h1 { font-size: 24px; font-weight: 700; line-height: 1.17; letter-spacing: -1px; }
h2 { font-size: 20px; font-weight: 700; line-height: 1.22; letter-spacing: -0.5px; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.29; letter-spacing: -0.5px; }

a {
    color: var(--kraken-purple);
    text-decoration: none;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 500px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    align-self: center;
    flex-shrink: 0;
}
.btn:hover {
    transform: scale(1.04);
}

.btn-primary {
    background-color: var(--kraken-purple);
    color: #000000;
    padding: 0 43px !important;
}
.btn-primary:hover {
    background-color: #1ed760;
    filter: brightness(1.1);
}

.btn-outlined {
    background-color: var(--kraken-white);
    color: var(--kraken-purple-dark);
    border: 1px solid var(--kraken-purple-dark);
}
.btn-outlined:hover {
    background-color: var(--kraken-purple-subtle);
}

.btn-subtle {
    background-color: var(--kraken-purple-subtle);
    color: var(--kraken-purple);
    padding: 8px 16px;
}
.btn-subtle:hover {
    background-color: rgba(133,91,251,0.25);
}

.btn-white {
    background-color: var(--kraken-purple-subtle);
    color: var(--kraken-black);
    border-radius: 500px;
    box-shadow: var(--shadow-card);
}
.btn-white:hover {
    box-shadow: var(--shadow-micro);
}

.btn-gray {
    background-color: rgba(148,151,169,0.08);
    color: var(--kraken-black);
}
.btn-gray:hover {
    background-color: rgba(148,151,169,0.15);
}

.btn-success { background: var(--kraken-green-dark); color: #000000; }
.btn-success:hover { filter: brightness(1.1); }

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--kraken-gray); }
.text-silver { color: var(--kraken-silver); }
.text-small { font-size: 12px; }
.text-micro { font-size: 11px; }
.font-bold { font-weight: 600; }
.font-normal { font-weight: 400; }

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.align-center, .align-items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 20px !important; }
.mt-5 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 20px !important; }
.mb-5 { margin-bottom: 24px !important; }
.ml-2 { margin-left: 12px; }
.m-0 { margin: 0; }

.w-100 { width: 100%; }

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

.icon-sm { font-size: 14px; }
.icon-md { font-size: 16px; }
.icon-lg { font-size: 16px; }
.icon-success { color: var(--kraken-green-dark); }
.icon-purple { color: var(--kraken-purple-dark); }



/* Form Layouts & Sections */
[class$="-form-row"], .form-row {
    display: flex;
    gap: 16px;
}
[class$="-form-row"] > *, .form-row > * {
    flex: 1;
}

[class$="-form-section-title"], .form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 16px;
    color: var(--kraken-black);
    border-bottom: 1px solid var(--kraken-border);
    padding-bottom: 8px;
}

/* Header Area (in case it was missed by prefixing) */
.header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.header-area h2 {
    margin: 0;
    font-size: 24px;
}
.header-area-bordered {
    border-bottom: 1px solid var(--kraken-border);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

/* Custom Select Dropdowns */
select.akt-form-control,
select.phk-form-control,
select.lgn-form-control,
select.dsb-form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23535353%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    padding-right: 48px !important;
    cursor: pointer !important;
}

select.akt-form-control::-ms-expand,
select.phk-form-control::-ms-expand {
    display: none;
}


.mb-5 { margin-bottom: 24px !important; }
.mt-5 { margin-top: 24px !important; }
.mt-4 { margin-top: 20px !important; }
.mb-4 { margin-bottom: 20px !important; }

/* Mobile Layout Optimizations */
@media (max-width: 768px) {
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    
    .mt-4, .mt-5 { margin-top: 16px !important; }
    .mb-4, .mb-5 { margin-bottom: 16px !important; }
    
    .card { padding: 16px !important; }
    
    .container { padding: 0 16px !important; }
    
    /* CTA Button resizing for mobile */
    .btn { 
        height: 36px !important; 
        font-size: 12px !important; 
        letter-spacing: 1px !important; 
        padding: 0 16px !important; 
    }
    .btn-primary { 
        padding: 0 24px !important; 
    }
    .btn-subtle { 
        padding: 6px 12px !important; 
    }
}