/* =========================================================
   CoachStore Textile Store – Frontend Styles

   "Inherit-first" design: text color, font, and line-height
   come from the active theme. Only interactive elements
   (button, status badges, messages) carry explicit colors
   via CSS custom properties that the site owner can tune in
   the plugin settings. This makes the widget usable on any
   WooCommerce theme — light, dark, or custom.
   ========================================================= */

/* ---- Fallback custom properties (overridden server-side via wp_head) ---- */
:root {
	--cts-btn-bg:    #2271b1;
	--cts-btn-text:  #ffffff;
	--cts-btn-hover: #135e96;
	--cts-trash:     #d63638;
	--cts-success:   #00a32a;
	--cts-error:     #d63638;
}

/* =========================================================
   Upload Widget
   ========================================================= */

.cts-upload-wrapper {
	margin: 1.5em 0;
	/* inherit everything so the widget blends into any theme */
	font-family:  inherit;
	font-size:    1em;
	line-height:  inherit;
	color:        inherit;
	box-sizing:   border-box;
}

.cts-upload-wrapper *,
.cts-upload-wrapper *::before,
.cts-upload-wrapper *::after {
	box-sizing: inherit;
}

/* ---- Drop zone ---- */
.cts-drop-zone {
	display:      block !important;
	border:       2px dashed rgba(128, 128, 128, .45) !important;
	border-radius: 8px;
	padding:      2.25em 1.5em !important;
	text-align:   center !important;
	cursor:       pointer;
	background:   transparent !important;
	transition:   border-color .2s, background .2s;
	margin-bottom: 1em;
	box-sizing:   border-box;
}

.cts-drop-zone:hover {
	border-color: var(--cts-btn-bg) !important;
	background:   rgba(128, 128, 128, .05) !important;
}

.cts-drop-zone.cts-drag-over {
	border-color: var(--cts-btn-bg) !important;
	background:   rgba(128, 128, 128, .09) !important;
}

.cts-drop-zone__inner {
	display:        block;
	pointer-events: none;
}

/* SVG upload icon — color: var(--cts-btn-bg) makes stroke="currentColor" use the button color */
.cts-upload-icon-svg {
	display:  block !important;
	width:    48px !important;
	height:   48px !important;
	margin:   0 auto .65em !important;
	color:    var(--cts-btn-bg);
	overflow: visible;
}

/* Custom image icon */
.cts-upload-icon {
	max-height: 52px;
	display:    block;
	margin:     0 auto .65em;
}

.cts-drop-label {
	display:     block !important;
	margin:      0 0 .3em !important;
	font-weight: 600 !important;
	font-size:   1em !important;
	color:       inherit !important;
	line-height: 1.4 !important;
}

.cts-formats-hint {
	display:     block !important;
	margin:      0 !important;
	font-size:   .82em !important;
	color:       inherit !important;
	opacity:     .6;
	line-height: 1.4 !important;
}

/* ---- Minimum order quantity notice ---- */
.cts-minqty-notice {
	margin:        0 0 .75em;
	padding:       .45em .8em;
	font-size:     .9em;
	color:         inherit;
	border-left:   3px solid var(--cts-btn-bg);
	background:    rgba(34, 113, 177, .07);
	border-radius: 0 4px 4px 0;
	line-height:   1.4;
}

.cts-minqty-notice--cart {
	margin:   .35em 0 .1em;
	padding:  .3em .65em;
	font-size: .82em;
}

/* ---- File-input row ---- */
.cts-file-input-row {
	display:     flex;
	align-items: center;
	gap:         .6em;
	flex-wrap:   wrap;
}

/* Upload button — explicit colors because it must be recognisable as an action */
.cts-upload-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .4em;
	padding:         .6em 1.25em;
	background:      var(--cts-btn-bg);
	color:           var(--cts-btn-text) !important;
	border:          none !important;
	border-radius:   4px;
	cursor:          pointer;
	font-family:     inherit;
	font-size:       .95em;
	font-weight:     600;
	line-height:     1.3;
	text-decoration: none !important;
	transition:      background .2s, box-shadow .2s;
	white-space:     nowrap;
	outline:         none;
}

.cts-upload-btn:hover,
.cts-upload-btn:focus-visible {
	background:  var(--cts-btn-hover);
	color:       var(--cts-btn-text) !important;
	box-shadow:  0 0 0 3px rgba(34, 113, 177, .3);
}

.cts-required {
	color:       var(--cts-error);
	margin-left: 2px;
}

/* ---- File list ---- */
.cts-file-list {
	margin-top: .9em;
}

