/* Tessitura Custom CSS - FilmLinc Design System */

/* Import font definitions */
@font-face {
  font-display: block;
  font-family: 'Trade Gothic Extended';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/trade-gothic-extended.woff2') format('woff2');
}

@font-face {
  font-display: block;
  font-family: 'Trade Gothic Extended';
  font-style: bold;
  font-weight: 700;
  src: url('/fonts/trade-gothic-extended-bold.woff2') format('woff2');
}

/* CSS Variables from FilmLinc design system */
:root {
  /* Primary Palette */
  --color-black-rgb: 0, 0, 0;
  --color-black-hex: #000000;
  --color-white-rgb: 255, 255, 255;
  --color-white-hex: #ffffff;

  /* Secondary Palette */
  --color-flg-purple-rgb: 122, 72, 255;
  --color-flg-purple-hex: #7a48ff;
  --color-membership-lavender-rgb: 218, 223, 247;
  --color-membership-lavender-hex: #dadff7;
  --color-yellow-rgb: 255, 237, 147;
  --color-yellow-hex: #ffed93;
  --color-mint-rgb: 218, 247, 221;
  --color-mint-hex: #daf7dd;
  --color-light-grey-rgb: 221, 221, 221;
  --color-light-grey-hex: #dddddd;
  --color-pale-tangerine-rgb: 249, 207, 159;
  --color-pale-tangerine-hex: #f9cf9f;

  /* Utility + Tints */
  --color-error-red-rgb: 255, 0, 0;
  --color-error-red-hex: #ff0000;
  --color-black-60-rgb: 102, 102, 102;
  --color-black-60-hex: #666666;
  --color-black-30-rgb: 179, 179, 179;
  --color-black-30-hex: #b3b3b3;
  --color-silver-rgb: 238, 238, 238;
  --color-silver-hex: #eeeeee;

  /* Theme colors for light mode */
  --background: var(--color-white-rgb);
  --foreground: var(--color-black-rgb);
  --border: var(--color-black-rgb);
  --border-light: var(--color-black-30-rgb);

  /* Typography */
  --font-family-base: elza, Arial, Helvetica, sans-serif;
  --font-family-display: 'Trade Gothic Extended', Arial, Helvetica, sans-serif;

  /* Font sizes */
  --font-size-xs: 8px;
  --font-size-sm: 10px;
  --font-size-base: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* Subhead typography */
  --subhead-font-size: var(--font-size-xl);
  --subhead-font-weight: 700;
  --subhead-line-height: 1.3;
  --subhead-margin-bottom: var(--spacing-lg);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;

  /* Spacing values from FilmLinc global.css */
  --default-gap-y: 20px;
  --default-gap-x: 20px;
  --default-section-padding: 40px;
  --default-section-padding-less: 20px;
  --default-section-padding-more: 40px;

  /* Borders */
  --border-width: 1px;
  --border-radius: 0;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* Tessitura variable overrides */
  --tn-text-color: #333;
  --tn-link-color: var(--color-flg-purple-hex);
  --tn-link-color-hover: #5a35cc; /* Purple darkened 25% */
  --tn-brand-primary: var(--color-flg-purple-hex);
  --tn-brand-primary-darken-5: #6e42e5; /* Purple darkened 5% */
  --tn-brand-primary-darken-10: #633bcc; /* Purple darkened 10% */
  --tn-brand-primary-darken-15: #5834b3; /* Purple darkened 15% */
  --tn-brand-primary-darken-17: #5531a8; /* Purple darkened 17% */
  --tn-brand-primary-darken-30: #3d257f; /* Purple darkened 30% */
  --tn-brand-primary-lighten-40: #c9b3ff; /* Purple lightened 40% */
}

/* Base font and wrapper styles */
body {
  font-family: var(--font-family-base);
}

/* Tessitura wrapper for style precedence */
body.tessitura-wrapper .tessitura-content-holder {
  font-family: var(--font-family-base);
}

body.tessitura-wrapper .tessitura-content-holder hr {
  margin-top: 20px !important;
}
body.tessitura-wrapper .tn-header-component {
  margin-bottom: 2em;
}

/* Ensure our styles have precedence */
body.tessitura-wrapper .tessitura-content-holder a {
  color: var(--tn-link-color);
}

