/*Other Info Section CSS*/
.flex-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.other-info-label,
.other-info-value {
    flex: 1;
    padding: 6px;
    font-size: 14px;
}

.remove-other-info-btn {
    color: #a00;
	font-size: 14px;
}


.logo-and-switch {
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo-and-switch .switch {
    width: 50px;
}
/* Custom styling for the second logo upload block */
.custom-file-upload2 {
    position: relative;
    text-align: center;
}
.custom-upload-button2 {
    display: inline-block;
    background: rgb(0 0 0 / 14%);
    color: #fff !important;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #a9a9a9;
    cursor: pointer;
    transition: background 0.3s ease;
}
.custom-upload-button2:hover {
    background: rgb(0 0 0 / 40%);
}
.logo_preview2 {
    display: block;
    max-width: 90px;
    height: auto;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin: 20px auto;
}
.custom-file-upload2 input[type="file"] {
    display: none;
}
	
		.success-message {
			background-color: #62b862;
			color: #fff !important;
			padding: 10px;
			border-radius: 8px;
			font-weight: bold;
			text-align: center;
		}
		.error-message {
			background-color: #e47070;
			color: #fff !important;
			padding: 10px;
			border-radius: 8px;
			font-weight: bold;
			text-align: center;
		}
		.inactive-card {
			background-color: #e47070;
			color: #fff !important;
			padding: 10px;
			border-radius: 8px;
			font-weight: bold;
			text-align: center;
		}
        /* Customizer page styling */
        .obc-frontend-customizer {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: rgb(224 224 224 / 63%);
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
            font-family: Arial, sans-serif;
        }
        /* Container for two columns */
        .obc-customizer-container {
            display: flex;
            flex-wrap: nowrap;
            gap: 20px;
            align-items: flex-start;
        }
        .obc-customizer-form {
            flex: 1;
            min-width: 300px;
        }
        .obc-customizer-preview {
            flex: 1;
            max-width: 370px;
			position: sticky;
			top: 120px;
        }
		.obc-preview-iframe {
			width:100%;
			min-height:550px;
			border:0;
			border-radius: 20px;
		}
        @media (max-width: 768px) {
			.obc-customizer-form {
				min-width: 200px;
			}
            .obc-customizer-container {
                flex-direction: column;
            }
            .obc-customizer-preview {
                position: static;
				height: 500px;
				min-width: 100%;
				min-height: 500px;
            }
        }
        form.obc-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        form.obc-form input[type="text"],
        form.obc-form input[type="email"],
        form.obc-form input[type="url"],
        form.obc-form textarea,
        form.obc-form select {
            width: 100%;
			padding: 8px;
			margin-bottom: 15px;
			border: 1px solid #a9a9a9;
			border-radius: 8px;
			box-sizing: border-box;
			background: transparent;
        }
        form.obc-form input[type="submit"] {
            background: rgb(0 0 0 / 14%);
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px;
			border: 1px solid #a9a9a9;
            cursor: pointer;
            font-size: 16px;
			text-transform: none;
        }
        form.obc-form input[type="submit"]:hover {
            background: rgb(0 0 0 / 40%);
        }
		/* Upload Logo styling */
		.custom-file-upload {
			position: relative;
			text-align: center;
		}

		.custom-upload-button {
			display: inline-block;
			background: rgb(0 0 0 / 14%);
			color: #fff !important;
			text-align: center;
			padding: 10px 20px;
			border-radius: 8px;
			border: 1px solid #a9a9a9;
			cursor: pointer;
			transition: background 0.3s ease;
		}

		.custom-upload-button:hover {
			background: rgb(0 0 0 / 40%);
		}
		.logo_preview {
			display: block;
            max-width: 90px;
            height: auto;
            border: 2px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
        
		}

		/* Hide the actual file input */
		.custom-file-upload input[type="file"] {
			display: none;
		}
		/*Color pickers styling*/
		.colors-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
		}

		@media (max-width: 600px) {
			.colors-container {
				grid-template-columns: 1fr;
			}
		}

		.colors-container p {
			margin: 0; /* Optional: adjust spacing as needed */
		}
		/*Input fields styling*/
		.basic-input-container {
			display: block;
		}

		@media (max-width: 600px) {
			.obc-frontend-customizer {
				padding: 0px;
				margin-top: 10px;
    			margin-bottom: 10px;
			}
		}

		.basic-input-container p {
			margin: 0; /* Optional: adjust spacing as needed */
		}
		/*Custom links fields styling*/
		.custom-links-container {
			display: flex;
			gap: 10px;
			margin: 20px 0;
			align-items: anchor-center;
		}

		.icon-picker-wrapper {
			display: flex;
			align-items: center;
		}

		.icon-picker-btn {
			padding: 3px 11px;
			border: 1px solid #ccc;
			border-radius: 8px;
			background: #fff;
			cursor: pointer;
			margin-right: 10px;
			text-transform: none;
			font-size: 12px;
			background: rgb(0 0 0 / 14%);
			color: #fff;
			border: 1px solid #a9a9a9;
			cursor: pointer;
			transition: background 0.3s ease;
		}
		
		.icon-picker-btn:hover{
			background: rgb(0 0 0 / 40%);
		}

		.icon-display i {
			font-size: 28px;  /* Adjust icon size as needed */
		}
		.iconpicker-popover.popover.fade.bottom.in {
			height: 230px;
			left: 0% !important;
		}
		/*Social links fields styling*/
		.social-links-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin: 20px 0;
		}

		.social-link label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
		}

		.social-link input {
			width: 100%;
			padding: 8px;
			border: 1px solid #ccc;
			border-radius: 8px;
			box-sizing: border-box;
		}
		.mobile-btn {
			display: none;
		}

		@media (max-width: 600px) {
			.social-links-container {
				 grid-template-columns: 1fr;
			}
		}
		/*PREVIEW BUTTONS FOR MOBILES*/
		.mobile-bottom-buttons {
			display: none;
		  }
		@media (max-width: 770px) {
		.hide-on-mobiles {
			display:none !important;
		}
		/* Mobile Top Buttons Container */
		  .mobile-top-buttons {
			display: block !important;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: rgba(255, 255, 255, 0.95);
			border-bottom: 1px solid #ccc;
			z-index: 1001;
		  }

		  /* Flex container to place title and button on the same line */
		  .mobile-top-buttons .top-buttons-content {
			display: flex;
			align-items: center;
		  }

		  /* Title styling: aligned to the left */
		  .mobile-top-buttons .top-buttons-content h2 {
			margin: 0;
			font-size: 16px;
			line-height: 1.2;
			white-space: nowrap;       /* Prevent wrapping */
			overflow: hidden;          /* Hide overflow */
			text-overflow: ellipsis;   /* Ellipsis for overflow text */
			padding-left: 10px;
		  }

		  /* Save / Update button styling: pushed to the right */
		  .mobile-top-buttons .top-buttons-content .mobile-update-btn {
			margin: 0px;
			background: #3e3e3e;
			color: #fff;
			border: none;
			font-size: 14px;
			cursor: pointer;
			white-space: nowrap;
			text-transform: none !important;
		  }
		
		.remove-custom-link-btn.mobile-btn {
			display: inline-flex !important;
        	align-items: center !important;
        	margin-right: 10px !important;
			text-transform: none;
		}
		.desktop-btn {
			display: none !important;
		}
		  .mobile-bottom-buttons {
			display: block;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(255, 255, 255, 0.95);
			display: flex;
			justify-content: space-around;
			padding: 10px;
			z-index: 1000;
			border-top: 1px solid #ccc;
		  }
		  .mobile-bottom-buttons button {
			flex: 1;
			margin: 0 5px;
			padding: 2px 0;
			background: #3e3e3e;
			color: #fff;
			border: none;
			border-radius: 8px;
			font-size: 15px;
			text-transform: none;
		  }
			.mobile-bottom-buttons button.active {
				background-color: #0073aa !important; /* Change to your desired active color */
				font-weight: bold;
				border: 1px solid #0073aa;
			}
			
			.custom-link-group-1st {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			  }

			  /* Keep these three elements (icon picker, icon display, remove button) in the first row */
			  .custom-link-group-1st .icon-picker-wrapper,
			  .custom-link-group-1st .custom-icon-display,
			  .custom-link-group-1st .remove-custom-link-btn {
				display: inline-flex;
				align-items: center;
				margin-right: 10px;
			  }

			  /* Force the custom link input to take a full new row */
			  .custom-link-group-1st .custom-link-input {
				flex: 1 0 100%;
				margin-top: 10px;
			  }
			
		}
		/* The outer container that mimics the device frame */
		.mobile-device {
		  width: 285px;               /* Mobile width (you can adjust) */
		  height: 570px;              /* Mobile height (example: iPhone 8 dimensions) */
		  border: 10px solid #333;    /* Frame border simulating the device bezel */
		  border-radius: 36px;        /* Rounded corners for a modern look */
		  position: relative;
		  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);  /* Subtle drop shadow */
		  background: #000;           /* Dark bezel background color */
		  overflow: hidden; 
		  margin: auto;          /* Hides any overflow outside the rounded frame */
		}

		/* Optional: a notch at the top to simulate modern devices with a notch */
		.mobile-device::before {
		  content: '';
		  position: absolute;
		  top: -20px;            /* Position it above the device container */
		  left: 50%;
		  transform: translateX(-50%);
		  width: 150px;          /* Width of the notch */
		  height: 30px;          /* Height of the notch */
		  background: #333;      /* Match the device bezel color */
		  border-bottom-left-radius: 20px;
		  border-bottom-right-radius: 20px;
		  z-index: 2;
		}

		/* The screen container where your content will display */
		.mobile-screen {
		  width: 100%;
		  height: 100%;
		  background: #fff;      /* Screen background color */
		  overflow: auto; 
		}

		/* Example styling for an iframe inside the screen */
		.mobile-screen iframe {
		  width: 100%;
		  height: 100%;
		  border: none;
		  display: block;
		}
		
		/* Container for each custom link group */
		.custom-link-group {
			align-items: center;
			gap: 10px;            /* Spacing between elements */
			padding: 6px 0;
			border-bottom: 1px solid #eee; /* Optional separator line */
		}
		.custom-link-group-1st {
			display: flex;
			align-items: center;
			gap: 10px;            /* Spacing between elements */
			padding: 6px 0;
		}
		.custom-link-group-2nd {
			align-items: center;
			gap: 10px;            /* Spacing between elements */
			padding: 6px 0;
		}

		/* Style for the icon picker wrapper */
		.icon-picker-wrapper {
			display: flex;
			align-items: center;
		}

		/* The icon-picker button for custom icons */
		.icon-picker-btn.custom-icon-picker {
			padding: 6px 10px;
			background-color: #0073aa;
			color: #fff;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: background-color 0.2s ease;
		}
		.icon-picker-btn.custom-icon-picker:hover {
			background-color: #005177;
		}

		/* Hidden input for icon (no styling needed) */
		.custom-icon-input {
			display: none;
		}

		/* Display area for the selected icon */
		.custom-icon-display {
			min-width: 24px;       /* Set a minimum width */
			text-align: center;
			font-size: 1.2em;
			color: #333;
		}

		/* Text input for the custom link */
		.custom-link-input {
			flex: 1;               /* Allow the link input to take available space */
			padding: 6px 8px;
			border: 1px solid #ccc;
			border-radius: 8px;
		}

		/* Remove button styling */
		.remove-custom-link-btn {
			color: #a00;
			font-size: 14px;
		}
		.add_custom_link_btn {
			background: rgb(0 0 0 / 14%);
			color: #fff !important;
			text-align: center;
			border-radius: 8px;
			border: 1px solid #a9a9a9;
			cursor: pointer;
			transition: background 0.3s ease;
			margin-top: 10px;
			text-transform: none;
		}
		
		/* Accordion container styling */
		  .accordion {
			border: 1px solid #ddd;
			border-radius: 8px;
			overflow: hidden;
			margin: 1em 0;
		  }

		  /* Accordion header styles */
		  .accordion-header {
			background: #f7f7f7;
			padding: 10px 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: grab;
		  }
		