.cts-file-item {
	display:     flex;
	align-items: center;
	gap:         .6em;
	padding:     .45em .75em;
	border:      1px solid rgba(128, 128, 128, .25);
	border-radius: 4px;
	margin-bottom: .4em;
	font-size:   .9em;
	color:       inherit;
	background:  transparent;
	transition:  border-color .15s;
}

.cts-file-item:hover {
	border-color: rgba(128, 128, 128, .45);
}

.cts-file-item__name {
	flex:          1;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	color:         inherit;
}

.cts-file-item__size {
	font-size:  .85em;
	opacity:    .6;
	white-space: nowrap;
	color:      inherit;
}

.cts-file-item__remove {
	background:  none;
	border:      none;
	cursor:      pointer;
	color:       var(--cts-trash);
	font-size:   1.1em;
	line-height: 1;
	padding:     0 .25em;
	transition:  opacity .15s;
	flex-shrink: 0;
}

.cts-file-item__remove:hover {
	opacity: .65;
}

.cts-file-item--uploading {
	opacity: .5;
}

/* ---- Progress bar ---- */
.cts-progress-bar {
	height:       4px;
	background:   rgba(128, 128, 128, .2);
	border-radius: 2px;
	overflow:     hidden;
	margin-top:   .4em;
}

.cts-progress-bar__fill {
	height:     100%;
	background: var(--cts-btn-bg);
	width:      0%;
	transition: width .2s;
}

/* ---- Messages ---- */
.cts-messages {
	margin-top: .6em;
	font-size:  .9em;
}

.cts-msg {
	padding:       .45em .9em;
	border-radius: 4px;
	margin-bottom: .3em;
	border-left:   3px solid;
	font-size:     .9em;
}

.cts-msg--success {
	border-color: var(--cts-success);
	background:   rgba(0, 163, 42, .08);
	color:        var(--cts-success);
}

.cts-msg--error {
	border-color: var(--cts-error);
	background:   rgba(214, 54, 56, .08);
	color:        var(--cts-error);
}

/* ---- Message textarea ---- */
.cts-message-field {
	margin-top: 1em;
}

.cts-message-field label {
	display:       block;
	font-weight:   600;
	margin-bottom: .3em;
	color:         inherit;
	float:         none !important;
	width:         auto !important;
}

.cts-message-textarea {
	display:     block;
	width:       100%;
	max-width:   100%;
	resize:      vertical;
	font-family: inherit;
	font-size:   inherit;
	color:       inherit;
	background:  transparent;
	border:      1px solid rgba(128, 128, 128, .35);
	border-radius: 4px;
	padding:     .5em .75em;
	line-height: inherit;
	transition:  border-color .15s, box-shadow .15s;
}

.cts-message-textarea:focus {
	border-color: var(--cts-btn-bg);
	box-shadow:   0 0 0 2px rgba(34, 113, 177, .2);
	outline:      none;
}

/* ---- Privacy ---- */
.cts-privacy-row {
	margin-top: .9em;
	font-size:  .9em;
}

.cts-privacy-label {
	display:     flex;
	align-items: flex-start;
	gap:         .5em;
	cursor:      pointer;
	color:       inherit;
}

/* =========================================================
   Product Custom Fields – Frontend
   ========================================================= */

.cts-product-fields {
	margin:        1.5em 0;
	padding:       1em 1.25em;
	border:        1px solid rgba(128, 128, 128, .2);
	border-radius: 6px;
	background:    transparent;
	font-family:   inherit;
	font-size:     1em;
	color:         inherit;
}

.cts-pf-heading {
	margin:        0 0 .9em;
	font-size:     1em;
	font-weight:   700;
	color:         inherit;
	border-bottom: 1px solid rgba(128, 128, 128, .2);
	padding-bottom: .5em;
}

.cts-pf-field {
	margin-bottom: 1em;
}

.cts-pf-field:last-child {
	margin-bottom: 0;
}

.cts-pf-label {
	display:       block;
	font-weight:   600;
	margin-bottom: .3em;
	font-size:     .95em;
	color:         inherit;
}

.cts-req-star {
	color:       #d63638;
	margin-left: 2px;
}

.cts-pf-input {
	display:     block;
	width:       100%;
	max-width:   480px;
	font-family: inherit;
	font-size:   inherit;
	color:       inherit;
	background:  transparent;
	border:      1px solid rgba(128, 128, 128, .35);
	border-radius: 4px;
	padding:     .4em .65em;
}

.cts-pf-input:focus {
	border-color: var(--cts-btn-bg);
	outline:      none;
	box-shadow:   0 0 0 2px rgba(34, 113, 177, .2);
}

/* Checkbox */
.cts-pf-checkbox-label {
	display:     flex;
	align-items: center;
	gap:         .4em;
	cursor:      pointer;
	color:       inherit;
}