body.tessitura-wrapper .tessitura-content-holder a:hover {
  color: var(--tn-link-color-hover);
}

/* ----------------------------------------------------------------------------- */
/* TN-Express Specific values
----------------------------------------------------------------------------- */

/* SYOS Required Styles */
#syosSwfContainer {
  width: 98%;
  height: 650px;
  min-width: 650px;
}

object {
  outline: none; /* disable swf outline in firefox */
}

/* color classes */
/****************************/
.c1 {
  color: var(--color-flg-purple-hex);
}
.c2 {
  color: var(--color-black-60-hex);
}
.c3 {
  color: var(--color-black-60-hex);
}
.c4 {
  color: var(--color-silver-hex);
}
.w {
  color: var(--color-white-hex);
}
.b {
  color: var(--color-black-hex);
}

.bgC1 {
  background-color: var(--color-flg-purple-hex);
}
.bgC2 {
  background-color: var(--color-black-60-hex);
}
.bgC3 {
  background-color: var(--color-black-60-hex);
}
.bgC4 {
  background-color: var(--color-silver-hex);
}
.bgW {
  background-color: var(--color-white-hex);
}
.bgB {
  background-color: var(--color-black-hex);
}

/* font classes */
/****************************/
.smaller {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: normal;
}
.small {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: normal;
}
.medium {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}
.large {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: normal;
}
.larger {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: 700;
}
.huge {
  font-family: var(--font-family-base);
  font-size: var(--font-size-2xl);
  font-weight: normal;
}

/* border classes */
/****************************/
.bLeft {
  border-left: var(--border-width) solid var(--color-silver-hex);
}
.bRight {
  border-right: var(--border-width) solid var(--color-silver-hex);
}
.bTop {
  border-top: var(--border-width) solid var(--color-silver-hex);
}
.bBottom {
  border-bottom: var(--border-width) solid var(--color-silver-hex);
}
.bAll {
  border: var(--border-width) solid var(--color-silver-hex);
}

/* login page styles */

.tn-account-login-page {
}

/* login page tab styles */
.tab {
  border-left: var(--border-width) solid var(--color-silver-hex);
  border-right: var(--border-width) solid var(--color-silver-hex);
  border-top: var(--border-width) solid var(--color-silver-hex);
  background: #efefef;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  border-left: var(--border-width) solid var(--color-silver-hex);
  border-right: var(--border-width) solid var(--color-silver-hex);
  border-top: var(--border-width) solid var(--color-silver-hex);
  background: var(--color-white-hex);
}

.tabLink {
  color: var(--color-flg-purple-hex);
}
.tabLink:hover {
  color: var(--color-black-60-hex);
}

/* calendar styles -- needs cleanup */
/* text calendar styles */
.calendarDay,
.calendarDate {
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  float: left;
  text-align: center;
  width: 30px;
}
.calendarDate {
  font-size: var(--font-size-xl);
}

/* calendar div positioning */
#calendarContain,
#calendarNav {
  position: relative;
  display: block;
  float: none;
  padding: 7px;
}
#calendarContain {
  overflow: auto;
  min-height: 300px;
}
#boxContain,
#textContain {
  position: absolute;
  left: 0px;
  top: 0px;
  visibility: visible;
  height: inherit;
}
#disp {
  left: 0px;
  top: 0px;
}
#disp_perfs,
#disp_calendar {
  display: block;
  float: left;
}
#display_perfs {
  padding-left: 10px;
  width: 30%;
  float: left;
  overflow: visible;
  height: inherit;
}
#display_calendar {
  width: 65%;
  overflow: visible;
  float: left;
  padding: 3px;
}

/* perf day on, off */
.perfDayOn {
  border: var(--border-width) solid var(--color-silver-hex);
  background-color: var(--color-black-60-hex);
  color: var(--color-white-hex);
  font-size: var(--font-size-base);
  line-height: 14px;
  cursor: pointer;
}

.perfDayOff {
  border: var(--border-width) solid var(--color-silver-hex);
  background-color: var(--color-flg-purple-hex);
  color: var(--color-silver-hex);
  font-size: var(--font-size-base);
  line-height: 14px;
}