.non-draggable {
	cursor: pointer !important;
}

		  .accordion-header h3 {
			margin: 0;
			font-size: 1.2em;
		  }

		  /* Accordion content styling */
		  .accordion-content {
			padding: 20px;
			background: #fff;
			border-top: 1px solid #ddd;
			display: grid;
		  }

			/* The small button next to title */
			.accordion-toggle-btn {
			  background: none;
			  border: none;
			  outline: none;
			  font-size: 18px;
			  cursor: pointer;
			  transition: transform 0.3s ease;
			  color: #333;
			  margin-bottom: 0px;
			  margin-right: 10px;
			  padding: 0px;
			}

			/* Rotate the button icon when open */
			.accordion.open .accordion-toggle-btn i {
			  transform: rotate(180deg);
			}

		  /* Customize additional elements as needed */
		  .custom-link-group {
			margin-bottom: 10px;
		  }
		.mobile-top-buttons {
			display: none;
		}
		.logos-container {
			display: flex;
			flex-wrap: wrap; /* Ensures responsive wrapping on smaller screens */
			gap: 20px;       /* Optional: creates space between the logo blocks */
		}

		.logos-container > div {
			flex: 1;       /* Each p will take equal available space */
			margin: 0;     /* Removes default margins that might interfere with layout */
		}
		@media (max-width: 600px) {
			.logos-container {
				display: block;
			}
		}

