/* //////////////////////////////////////////////////////////////////////////

   Account
   |
   ├─ General
   └─ Animations

   ////////////////////////////////////////////////////////////////////////// */

:root {

   /* Global settings
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */ 
   --color-perk-green: rgba(0, 255, 0, .2);
   --color-perk-red: rgba(255, 0, 0, .2);

}

/* //////////////////////////////////////////////////////////////////////////

   Account
   
   ////////////////////////////////////////////////////////////////////////// */

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   General
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.licenses {
   font-family: var(--font-family-monospace);
   font-weight: var(--font-weight-monospace-regular);
   letter-spacing: 2px;
   border-bottom: var(--border-thin);
}

.licenses:empty {
   height: 14px;
   animation: shimmer 1.5s infinite;
   border: none;
   border-radius: var(--radius-full);
   background: linear-gradient(90deg, color-mix(in srgb, var(--ghost-accent-color) 15%, transparent) 25%, color-mix(in srgb, var(--ghost-accent-color) 60%, transparent) 50%, color-mix(in srgb, var(--ghost-accent-color) 15%, transparent) 75%);
   background-size: 200% 100%;
}

/* Card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.license-card {
   line-height: 1;
   align-items: center;
   padding: max(10px, 1vw) 0;
   color: var(--color-font-one);
   border-top: var(--border-thin);
   grid-template-columns: 1fr auto;
}

/* Key */
.license-card .key {
   font-size: 80%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* Discount */
.license-card .discount {
   font-size: 80%;
   align-items: center;
   padding: .3em .6em;
   border-radius: var(--radius);
}

.license-card .discount span {
   line-height: 1;
}

.license-card .discount.used {
   background-color: var(--color-perk-red);
}

.license-card .discount.available {
   background-color: var(--color-perk-green);
}

/* Claim */
.license-card .claim {
   font-family: var(--font-family-one);
   font-size: 80%;
   font-weight: var(--font-weight-one-light);
   align-items: center;
   padding: .3em .6em;
   letter-spacing: 0;
   border: var(--border-thin);
   border-radius: var(--radius);
}

.license-card .claim a {
   line-height: 1;
}

/* Buttons
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.account-meta {
   justify-content: end;
   margin: max(14px, 1.4vw) 0 6vw;
   gap: calc(var(--gap) / 2);
   grid-template-columns: auto auto auto;
}

.account-meta a {
   font-size: var(--font-xxs-small);
   padding: .4em 1em;
   color: var(--color-font-two);
   border: var(--border-thin);
   border-radius: var(--radius-full);
}

.account-meta a:hover {
   color: var(--color-font-one);
}

/* Form
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
form.account input {
   margin-bottom: .5em;
}

form.success,
article:has(form.success) .g-subtitle {
   display: none;
}

/* /////// data /////// */
form.success + [data-form-alert] {
   display: block;
}

form + [data-form-alert] {
   display: none;
}

/* RWD — General
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .account-meta {
      grid-template-columns: 1fr;
   }

   .account-meta a {
      grid-column: 1/-1;
      justify-self: start;
   }

}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Animations
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}