/* Radio */
.cts-pf-radio-group {
	display:   flex;
	flex-wrap: wrap;
	gap:       .5em .9em;
}

.cts-pf-radio-label {
	display:     flex;
	align-items: center;
	gap:         .35em;
	cursor:      pointer;
	font-size:   .95em;
	color:       inherit;
}

/* Color swatches */
.cts-pf-color-swatches {
	display:     flex;
	flex-wrap:   wrap;
	gap:         .55em;
	align-items: flex-start;
}

.cts-swatch-label {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            .25em;
	cursor:         pointer;
}

.cts-swatch-input {
	position:      absolute;
	opacity:       0;
	width:         0;
	height:        0;
	pointer-events: none;
}

.cts-color-swatch {
	display:      block;
	width:        36px;
	height:       36px;
	border-radius: 50%;
	border:       3px solid transparent;
	box-shadow:   0 0 0 1px rgba(128, 128, 128, .35);
	transition:   box-shadow .15s, border-color .15s, transform .1s;
}

.cts-swatch-label:hover .cts-color-swatch {
	box-shadow: 0 0 0 2px var(--cts-btn-bg);
	transform:  scale(1.08);
}

.cts-swatch-input:checked + .cts-color-swatch {
	border-color: #fff;
	box-shadow:   0 0 0 3px var(--cts-btn-bg);
	transform:    scale(1.1);
}

.cts-swatch-name {
	font-size:     .75em;
	color:         inherit;
	opacity:       .7;
	text-align:    center;
	max-width:     60px;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.cts-cart-swatch {
	margin-left: 4px;
}

/* =========================================================
   Order detail / My Account
   ========================================================= */

.cts-order-files {
	margin-top: 2em;
}

.cts-files-table {
	width: 100%;
}

.cts-files-table th,
.cts-files-table td {
	padding:    .6em .8em;
	text-align: left;
}

/* Status badges use explicit colors — semantic meaning requires it */
.cts-status {
	display:       inline-block;
	padding:       .2em .6em;
	border-radius: 3px;
	font-size:     .85em;
	font-weight:   600;
}

.cts-status--pending {
	background: rgba(255, 200, 50, .15);
	color:      #7c5d10;
}

.cts-status--approved {
	background: rgba(0, 163, 42, .12);
	color:      var(--cts-success);
}

.cts-status--rejected {
	background: rgba(214, 54, 56, .1);
	color:      var(--cts-error);
}

.cts-admin-note {
	font-size: .85em;
	opacity:   .65;
	color:     inherit;
}

.cts-download-btn {
	font-size: .85em !important;
	padding:   .3em .7em !important;
}

.cts-order-upload {
	margin-top:  1.5em;
	padding-top: 1.5em;
	border-top:  1px solid rgba(128, 128, 128, .2);
}

.cts-submit-order-upload {
	margin-top: .8em;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 480px) {
	.cts-drop-zone {
		padding: 1.75em 1em;
	}

	.cts-upload-icon-svg {
		width:  38px;
		height: 38px;
	}

	.cts-pf-input {
		max-width: 100%;
	}
}

/* =========================================================
   Price Tiers
   ========================================================= */

.cts-price-tiers { margin: 1em 0; }
.cts-tiers-display { border-collapse: collapse; width: 100%; max-width: 300px; font-size: .9em; }
.cts-tiers-display th, .cts-tiers-display td { padding: .4em .65em; border: 1px solid rgba(128,128,128,.2); text-align: left; }
.cts-tiers-display thead th { font-weight: 600; background: rgba(128,128,128,.05); }
.cts-tier-row.cts-tier-active { background: rgba(34,113,177,.1); font-weight: 700; }
.cts-tier-row.cts-tier-active td { color: var(--cts-btn-bg); }

/* =========================================================
   Size Table
   ========================================================= */

.cts-size-table { margin: 1em 0; }
.cts-sizes-grid { border-collapse: collapse; width: 100%; max-width: 320px; font-size: .95em; }
.cts-sizes-grid th, .cts-sizes-grid td { padding: .4em .65em; border: 1px solid rgba(128,128,128,.2); }
.cts-sizes-grid thead th { font-weight: 600; background: rgba(128,128,128,.05); text-align: left; }
.cts-sizes-grid td:last-child { text-align: center; }
.cts-size-qty { width: 70px !important; text-align: center; }
.cts-sizes-grid tfoot td { font-weight: 600; background: rgba(128,128,128,.04); }
.cts-size-minqty-hint { font-size: .82em; opacity: .65; font-weight: 400; }
.cts-size-total { font-size: 1.05em; }