.preview-copy-qr-buttons {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 0px;
    flex-wrap: wrap; /* in case on mobile they need to go stacked */
}

.preview-copy-qr-buttons a,
.preview-copy-qr-buttons button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #333;
    color: #fff;
    padding: 2px 12px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
	margin-right: 5px;
}

.preview-copy-qr-buttons a:hover,
.preview-copy-qr-buttons button:hover {
    background-color: #000;
    transform: translateY(-2px);
}

.preview-copy-qr-buttons i {
    font-size: 15px;
}

.edit-gallery-button {
	background-color: #4a90e2;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	text-transform: none;
}

.edit-gallery-button:hover {
    background-color: #357ab8;
    transform: translateY(-2px);
}
/* New CSS for top */
.basic-card-data-container {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.basic-card-data-container:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.basic-card-data-container p {
    margin-bottom: 20px;
}

.basic-card-data-container label {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.basic-card-data-container input[type="text"],
.basic-card-data-container select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fafafa;
    transition: border-color 0.3s;
    font-size: 14px;
}

.basic-card-data-container input[type="text"]:focus,
.basic-card-data-container select:focus {
    border-color: #000;
    background: #fff;
    outline: none;
}

.basic-card-data-container select {
    cursor: pointer;
}

.basic-card-data-container option {
    background: #fff;
    color: #333;
}

@media (max-width: 768px) {
    .basic-card-data-container {
        padding: 20px 15px;
    }
}
@media (max-width: 400px) {
	
}
/*CSS for Template Selection*/
.template-groups {
  width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.template-group-heading {
  font-size: 1.2rem;
  font-weight: bold;
}
.template-slider {
    display: flex;
	flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px;
    padding: 10px;
    scroll-behavior: smooth;
	min-height: 220px;
}

.template-slide {
    flex: 0 0 auto; /* Fixed size */
    height: 170px;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s, transform 0.3s;
}

.template-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.template-slide p {
    text-align: center;
}

.template-slide.active {
    border-color: #4A90E2;
    transform: scale(1.05);
}

/* Hide scrollbar (optional) */
.template-slider::-webkit-scrollbar {
    height: 6px;
}
.template-slider::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}
.template-slider::-webkit-scrollbar-track {
    background: transparent;
}
/*Basic Info CSS*/
.basic-info-group {
  margin-bottom: 20px;
}
.basic-info-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.select-card-dropdown {
flex: 1;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  padding-right: 30px !important; /* Room for the arrow */
}
.basic-info-label {
  flex: 1;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  padding-right: 30px !important; /* Room for the arrow */
}
.basic-info-value {
  margin-top: 10px;
  width: 100%;
}
.remove-basic-info-btn {
	color: #a00;
	font-size: 14px;
}
@media (max-width: 768px) {
  .accordion-header {
    cursor: default !important;
    touch-action: manipulation !important;
  }
  .accordion-header h3 {
    font-size: 15px !important;
  }
}
.upload-tip {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    text-align: center;
}