/* =======================================
   Package Blocks Styling (Std & Optional)
=========================================== */

/* Common styles for all blocks */
.product-package-frontend {
    background-color: #000;
    padding: 5px;
    margin-bottom: 5px;
}
.product-package-frontend h3.pla-block-title {
    color: #ca9735 !important;
    margin-top: 24px;
}
.product-package-frontend ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-package-frontend ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 2px 0;
    margin: 0;
}
/* Label text Standard Items */
.product-package-frontend ul li .pla-item-label {
    margin-left: 0mm;
	font-size: 20px;
}
/* label text optional items */
.optional-items ul li label {
	font-size: 20px;
}
/* Individual Items Pricing common styling */
.product-package-frontend p.package-subtotal,
.product-package-frontend p.optional-subtotal,
.product-package-frontend p.pla-subtotal {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ccc !important;
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0mm;
    font-size: 20px !important;
}
.product-package-frontend p.package-subtotal span:first-child,
.product-package-frontend p.optional-subtotal span:first-child,
.product-package-frontend p.pla-subtotal span:first-child {
    text-align: left;
}
.product-package-frontend p.package-subtotal span:last-child,
.product-package-frontend p.optional-subtotal span:last-child,
.product-package-frontend p.pla-subtotal span:last-child {
    text-align: right;
    margin-left: auto;
}

/* =============================
Standard Package Styling
================================ */

/* Price display RHS - Standard Items (Hidden anyhow) */

.product-package-frontend ul li .pla-item-price {
    margin-left: auto;
    text-align: right;
}
/* Standard Items Heading */
body.single-product .product-package-frontend h3.pla-block-title {
    font-size: 25px;
    margin-bottom: 2px;
}
body.single-product .product-package-frontend:not(.optional-items):not(.pfees-items) ul li:first-child {
    padding-top: 5px;
}
body.single-product .product-package-frontend:not(.optional-items):not(.pfees-items) ul li:last-child {
    padding-bottom: 5px;
}

/* ===============================
   Optional Package Styling
================================== */

/* Reset li so it doesn't interfere */
.product-package-frontend.optional-items ul li {
    display: block;
}
/* Make the label the flex container */
.product-package-frontend.optional-items ul li label {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;      /* space between checkbox and text */
}
/* Push the price to the far right */
.product-package-frontend.optional-items ul li label .pla-item-price {
    margin-left: auto;
	font-size: 20px;
    color: #fff;
    text-align: right;
    min-width: 60px;    /* optional but keeps alignment tidy */
}
body.single-product .product-package-frontend.optional-items {
    display: flex;
    flex-direction: column;
    margin-left: 0;
}
body.single-product .product-package-frontend.optional-items h3.pla-block-title {
    font-size: 25px;
    margin-left: 0mm;
    margin-top: 0px;
    margin-bottom: 0px;
}
body.single-product .product-package-frontend.optional-items ul li input.package-item-checkbox {
    margin-right: 6px;
    margin-left: 0mm;
    flex-shrink: 0;
}

/*  Options Package Items CHECKBOX Styling
 --------------------------------------- */

/* Package checkbox – styled same as performance checkbox */
.product-package-frontend.optional-items input.package-item-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 25px;
    height: 25px;
    border: 3px solid #ba9743;      /* gold border */
    border-radius: 4px;
    background: #000;               /* black background */
    cursor: pointer;
    position: relative;
    vertical-align: middle;         /* centers on the line */
    margin-right: 15px;             /* space before text */
}
/* Checked state – gold fill */
.product-package-frontend.optional-items
input.package-item-checkbox:checked {
    background-color: #ba9743;
    border-color: #ba9743;
}
/* White tick */
.product-package-frontend.optional-items
input.package-item-checkbox:checked::after {
    content: "✓";
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    left: 3.5px;
    top: 0px;
}

/* -------------------------------
   Performance Fee Section Styling
---------------------------------- */

.pf-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;    /* distribute label, qty, price */
    margin-top: 0px;
    margin-right: 2mm
}
/* Left label (I.e. Performance Fees) */
.pf-flex-container>div:first-child {
    flex: 1;    /* take up remaining space */
    margin-left: 0mm;    /* adjust left margin if needed */
    font-weight: normal;    /* remove bold if necessary */
    font-size: 20px;
 }
/* Middle: Quantity selector styling */
.pf-flex-container>div:nth-child(2) input#pf_qty {
    background-color: #000;    /* black background */
    color: #fff;    /* white text */
    font-weight: bold;    /* bold numbers */
    font-size: 1.5em;    /* slightly larger text */
    width: 90px !Important;    /* wider box */
    height: 45px;    /* taller box */
    text-align: center;    /* center the number */
    border: 1px solid #ca9b35;    /* optional border */
    border-radius: 4px;    /* rounded corners */
    margin-left: 0mm;
    margin-right: 10mm;
}
/* Right Margin: Price */
.pf-flex-container>div:nth-child(3) {
    text-align: right;
    font-weight: normal;
}
/*Both "your number of perf..." text & "if you would like to purchase..." text */
.script-only-blurb {
    margin-top: 40px !Important;
    margin-bottom: 20px !Important;
}
.script-only-text {	
	font-size: 16px !important;
}
#pf_total {
    font-size: 20px !important;
    font-weight: normal !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