/* error style */
/****************************/
.errorLabel {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-flg-purple-hex);
  background-color: var(--color-silver-hex);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.errDiv {
  border-top: var(--border-width) solid var(--color-flg-purple-hex);
  border-bottom: var(--border-width) solid var(--color-flg-purple-hex);
  padding: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-flg-purple-hex);
  margin-bottom: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

/* button style */
/****************************/
.btnStyle {
  background-color: var(--color-black-hex);
  border: var(--border-width) solid var(--color-black-hex);
  color: var(--color-white-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: bold;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btnStyle:hover {
  background-color: var(--color-flg-purple-hex);
  border-color: var(--color-flg-purple-hex);
  color: var(--color-white-hex);
}

.btnStyleInactive {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: normal;
  color: var(--color-black-60-hex);
  background-color: var(--color-light-grey-hex);
  border: var(--border-width) solid var(--color-black-60-hex);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: not-allowed;
}

/* text, drop down field style */
/****************************/
.txtBox {
  border: var(--border-width) solid var(--color-black-60-hex);
  color: var(--color-black-hex);
  background-color: var(--color-white-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  padding: var(--spacing-sm) var(--spacing-base);
  transition: border-color var(--transition-fast);
}

.txtBox:focus {
  outline: none;
  border-color: var(--color-flg-purple-hex);
}

.txtBoxDisabled {
  color: var(--color-black-60-hex);
  background-color: var(--color-light-grey-hex);
  border: none;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  padding: var(--spacing-sm) var(--spacing-base);
}

/* more info link style */
/****************************/
.moreInfo {
  color: var(--color-black-60-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  text-decoration: underline;
}

.moreInfo:hover {
  color: var(--color-black-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

/* small purchaselink style */
/****************************/
.purchaseSmall {
  color: var(--color-flg-purple-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.purchaseSmall:hover {
  color: var(--color-black-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  text-decoration: underline;
}

/* large purchaselink styles */
/****************************/
.purchaseLarge {
  color: var(--color-flg-purple-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.purchaseLarge:hover {
  color: var(--color-black-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: underline;
}

/* change event styles */
/****************************/
.changeEvent {
  color: var(--color-black-60-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.changeEvent:hover {
  color: var(--color-black-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: underline;
}

/* jQuery Dialog Window */
/****************************/
.ui-dialog {
  position: relative;
  padding: 0.2em;
  width: 400px;
  background-color: var(--color-white-hex);
  border: var(--border-width) solid var(--color-flg-purple-hex);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-flg-purple-hex);
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.5em 0.3em 0.3em 1em;
  position: relative;
  background-color: var(--color-black-60-hex);
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0 0.2em;
  color: var(--color-white-hex);
  font-weight: bold;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 15px;
  margin: -10px 0 10px 0;
  padding: 1px;
  height: 15px;
  cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-close span {
  display: block;
  margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
  padding: 0;
}

.ui-dialog .ui-dialog-content {
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
  zoom: 1;
  color: var(--color-black-hex);
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: var(--border-width) 0 0 0;
  background-image: none;
  margin: 0.5em 0 0 0;
  padding: 0.3em 1em 0.5em 0.4em;
  border-top: var(--border-width) solid var(--color-silver-hex);
}

.ui-dialog .ui-dialog-buttonpane button {
  float: right;
  cursor: pointer;
  width: auto;
  overflow: visible;
  color: var(--color-white-hex);
  font-size: var(--font-size-base);
  font-weight: bold;
  background: var(--color-black-hex);
  border: var(--border-width) solid var(--color-black-hex);
  padding: var(--spacing-xs) var(--spacing-base);
  margin-left: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.ui-dialog .ui-dialog-buttonpane button:hover {
  background: var(--color-flg-purple-hex);
  border-color: var(--color-flg-purple-hex);
  color: var(--color-white-hex);
}

.ui-dialog .ui-resizable-se {
  width: 14px;
  height: 14px;
  right: 3px;
  bottom: 3px;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

#prodText,
#pText {
  text-align: left;
}

table,
td {
  padding: 3px;
}

/* Additional Bootstrap overrides for consistency */
.btn-primary {
  background-color: var(--color-black-hex);
  border-color: var(--color-black-hex);
  color: var(--color-white-hex);
  font-family: var(--font-family-base);
  transition: all var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--color-flg-purple-hex);
  border-color: var(--color-flg-purple-hex);
  color: var(--color-white-hex);
}

.form-control {
  font-family: var(--font-family-base);
  border-color: var(--color-black-60-hex);
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-flg-purple-hex);
  box-shadow: 0 0 0 0.2rem rgba(122, 72, 255, 0.25);
}

/* Links default styling */
a {
  color: var(--color-flg-purple-hex);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-black-hex);
}

/* Container and layout adjustments */
.tessitura-content-holder {
  min-height: auto !important;
}

/* Ensure utility nav has no margins */
.tn-utility-nav {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Footer typography alignment with FilmLinc design */
body.tessitura-wrapper footer,
body.tessitura-wrapper section {
  font-family: var(--font-family-base);
}

/* Ensure footer text sizes match FilmLinc standards */
body.tessitura-wrapper .text-sm {
  font-size: var(--font-size-md);
  line-height: 1.5;
}

body.tessitura-wrapper .text-\\[14px\\] {
  font-size: var(--font-size-md);
}

body.tessitura-wrapper .text-\\[20px\\] {
  font-size: var(--font-size-xl);
  font-family: var(--font-family-display);
}

/* Create page heading styles */
.tn-create-heading {
  font-size: var(--subhead-font-size);
  font-weight: var(--subhead-font-weight);
  line-height: var(--subhead-line-height);
  margin-bottom: var(--spacing-md); /* 15px */
}

.tn-create-sub-heading {
  margin-bottom: var(--spacing-md); /* 15px */
}

/* Mobile-only styles */
@media (max-width: 768px) {
  .tn-create-heading {
    margin-top: var(--spacing-lg); /* 20px */
  }
}

/* Order address information component styles */
.tn-order-address-information-component {
  margin-top: var(--default-section-padding); /* 40px */
  margin-bottom: var(--spacing-xl);
}

.tn-order-address-information-component .row {
  margin-bottom: var(--spacing-lg);
}

.tn-order-address-information-component h2 {
  font-family: var(--font-family-base);
  font-size: var(--subhead-font-size);
  font-weight: var(--subhead-font-weight);
  line-height: var(--subhead-line-height);
  margin-bottom: var(--subhead-margin-bottom);
  margin-top: 0;
  color: var(--color-black-hex);
}

.tn-patron-billing-information,
.tn-patron-shipping-information {
  margin-bottom: var(--spacing-lg);
}

.tn-patron-billing-information > div:first-of-type,
.tn-patron-shipping-information > div:first-of-type {
  margin-bottom: var(--spacing-md);
}

.tn-order-address-information-component .tn-line1,
.tn-order-address-information-component .tn-line2,
.tn-order-address-information-component .tn-line3,
.tn-order-address-information-component .tn-line4,
.tn-order-address-information-component .tn-line5,
.tn-order-address-information-component .tn-electronic-address,
.tn-order-address-information-component .tn-phone,
.tn-order-address-information-component .tn-selected-shipping-method {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: 1.4;
  margin-bottom: var(--spacing-xs);
  color: var(--color-black-hex);
}

.tn-order-address-information-component .tn-electronic-address {
  margin-bottom: var(--spacing-sm);
}

.tn-edit-billing-link,
.tn-edit-delivery-link {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  color: var(--color-flg-purple-hex);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.tn-edit-billing-link:hover,
.tn-edit-delivery-link:hover {
  color: var(--color-black-hex);
  text-decoration: underline;
}

/* Calendar event button styles */
.tn-events-calendar__event.btn.btn-primary {
  background-color: var(--color-white-hex);
  border-color: var(--color-black-hex);
  color: var(--color-black-hex);
  font-family: var(--font-family-base);
  transition: all var(--transition-fast);
}

.tn-events-calendar__event.btn.btn-primary:hover,
.tn-events-calendar__event.btn.btn-primary:focus {
  background-color: var(--color-white-hex);
  border-color: var(--color-black-hex);
  color: var(--color-flg-purple-hex);
}

/* Payment submit component heading styles */
.tn-payment-submit-component__heading {
  font-family: var(--font-family-base);
  font-size: var(--subhead-font-size);
  font-weight: var(--subhead-font-weight);
  line-height: var(--subhead-line-height);
  margin-bottom: var(--subhead-margin-bottom);
  margin-top: 0;
  color: var(--color-black-hex);
}