/* Move performance fees block up a little */
.product-package-frontend.pfees-items {
    margin-top: -23px !important;   /* approx 1 cm upward */
}

/* -------------------------------------
Position & Format Title & Writers Name
----------------------------------------  */

/* Remove gold line from product title */
body.single-product div.product .product_title::before {
    border-bottom: none !important;
    content: none !important;
}

body.single-product div.product .product_title {
    border-bottom: none !important;
}

/* Remove any pseudo-elements or border under product title */
body.single-product div.product .product_title::before,
body.single-product div.product .product_title::after {
    content: none !important;
    border: none !important;
    display: none !important;
}
/* Writer name styling with gold line underneath */
.product-writer {
    position: relative;
    padding-bottom: 10px;    /* space for pseudo-element */
    color: #f3f3f3;
    font-weight: bold;
    font-size: 1.1em;
}
/* Gold line under writer name */
.product-writer::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background-color: #ba9743;
}
/* Writer link styling */
.product-writer a {
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: none;
    font-size: 23px;
}
.product-writer a:hover {
    background-color: #000;    /*black on hover */
    color: #ca9735 !important;    /* gold text */
}
.product-writer strong {      /* The Written by label */
    font-size: 23px;
    line-height: 1.2em;
    margin-right: 4px;
    color: #ffffff !important;
}

/*--------------------------
Move play title down a bit 
----------------------------*/
body.single-product h1.product_title.entry-title {
    margin-bottom: -8px;    /* space between title and writer, reduce to move title down */
    padding-bottom: 0px;    /* adjust as needed */
    font-size: 100px;      /* make title larger */
    font-weight: 800;    /* bolder */
    line-height: 40px;    /* adjust for spacing */
    position: relative;
}

/* ======================================
Additional formatting for PLA Datepicker
=========================================*/
.ui-datepicker { /*days of the week*/
    background-color: #000 !important;
    color: #ca9735 !important;
	font-size: 16px !important;
	font-weight: 600;
    width: 420px !important;
    min-width: 350px !important;
}
.ui-datepicker .ui-datepicker-header { /*month&year at top*/
    background-color: #000 !important;
	color: #f3f3f3 !important;  
	border: none;
	font-size: 20px !important;
	font-weight: 500 !important;
}
.ui-datepicker td a {  /*dates in month-grid*/
    color: #f3f3f3 !important; 
    background-color: #000 !important;
    text-decoration: none;
	font-weight: 600;
}
.ui-datepicker td a:hover {
    background-color: #ca9735 !important;
    color: #000 !important; 
	font-weight: 600;
}
.ui-datepicker .ui-datepicker-today a {
    background-color: #614b1b !important;  
    color: #fff !important; 
    font-weight: bold;
    border-radius: 2px;
}

/* Center day numbers in the calendar cells */
.ui-datepicker table {
    width: 100% !important;
    border-collapse: collapse !important;    /* ensure no extra gaps */
}
.ui-datepicker td { /*each single date square within calendar grid*/
    text-align: center !important;   
    vertical-align: middle !important;   
    height: 2em !important;  
    line-height: 2em !important;    
    padding: 0 !important;   
    float: none !important;
}
/* Optional: make sure the link inside the td is also centered */ 
.ui-datepicker td a {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 2em !important;
    box-sizing: border-box !important;
}
/* Force the calendar arrows to show and override default styles 
================================================================ */
.ui-datepicker .ui-datepicker-prev:before {  /*Calendar arrows*/
    content: '‹' !important;
    color: #ca9735 !important;
    font-size: 35px !important;
}
.ui-datepicker .ui-datepicker-next:before {
    content: '›' !important;
    color: #ca9735 !important;
    font-size: 35px !important;
}
/* Optional: make the arrow clickable area bigger */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    width: 35px !important;
    height: 35px !important;
    text-align: center !important;
    line-height: 35px !important;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background-color: #614b1b;
	border: none;
}
/* Put month + year on the same row */
.ui-datepicker .ui-datepicker-title {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px; /* spacing between dropdowns */
}
/* Make dropdowns behave nicely */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: auto !important;
    min-width: 120px; /* enough for long month names */
    padding: 3px 6px;
	text-align: center;
}

/* Styling for theatre type & perf. type D/D Selectors
====================================================== */
.pla-field {
    margin-bottom: 10px;    /* spacing between fields */
}

.pla-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
}

.pla-field select {
    width: 100%;    /* match input fields */
    padding: 6px;
    font-size: 14px;
    box-sizing: border-box;
}